Edytowanie i zapisywanie plików w obszarze roboczym

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Ten samouczek umożliwia przećwiczenie konfiguracji obszaru roboczego, tak aby można było go używać we własnych projektach. Workspace umożliwia zapisywanie zmian dokonanych za pomocą Narzędzi deweloperskich w kodzie źródłowym przechowywanym na komputerze.

Przegląd

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

  • Kod źródłowy witryny masz na komputerze.
  • Korzystasz z lokalnego serwera WWW z katalogu z kodem źródłowym, więc witryna jest dostępna pod adresem localhost:8080.
  • Masz otwarty plik localhost:8080 w Google Chrome i używasz Narzędzi deweloperskich do zmiany kodu CSS witryny.

Po włączeniu obszaru roboczego zmiany CSS wprowadzone w Narzędziach deweloperskich są zapisywane w kodzie źródłowym na komputerze.

Ograniczenia

Jeśli używasz nowoczesnej platformy, prawdopodobnie przekształci ona Twój kod źródłowy z formatu łatwego w utrzymaniu w format, który jest zoptymalizowany do jak najszybszego działania. Obszar roboczy zazwyczaj jest w stanie zmapować zoptymalizowany kod z powrotem na pierwotny kod źródłowy za pomocą map źródłowych.

Społeczność DevTools wykorzystuje możliwości zapewniane przez mapy źródeł wykorzystujące różne platformy i narzędzia. Jeśli podczas korzystania z wybranej platformy pojawią się problemy lub gdy osiągniesz niestandardową konfigurację, rozpocznij wątek na liście adresowej lub zadaj pytanie na stronie Stack Overflow, aby podzielić się swoją wiedzą z resztą społeczności DevTools.

Powiązana funkcja: lokalne zastąpienia

Lokalne zastąpienia to inna funkcja Narzędzi deweloperskich, która jest podobna do obszaru roboczego. Lokalne zastąpienia pozwalają na pozorowanie treści internetowych lub nagłówków żądań bez oczekiwania na zmiany w backendzie lub gdy chcesz eksperymentować ze zmianami na stronie i chcesz zobaczyć te zmiany po wczytaniu stron, ale nie zależy Ci na mapowaniu zmian na kod źródłowy strony.

Krok 1. Konfiguracja

Ukończ ten samouczek, aby zdobyć praktyczne doświadczenie w korzystaniu z obszaru roboczego.

Skonfiguruj wersję demonstracyjną

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

  2. Uruchom lokalny serwer WWW w: ~/Desktop/devtools-workspace-demo. Poniżej znajdziesz przykładowy kod, który pomoże Ci uruchomić SimpleHTTPServer, ale możesz wybrać dowolny serwer.

    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 lokalną wersję strony. Powinna być dostępna pod adresem URL takim jak localhost:8000. Dokładny numer portu może być inny.

    Lokalnie hostowana strona demonstracyjna została otwarta w Chrome.

Konfigurowanie Narzędzi deweloperskich

  1. Otwórz Narzędzia deweloperskie na lokalnej 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 do Edytora w sekcji Źródła.
    • Kliknij link wybierz folder i wybierz folder.
    • Kliknij Dodaj. Dodaj folder i wybierz folder. Otwórz kartę Źródła i przejdź na kartę Obszar roboczy.

  3. W komunikacie u góry kliknij Zezwalaj, aby przyznać Narzędziom deweloperskim uprawnienia do odczytu i zapisu w katalogu.

    przycisk Zezwalaj w prompcie.

Na karcie Obszar roboczy obok pozycji index.html, script.js i styles.css widać teraz zielona kropka. Te zielone kropki oznaczają, że Narzędzia deweloperskie stworzyły mapowanie między zasobami sieciowymi strony a plikami w pliku devtools-workspace-demo.

Karta Obszar roboczy pokazuje teraz mapowanie między plikami lokalnymi i sieciowymi.

Krok 2. Zapisz zmianę 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.

    Wyświetlając plik style.css w edytorze tekstu.

  2. Zamknij edytor tekstu.

  3. W Narzędziach deweloperskich kliknij kartę Elementy.

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

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

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

    Zielona kropka Zielona kropka. obok elementu styles.css:1 w panelu Style oznacza, że wszystkie wprowadzone przez Ciebie zmiany są zmapowane na /devtools-workspace-demo/styles.css.

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

  6. Załaduj ponownie. Odśwież stronę. Kolor elementu <h1> nadal jest ustawiony na Twój ulubiony kolor. Jest to możliwe, ponieważ po wprowadzeniu zmiany w Narzędziach deweloperskich zostanie ona zapisana na dysku. Po ponownym załadowaniu strony serwer lokalny udostępnił zmodyfikowaną kopię pliku z dysku.

Krok 3. Zapisz zmianę kodu HTML na dysku

Spróbuj zmienić kod HTML z poziomu panelu Elementy

  1. Otwórz kartę Elementy.

  2. Kliknij dwukrotnie tekst Workspaces Demo (element h1) i zastąp go tekstem I ❤️ Cake.

    Próbuję zmienić kod HTML z poziomu drzewa DOM w panelu Elementy.

  3. Otwórz plik /devtools-workspace-demo/index.html w edytorze tekstu. Wprowadzone przed chwilą zmiany nie są widoczne.

  4. Załaduj ponownie. Odśwież stronę. Zostanie przywrócony oryginalny tytuł strony.

Opcjonalnie: dlaczego to nie działa

  • Drzewo węzłów widoczne w panelu Elementy reprezentuje model DOM strony.
  • Aby wyświetlić stronę, przeglądarka pobiera kod HTML przez sieć, analizuje go, a potem przekształca w drzewo węzłów DOM.
  • Jeśli strona zawiera dowolny 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 korzysta z DOM, aby określić, jakie treści powinna wyświetlić użytkownikom.
  • Dlatego końcowy stan strony, którą 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 model DOM wpływa kod HTML, JavaScript i CSS.

Krótko mówiąc, jest to kod HTML drzewa DOM !==.

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. Zamień <h1>Workspaces Demo</h1> na <h1>I ❤️ Cake</h1>.
  4. Aby zapisać zmianę, naciśnij Command+S (Mac) lub Control+S (Windows, Linux, ChromeOS).

  5. Załaduj ponownie. Odśwież 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ż wprowadzić zmiany w kodzie JavaScript. Czasami podczas wprowadzania zmian w witrynie musisz jednak uzyskać dostęp do innych paneli, takich jak panel Elementy lub panel Konsola. Panel Źródła można otworzyć razem z innymi panelami.

  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. W dolnej części okna Narzędzi deweloperskich znajduje się teraz karta Szybkie źródło.

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

    Na karcie jest wyświetlana zawartość pliku index.html, czyli ostatniego pliku edytowanego w panelu Źródła. Karta Szybkie źródło zawiera edytor z panelu Źródła, dzięki czemu możesz edytować pliki, mając jednocześnie 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.

    Otwieranie skryptu w oknie Otwórz plik.

  6. Zwróć uwagę na link Edit and save files in a workspace w wersji demonstracyjnej. Ma regularny styl.

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

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

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

  9. Załaduj ponownie. Odśwież stronę. Link na stronie jest teraz zapisany kursywą.

Link na stronie jest teraz zapisany kursywą.

Dalsze kroki

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

Następnie dowiedz się, jak za pomocą Narzędzi deweloperskich zmieniać kod CSS i debugować kod JavaScript.