Edytowanie i zapisywanie plików w obszarze roboczym

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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.

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.

    strona demonstracyjna hostowana lokalnie otwierana w Chrome.

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. Dodaj folder i wybierz folder. Źródła, a następnie karta Workspace.

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

    Przycisk Zezwól w prośbie.

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.

Karta Workspace zawiera teraz mapowanie plików lokalnych i plików sieciowych.

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.

    Wyświetlanie pliku styles.css w edytorze tekstu.

  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.

    Ustawienie właściwości koloru elementu h1 na zielony.

    Zielona kropka 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. Odśwież. 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

  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.

    Próba zmiany kodu HTML w panelu Elementy w drzewie DOM.

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

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

Opcjonalnie: dlaczego nie działa

  • 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. Odśwież. Załaduj ponownie stronę. Element <h1> nadal wyświetla nowy tekst.

    Zmiana kodu HTML w panelu Źródła.

  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.

    Otwieranie karty Szybkie źródło za pomocą menu poleceń

    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.

    Otwieranie skryptu za pomocą okna Otwórz plik.

  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. Odśwież. Załaduj ponownie stronę. Link na stronie jest teraz kursywą.

Link na stronie jest teraz kursywą.

Dalsze kroki

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.