Edytowanie i zapisywanie plików w obszarze roboczym

Kayce Basques

Sofia Emelianova

W tym samouczku możesz poćwiczyć konfigurowanie Workspace, aby móc używać go w swoich projektach. Workspace umożliwia zapisywanie zmian wprowadzonych w DevTools w kodzie źródłowym na komputerze.

Uwaga: zanim zaczniesz ten samouczek, musisz wiedzieć, jak:

• Utwórz stronę internetową, używając języków HTML, CSS i JavaScript.
• Używaj Narzędzi deweloperskich do wprowadzania podstawowych zmian w kodzie CSS.
• Uruchom lokalny serwer WWW HTTP.

Omówienie

Obszar roboczy umożliwia zapisanie zmiany wprowadzonej w Narzędziach deweloperskich w lokalnej kopii tego samego pliku na komputerze. Na przykład:

• masz na komputerze kod źródłowy swojej witryny;
• Uruchomiono lokalny serwer WWW z katalogu kodu źródłowego, dzięki czemu witryna jest dostępna pod adresem localhost:8080.
• Otwórz localhost:8080 w Google Chrome i użyj DevTools, aby zmienić CSS witryny.

Gdy masz włączony obszar roboczy, zmiany w kodzie CSS wprowadzane w DevTools są zapisywane w kodzie źródłowym na komputerze.

Ograniczenia

Jeśli używasz nowoczesnego frameworka, prawdopodobnie przekształca on kod źródłowy z formatu, który jest łatwy do utrzymania, w format zoptymalizowany pod kątem jak najszybszego działania. Workspace zazwyczaj może zmapować zoptymalizowany kod z powrotem na oryginalny kod źródłowy za pomocą map źródeł.

Społeczność Narzędzi deweloperskich pracuje nad obsługą funkcji map źródeł w różnych ramówkach i narzędziach. Jeśli podczas korzystania ze stacji roboczej z wybranym frameworkem napotkasz problemy lub uda Ci się go uruchomić po wprowadzeniu niestandardowej konfiguracji, rozpocznij wątek na liście mailingowej lub zadaj pytanie na Stack Overflow, aby podzielić się swoją wiedzą z resztą społeczności DevTools.

Powiązana funkcja: lokalne zastąpienia

Zastąpienia lokalne to kolejna funkcja w Narzędziach deweloperskich, która jest podobna do workspace. Używaj lokalnych zastąpień, aby symulować zawartość strony lub nagłówki żądań bez czekania na zmiany w backendzie lub gdy chcesz eksperymentować ze zmianami na stronie i chcesz zobaczyć te zmiany w różnych wczytaniach strony, ale nie zależy Ci na mapowaniu zmian w kodzie źródłowym strony.

Krok 1. Konfiguracja

Aby uzyskać praktyczne umiejętności związane z Workspace, ukończ ten samouczek.

Konfigurowanie wersji demonstracyjnej

1. Skopiuj to demo repozytorium do katalogu na komputerze. Na przykład ~/Desktop.

2. Uruchom lokalny serwer WWW w ~/Desktop/devtools-workspace-demo. Poniżej znajduje się przykładowy kod do uruchamiania serwera SimpleHTTPServer, ale możesz użyć dowolnego serwera.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   W dalszej części tego samouczka ten katalog będzie określany jako /devtools-workspace-demo.

3. Otwórz kartę w Google Chrome i wejdź na wersję witryny hostowaną lokalnie. Powinieneś mieć do niego dostęp za pomocą adresu URL, takiego jak localhost:8000. Dokładny numer portu może być inny.

   

Konfigurowanie Narzędzi deweloperskich

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

2. Przejdź do Źródła > Obszar roboczy i skonfiguruj obszar roboczy w skopiowanym folderze devtools-workspace-demo. Możesz to zrobić na kilka sposobów:

   • Przeciągnij folder i upuść go w Edytorze w sekcji Źródła.
   • Kliknij link wybierz folder i wybierz folder.
   • Kliknij  Dodaj folder i wybierz folder.

3. W prośbie u góry kliknij Zezwól, aby przyznać Narzędziom deweloperskim uprawnienia do odczytu i zapisu do katalogu.

   

Na karcie Obszar roboczy obok elementów index.html, script.js i styles.css pojawi się zielona kropka. Zielone kropki oznaczają, że Narzędzia deweloperskie utworzyły mapowanie między zasobami sieciowymi strony a plikami w devtools-workspace-demo.

Krok 2. Zapisz zmianę w pliku CSS na dysku

1. Otwórz plik /devtools-workspace-demo/styles.css w edytorze tekstu. Zwróć uwagę, że właściwość color elementów h1 ma wartość fuchsia.

   

2. Zamknij edytor tekstu.

3. W DevTools kliknij kartę Elementy.

4. Zmień wartość właściwości color elementu <h1> na swój ulubiony kolor. Aby to zrobić:

   1. W drzewie DOM kliknij element <h1>.
   2. W panelu Style odszukaj regułę CSS h1 { color: fuchsia } i zmień kolor na ulubiony. W tym przykładzie kolor jest ustawiony na zielony.

   

   Zielona kropka  obok styles.css:1 w panelu Styl oznacza, że każda wprowadzona zmiana jest mapowana na /devtools-workspace-demo/styles.css.

5. Ponownie otwórz plik /devtools-workspace-demo/styles.css w edytorze tekstu. Właściwość color ma teraz ustawiony Twój ulubiony kolor.

6. Załaduj ponownie stronę. Kolor elementu <h1> jest nadal ustawiony na Twój ulubiony kolor. To działa, ponieważ po wprowadzeniu zmiany i jej zapisaniu na dysku przez DevTools. Gdy ponownie załadowałeś stronę, serwer lokalny wysłał zmodyfikowaną kopię pliku z dysku.

Krok 3. Zapisz zmianę kodu HTML na dysku

Spróbuj zmienić kod HTML w panelu Elementy

Ostrzeżenie: proces, który chcesz wypróbować, nie działa. Teraz możesz to sprawdzić, aby później nie tracić czasu na szukanie przyczyny, dlaczego coś nie działa.

1. Otwórz kartę Elementy.

2. Kliknij dwukrotnie zawartość tekstową elementu h1, w której jest tekst Workspaces Demo, i zastąp go tekstem I ❤️ Cake.

   

3. Otwórz plik /devtools-workspace-demo/index.html w edytorze tekstu. Wprowadzona przez Ciebie zmiana nie jest widoczna.

4. Załaduj ponownie stronę. Strona wróci do pierwotnego tytułu.

Opcjonalnie: dlaczego nie działa

Uwaga: w tej sekcji wyjaśniono, dlaczego nie działa proces z sekcji Spróbuj zmienić kod HTML w panelu Elementy. Jeśli nie interesuje Cię, dlaczego tak się stało, możesz pominąć tę sekcję.

• Drzewo węzłów widoczne w panelu Elementy reprezentuje DOM strony.
• Aby wyświetlić stronę, przeglądarka pobiera kod HTML z sieci, analizuje go, a następnie przekształca w drzewo węzłów modelu DOM.
• Jeśli na stronie jest kod JavaScript, może on dodawać, usuwać lub zmieniać węzły modelu DOM. Za pomocą właściwości content CSS może też zmieniać DOM.
• Ostatecznie przeglądarka korzysta z DOM, aby określić, jakie treści powinna wyświetlić użytkownikom.
• Dlatego końcowy stan strony widziany przez użytkowników może się znacznie różnić od kodu HTML pobranego przez przeglądarkę.
• To utrudnia narzędziom DevTools ustalenie, gdzie należy zapisać zmiany wprowadzone w panelu Elementy, ponieważ na DOM wpływają HTML, JavaScript i CSS.

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

Zmiana kodu HTML w panelu Źródła

Jeśli chcesz zapisać zmianę w kodzie HTML strony, zrób to w panelu Źródła.

1. Kliknij Źródła > Strona.
2. Kliknij (indeks). Otworzy się kod HTML strony.
3. Zawartość komórki <h1>Workspaces Demo</h1> zastąp komórką <h1>I ❤️ Cake</h1>.
4. Aby zapisać zmiany, naciśnij Command + S (Mac) lub Control + S (Windows, Linux i ChromeOS).

5. Załaduj ponownie stronę. Element <h1> nadal wyświetla nowy tekst.

   

6. Otwórz pokój /devtools-workspace-demo/index.html. Element <h1> zawiera nowy tekst.

Krok 4. Zapisz zmianę kodu JavaScript na dysku

W panelu Źródła możesz też wprowadzać zmiany w JavaScript. Czasami jednak podczas wprowadzania zmian w witrynie musisz uzyskać dostęp do innych paneli, takich jak panel Elementy lub panel Konsola. Istnieje sposób na otwarcie panelu Źródła obok innych paneli.

1. Otwórz kartę Elementy.
2. Naciśnij Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS). Otworzy się Menu poleceń.

3. Wpisz QS, a potem kliknij Pokaż Szybkie źródło. U dołu okna Narzędzia dla deweloperów znajduje się teraz karta Szybkie źródło.

   

   Karta wyświetla zawartość pliku index.html, który jest ostatnim plikiem edytowanym w panelu Źródła. Karta Szybkie źródło zawiera edytor z panelu Źródła, dzięki czemu możesz edytować pliki, gdy inne panele są otwarte.

4. Naciśnij Command + P (Mac) lub Control + P (Windows, Linux, ChromeOS), aby otworzyć okno Otwórz plik.

5. Wpisz script, a następnie wybierz devtools-workspace-demo/script.js.

   

6. Zwróć uwagę na link Edit and save files in a workspace w prezentacji. Jest regularnie stylizowany.

7. Dodaj ten kod na dole pliku script.js na karcie Szybkie źródło.

   document.querySelector('a').style = 'font-style:italic';
   

8. Aby zapisać zmiany, naciśnij Command + S (Mac) lub Control + S (Windows, Linux i ChromeOS).

9. Załaduj ponownie stronę. Link na stronie jest teraz kursywą.

Dalsze kroki

Sukces: gratulacje! Teraz już wiesz, jak zapisywać w źródłach zmiany wprowadzone w Narzędziach deweloperskich w witrynie hostowanej lokalnie.

W obszarze roboczym możesz skonfigurować wiele folderów. Wszystkie takie foldery są wymienione w Ustawieniach > Workspace.

Następnie dowiedz się, jak używać Narzędzi dla programistów, aby zmieniać kod CSS i debugować JavaScript.