Konfigurowanie obszarów roboczych w celu zapisywania zmian w plikach źródłowych

Kayce Basques

Sofia Emelianova

Skonfiguruj obszar roboczy, aby zapisywać zmiany wprowadzone w Narzędziach deweloperskich w plikach źródłowych na komputerze. Możesz automatycznie połączyć folder obszaru roboczego z Narzędziami deweloperskimi, udostępniając plik konfiguracji, lub ręcznie dodać lokalizację obszaru roboczego w panelu Źródła.

Przegląd

Automatyczne (lub ręczne) połączenie z folderem obszaru roboczego umożliwia zapisanie zmiany wprowadzonej w Narzędziach deweloperskich w lokalnej kopii tego samego pliku na komputerze. Załóżmy na przykład, że:

• Masz kod źródłowy witryny na komputerze.
• Uruchamiasz lokalny serwer WWW z katalogu kodu źródłowego, dzięki czemu witryna jest dostępna pod adresem localhost:PORT i udostępnia też prosty plik JSON z metadanymi (opisany poniżej).
• Masz otwartą stronę localhost:PORT w Google Chrome i używasz Narzędzi deweloperskich, aby zmienić jej kod CSS.

Po połączeniu folderu obszaru roboczego zmiany wprowadzone w panelu Źródła w plikach CSS, HTML i JavaScript są zapisywane w kodzie źródłowym na komputerze. Narzędzia deweloperskie nie zapisują jednak zmian wprowadzonych w modelu DOM w panelu Elementy.

Co więcej, Narzędzia deweloperskie zwykle mogą zmapować zoptymalizowany kod z powrotem na oryginalny kod źródłowy za pomocą map źródeł.

Generowanie metadanych połączenia

Aby umożliwić Narzędziom deweloperskim automatyczne wykrywanie folderu obszaru roboczego, wygeneruj losowy identyfikator UUID w wersji 4 i umieść go w tym pliku JSON:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Następnie umieść plik JSON w path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Na koniec uruchom lokalny serwer HTTP i upewnij się, że udostępnia on też plik JSON.

Możesz też pominąć ten krok i ręcznie skonfigurować połączenie z folderem.

Łączenie folderu obszaru roboczego

Uwaga: w tym i kolejnych krokach używamy wersji demonstracyjnej automatycznych folderów Workspace, aby zaprezentować tę funkcję.

Aby połączyć folder:

1. W Chrome przejdź do strony hostowanej lokalnie (w tym przykładzie: localhost:8000) i otwórz Narzędzia deweloperskie.

2. W sekcji Źródła > Workspace kliknij Połącz obok folderu.

   

3. Gdy pojawi się prośba, kliknij Edytuj pliki, aby zezwolić Narzędziom deweloperskim na dostęp do folderu.

   

4. Po połączeniu możesz otworzyć folder na karcie Obszary robocze.

   

Na karcie Obszar roboczy obok plików HTML, CSS i JavaScript widoczna jest zielona kropka. Te zielone kropki oznaczają, że Narzędzia deweloperskie utworzyły mapowanie między zasobami sieciowymi strony a plikami w folderze.

Zapisywanie zmian w folderze źródłowym

Możesz zapisywać zmiany w plikach CSS, HTML i JavaScript w połączonym folderze obszaru roboczego.

Zapisz zmiany w CSS

Wskazówka: jeśli masz połączony folder obszaru roboczego, panel Pomoc AI może automatycznie zapisywać zmiany CSS w źródłach.

Aby zapisać zmiany w CSS:

1. Otwórz plik CSS z połączonego folderu obszaru roboczego w sekcji Źródła > Obszary robocze.

2. Wprowadź zmiany w CSS.

   Uwaga: zmiana dotyczy strony opublikowanej, ale nie źródła.

3. Zapisz zmianę, na przykład naciskając Ctrl / Cmd + S, i zobacz zastosowaną zmianę w pliku źródłowym. W panelu Źródła obok nazwy pliku pojawi się zielona kropka.

   Uwaga: nie musisz ponownie wczytywać strony, aby zastosować i zapisać zmiany w kodzie CSS.

Aby dowiedzieć się, jak przebiega ten proces, obejrzyj film:

Zapisywanie zmian w kodzie HTML

Aby zapisać zmiany w kodzie HTML:

1. Otwórz plik HTML z połączonego folderu obszaru roboczego w sekcji Źródła > Obszary robocze.

2. Wprowadź zmiany w kodzie HTML.

   Uwaga: zmiana nie dotyczy jeszcze opublikowanej strony ani źródła.

3. Zapisz zmianę, na przykład naciskając Ctrl / Cmd + S, i zobacz zastosowaną zmianę w pliku źródłowym. W panelu Źródła obok nazwy pliku pojawi się zielona kropka.

4. Aby zobaczyć zmiany, odśwież stronę.

Aby dowiedzieć się, jak przebiega ten proces, obejrzyj film:

Uwaga: zmiany w kodzie HTML możesz zastosować i zapisać w panelu Źródła, ale nie w panelu Elementy.

Dlaczego nie można zmienić kodu HTML w panelu Elementy?

• Drzewo węzłów widoczne w panelu Elementy reprezentuje DOM strony.
• Aby wyświetlić stronę, przeglądarka pobiera kod HTML przez sieć, analizuje go, a następnie konwertuje na drzewo węzłów DOM.
• Jeśli strona zawiera kod JavaScript, może on dodawać, usuwać lub zmieniać węzły DOM. CSS może też zmieniać DOM za pomocą właściwości content.
• Przeglądarka ostatecznie używa modelu DOM, aby określić, jakie treści powinna wyświetlać użytkownikom.
• Dlatego ostateczny stan strony, który widzą użytkownicy, może się bardzo różnić od kodu HTML pobranego przez przeglądarkę.
• Utrudnia to Narzędziom deweloperskim określenie, gdzie należy zapisać zmianę wprowadzoną w panelu Elementy, ponieważ na DOM wpływają HTML, JavaScript i CSS.

Krótko mówiąc, drzewo DOM !== HTML.

Zapisz zmiany w kodzie JavaScript

Aby zapisać zmiany w kodzie JavaScript:

1. Otwórz plik JavaScript z połączonego folderu obszaru roboczego w sekcji Źródła > Obszary robocze.

2. Wprowadź zmiany w kodzie JavaScript.

   Uwaga: zmiana nie dotyczy jeszcze opublikowanej strony ani źródła.

3. Zapisz zmianę, na przykład naciskając Ctrl / Cmd + S, i zobacz zastosowaną zmianę w pliku źródłowym. W panelu Źródła obok nazwy pliku pojawi się zielona kropka.

4. Jeśli lokalny serwer HTTP nasłuchuje zmian w plikach źródłowych i automatycznie ponownie wczytuje stronę, zmiany zostaną zastosowane po zapisaniu ich w Narzędziach deweloperskich. W przeciwnym razie wdróż ponownie serwer lokalny.

Aby dowiedzieć się, jak przebiega ten proces, obejrzyj film:

Wskazówka: podczas wprowadzania zmian w kodzie JavaScript czasami trzeba uzyskać dostęp do innych paneli, takich jak Elementy lub Konsola. Aby to zrobić, możesz użyć szuflady i zmienić kolejność paneli.

Usuwanie połączenia z folderem obszaru roboczego

Aby usunąć połączenie z folderem obszaru roboczego, w sekcji Źródła > Obszar roboczy kliknij folder prawym przyciskiem myszy, wybierz z menu Usuń z obszaru roboczego i kliknij Usuń.

Uwaga: zmiana lub usunięcie identyfikatora UUID folderu w pliku JSON metadanych również powoduje odłączenie folderu.

Ręczne łączenie folderu obszaru roboczego

1. Otwórz Narzędzia deweloperskie na stronie hostowanej lokalnie.

2. W sekcji Źródła > Obszar roboczy kliknij Dodaj folder ręcznie. Następnie wybierz folder z plikami źródłowymi.

   

   Uwaga: możesz też przeciągnąć folder do panelu Źródła.

3. Następnie wykonaj kroki 3 i 4 opisane w sekcji Łączenie folderu obszaru roboczego.

Ograniczenia

Jeśli używasz nowoczesnego frameworka, prawdopodobnie przekształca on kod źródłowy z formatu, który jest łatwy w utrzymaniu, na format zoptymalizowany pod kątem jak najszybszego działania. Połączenie z folderem obszaru roboczego zwykle umożliwia zmapowanie zoptymalizowanego kodu z powrotem na oryginalny kod źródłowy za pomocą map źródeł.

Społeczność Narzędzi deweloperskich pracuje nad obsługą funkcji udostępnianych przez mapy źródłowe w różnych platformach i narzędziach. Jeśli napotkasz problemy podczas korzystania z obszaru roboczego z wybraną platformą lub uda Ci się go uruchomić po niestandardowej konfiguracji, rozpocznij wątek na liście adresowej lub zadaj pytanie na Stack Overflow, aby podzielić się wiedzą z resztą społeczności Narzędzi deweloperskich.

Dalsze kroki

Wszystkimi skonfigurowanymi już folderami możesz zarządzać w sekcji Ustawienia > Obszar roboczy.

Następnie dowiedz się, jak używać Narzędzi deweloperskich do modyfikowania kodu CSS i debugowania kodu JavaScript.

Zobacz też

Zastąpienia lokalne to inna, podobna funkcja Narzędzi deweloperskich, która umożliwia symulowanie treści z internetu lub nagłówków żądań. Dzięki temu możesz swobodnie eksperymentować ze zmianami na stronie bez czekania na aktualizację backendu. W przypadku lokalnych zastąpień zmiany są zachowywane podczas wczytywania strony, ale nie są mapowane na kod źródłowy strony.