Jako programiści sieci Web spędzamy dużo czasu na tworzeniu naszego kodu w środowisku edycji. Następnie przechodzimy do przeglądarki, aby użyć wbudowanych narzędzi programistycznych do debugowania i dostrajania interfejsu użytkownika produktu. Problem polega na tym, że wyniki ulepszania i debugowania nie znajdują odzwierciedlenia w kodzie źródłowym. W Microsoft Edge pracujemy obecnie nad kilkoma rozwiązaniami, które są otwarte do dyskusji, i z chęcią Twoja opinia na ich temat
Jeśli wolisz obejrzeć film zamiast czytać, oto trzyminutowe wprowadzenie:
Aktualny problem z poprawkami i zmianami w Narzędziach dla programistów
Dzisiaj przeglądarki DevTools zapewniają wysoce wyrafinowane narzędzia wizualne, które uczą – na przykład – składni CSS podczas ich używania. Te narzędzia zmieniają rzeczy w sposób wizualny. Na przykład możesz kliknąć ikonę „Flexbox” obok dowolnej właściwości Flexbox CSS, a otrzymasz wyskakujące okienko z podglądem wyniku zmiany stylu.
Jest to doskonałe narzędzie do debugowania i zapobiega ciągłemu sprawdzaniu składni CSS. Istnieje jednak rozłączenie, ponieważ kod wyświetlany w tych przepływach pracy debugowania nie jest tym, co napisałeś w edytorze kodu.
Edytor stylów działa, wyświetlając tylko częściowy widok kodu dla bieżącego elementu wybranego w przeglądarce. Nie wiesz, gdzie i jak ten kod ma się do reszty kodu CSS na Twojej stronie. Chociaż możesz przewijać, aby wyświetlić resztę kodu, czy nie byłoby lepiej zobaczyć również oryginał Plik CSS?
Możesz uzyskać do niego dostęp, klikając linki do samego pliku CSS, który przenosi Cię do Narzędzia Źródła i oddala od edytora stylów.
Ten jest edytorem wbudowane w narzędzia programistyczne przeglądarki, które były fajne, gdy się pojawiły, ale nie błyszczą w porównaniu z tym, czego oczekujemy od edytora w dzisiejszych czasach. Jeśli nie oddokujesz narzędzi i nie użyjesz ich we własnym oknie, nie masz wystarczającej ilości ekranu, aby wygodnie edytować.
Niezależnie od tego, czy używasz narzędzi wizualnych do dostrajania CSS, czy edytora Źródeł, pozostaje jeden problem: po wielu zmianach rzeczy i osiągnąłeś pożądany rezultat, w jaki sposób wprowadzić te zmiany z powrotem do kodu źródłowego?
Czy wiesz, że istnieje narzędzie do zmian?
Narzędzia dla programistów przeglądarki funkcja, która pomaga w tym, zwana zmianami, która nie jest zbytnio używana i jest w dużej mierze nieznana. Możesz uzyskać do niego dostęp z menu poleceń lub menu kontekstowego i pokazuje on widok różnicowy wszystkich plików, które zmieniłeś w tej sesji. Możesz użyć tego narzędzia, aby skopiować i wkleić zmiany z powrotem do plików źródłowych.
Firefox używa nieco innego podejścia do narzędzia zmian, które aktualizuje się na bieżąco wraz ze zmianami, które wprowadzasz. Tworzy również plik CSS, który możesz skopiować i wkleić, zawierający komentarze wyjaśniające, do których plików należy wkleić te zmiany z powrotem oraz co zostało usunięte lub dodane.
Chociaż jest to dobry krok we właściwym kierunku, wymaga dodatkowego kroku, aby skopiować i wkleić kod z powrotem do edytora.
Ulepszony przepływ Workspace, w tym Visual Studio CodeObszary robocze w narzędziach dla programistów Chromium istnieją już od dłuższego czasu, ale nie są zbytnio użyteczne. Dlatego chcieliśmy, aby było bardziej oczywiste, że możesz synchronizować zmiany na żywo między DevTools przeglądarki a edytorem kodu. Zdaliśmy sobie również sprawę, że edytor w narzędziu Źródła nie jest tym, z czego ludzie chcą korzystać.
A co by było, gdybyś miał wygodę edytora, którego już używasz, i korzyści płynących z wprowadzania na żywo zmian w plikach obszarów roboczych?
Począwszy od wersji 96 Microsoft Edge, możesz znaleźć nowy eksperyment w DevTools o nazwie „Otwórz pliki źródłowe w Visual Studio Code“.
Po włączeniu tego narzędzia i ponownym uruchomieniu narzędzi programistycznych przejście do pliku na dysku twardym lub adresu lokalnego serwera, takiego jak localhost lub 127.0.0.1 wyświetli monit z prośbą o zidentyfikowanie folderu głównego tego pliku.Możesz również zrezygnować z sesji lub nigdy nie widzieć tej opcji zysk.
Raz wybierzesz folder, przeglądarka poprosi Cię o pozwolenie na uzyskanie dostępu do tego folderu – podobnie jak w przypadku korzystania z obszarów roboczych w narzędziu Źródła.
Gdy teraz dokonasz jakiejkolwiek zmiany w panelu Style, plik zmieni się na dysku. Różnica polega na tym, że jeśli masz na komputerze edytor Visual Studio Code, kliknięcie linków do plików spowoduje otwarcie ich w tym edytorze zamiast w narzędziu Źródła. Pozostajesz w środowisku, do którego jesteś przyzwyczajony, ze wszystkimi dodanymi dostosowaniami i rozszerzeniami.
To wspaniałe, ponieważ Twoje zmiany CSS są teraz trwałe. Problem polega jednak na tym, że mogą być zbyt nachalne. Wszelkie zmiany w narzędziu Style, takie jak zmiana rozmiaru o jedną jednostkę, spowodują zmianę pliku na dysku twardym. Jeśli używasz dowolnego rozwiązania serwerowego do ponownego ładowania na żywo, a nawet skryptów, które obserwują folder i uruchamiają proces kompilacji, może to szybko stać się bałaganem.
Edycja lustrzana CSS
W najnowszej wersji Rozszerzenie Edge DevTools for Visual Studio Code wprowadziliśmy inny sposób zamykania pętli tworzenia/debugowania o nazwie „CSS Mirror Editing”. Jeśli chcesz, możesz obejrzeć to 40-sekundowe wprowadzenie wideo.
Jeśli włączysz tę funkcję, zmiany wprowadzone w narzędziu Style mają również wpływ na kod źródłowy, ale plik pozostanie niezmieniony do momentu zapisania go w Visual Studio Code. Zyskujesz możliwość utraty zmian i pełną kontrolę nad plikami na dysku twardym.
Jeśli używasz kontroli wersji, możesz zobaczyć wszystkie wprowadzone zmiany jako widok różnic po zapisaniu pliku. Zapewnia to całą wygodę przepływu pracy w obszarach roboczych przy mniejszej liczbie zmian w plikach.
Co powinniśmy zrobić, aby ulepszyć to środowisko?
Wygląda na to, że mamy wszystkie właściwe komponenty w miejsce zapewniające programistom oraz kompleksowe doświadczenie w zakresie tworzenia i debugowania. Chcielibyśmy wiedzieć, co myślisz o tych podejściach i które preferujesz.
Jeśli masz jakieś uwagi, skontaktuj się z zespołem Edge DevTools na Twitterze pod adresem @EdgeDevTools, skomentuj ten problem na GitHubie dotyczący CSS Mirror Editing lub użyj narzędzia Feedback wbudowanego w DevTools w przeglądarce.
– Chris Heilmann, główny menedżer programu, Microsoft Edge