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ą, korzystając z języka 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:

• Kod źródłowy witryny masz na komputerze.
• Masz lokalny serwer WWW z katalogu z kodem źródłowym, więc witryna jest dostępna pod adresem localhost:8080.
• Masz otwarty w Google Chrome localhost:8080, a kod CSS witryny możesz zmienić za pomocą Narzędzi deweloperskich.

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 nowoczesnej platformy, prawdopodobnie przekształca ona 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ść DevTools obsługuje funkcje zapewniane przez mapy źródłowe przy użyciu różnych platform i narzędzi. 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. Lokalne zastąpienia pozwalają imitować treści internetowe lub nagłówki żądań bez oczekiwania na zmiany w backendzie lub wtedy, gdy chcesz eksperymentować ze zmianami na stronie i przeglądać te zmiany po wczytaniu stron, ale nie chcesz mapować zmian na kod źródłowy strony.

Krok 1. Konfiguracja

Ukończ ten samouczek, aby przećwiczyć pracę z obszarem roboczym.

Konfigurowanie wersji demonstracyjnej

1. Skopiuj to repozytorium demonstracyjne do jakiegoś katalogu na komputerze. Na przykład do: ~/Desktop.

2. Uruchom lokalny serwer WWW w regionie ~/Desktop/devtools-workspace-demo. Poniżej znajdziesz przykładowy kod do uruchomienia 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 przejdź do wersji witryny hostowanej 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 hostowanej lokalnie stronie demonstracyjnej.

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

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

3. W wierszu poleceń u góry kliknij Zezwól, aby przyznać Narzędziom deweloperskim uprawnienia do odczytu i zapisu w katalogu.

   

Na karcie Obszar roboczy obok pozycji index.html, script.js i styles.css jest teraz 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 jest ustawiona na 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 znajdź 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 Style oznacza, że każda wprowadzona zmiana jest mapowana na /devtools-workspace-demo/styles.css.

5. Otwórz plik /devtools-workspace-demo/styles.css ponownie 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ż zmiany zostały zapisane w Narzędziach deweloperskich na dysku. Gdy ponownie załadowałeś stronę, serwer lokalny wyświetlił zmodyfikowaną kopię pliku z dysku.

Krok 3. Zapisz zmianę kodu HTML na dysku

Spróbuj zmienić kod HTML w panelu Elementy

Ostrzeżenie: przepływ pracy, który chcesz wypróbować, nie działa. Próbujesz teraz, 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 o nazwie Workspaces Demo i zastąp ją I ❤️ Cake.

   

3. Otwórz plik /devtools-workspace-demo/index.html w edytorze tekstu. Wprowadzonej właśnie zmiany nie ma.

4. Załaduj ponownie stronę. Przywrócony zostanie pierwotny tytuł strony.

Opcjonalnie: dlaczego to 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 wiesz, dlaczego tak jest, 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 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. Za pomocą właściwości content CSS może też zmieniać DOM.
• Na podstawie modelu DOM przeglądarka określa, jakie treści powinna przedstawiać 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ę.
• Utrudnia to 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ąpiono tekstem <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ę w JavaScripcie na dysku

Panel Źródła to także miejsce, w którym możesz wprowadzać zmiany w kodzie 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, aby otworzyć panel Ź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 następnie wybierz Pokaż szybkie źródło. U dołu okna Narzędzi deweloperskich znajduje się teraz karta Szybkie źródło.

   

   Na tej karcie wyświetli się zawartość pliku index.html, czyli ostatnio edytowanego w panelu Źródła. Karta Szybkie źródło udostępnia edytor z panelu Źródła, dzięki czemu możesz edytować pliki, mając otwarte inne panele.

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. Naciśnij Command+S (Mac) lub Control+S (Windows, Linux, ChromeOS), aby zapisać zmianę.

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

Dalsze kroki

Sukces: gratulacje! Wiesz już, jak zapisywać zmiany wprowadzone w Narzędziach deweloperskich w lokalnej witrynie internetowej w celach źródłowych.

W obszarze roboczym możesz skonfigurować wiele folderów. Wszystkie takie foldery są wymienione w sekcji Ustawienia > Obszar roboczy.

Następnie dowiedz się, jak używać Narzędzi dla programistów do zmiany kodu CSS i debugowania kodu JavaScript.