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ą
- Skopiuj to repozytorium demonstracyjne do katalogu na komputerze. Na przykład do:
~/Desktop
. 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
.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.
Konfigurowanie Narzędzi deweloperskich
Otwórz Narzędzia deweloperskie na lokalnej stronie demonstracyjnej.
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 folder i wybierz folder.
W komunikacie u góry kliknij Zezwalaj, 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
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
.
Krok 2. Zapisz zmianę CSS na dysku
Otwórz plik
/devtools-workspace-demo/styles.css
w edytorze tekstu. Zwróć uwagę, że właściwośćcolor
elementówh1
jest ustawiona nafuchsia
.Zamknij edytor tekstu.
W Narzędziach deweloperskich kliknij kartę Elementy.
Zmień wartość właściwości
color
elementu<h1>
na swój ulubiony kolor. Aby to zrobić:- Kliknij element
<h1>
w drzewie DOM. - W panelu Style znajdź regułę CSS
h1 { color: fuchsia }
i zmień kolor na ulubiony. W tym przykładzie kolorem jest zielony.
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
.- Kliknij element
Ponownie otwórz plik
/devtools-workspace-demo/styles.css
w edytorze tekstu. Właściwośćcolor
jest teraz ustawiona na Twój ulubiony kolor.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
- Otwórz kartę Elementy.
Kliknij dwukrotnie tekst
Workspaces Demo
(elementh1
) i zastąp go tekstemI ❤️ Cake
.Otwórz plik
/devtools-workspace-demo/index.html
w edytorze tekstu. Wprowadzone przed chwilą zmiany nie są widoczne.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.
- Kliknij Źródła > Strona.
- Kliknij (indeks). Otworzy się kod HTML strony.
- Zamień
<h1>Workspaces Demo</h1>
na<h1>I ❤️ Cake</h1>
. - Aby zapisać zmianę, naciśnij Command+S (Mac) lub Control+S (Windows, Linux, ChromeOS).
Odśwież stronę. Element
<h1>
nadal wyświetla nowy tekst.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.
- Otwórz kartę Elementy.
- Naciśnij Command+Shift+P (Mac) lub Control+Shift+P (Windows, Linux, ChromeOS). Otworzy się menu poleceń.
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.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.Naciśnij Command+P (Mac) lub Control+P (Windows, Linux, ChromeOS), aby otworzyć okno Otwórz plik.
Wpisz
script
, a następnie wybierz devtools-workspace-demo/script.js.Zwróć uwagę na link
Edit and save files in a workspace
w wersji demonstracyjnej. Ma regularny styl.Dodaj ten kod na dole pliku script.js na karcie Quick Source (Szybkie źródło).
document.querySelector('a').style = 'font-style:italic';
Aby zapisać zmianę, naciśnij Command+S (Mac) lub Control+S (Windows, Linux, ChromeOS).
Odśwież stronę. 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.