Edytowanie i zapisywanie plików w obszarze roboczym

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

W tym samouczku możesz poćwiczyć, konfigurując obszar roboczy, możesz używać go we własnych projektach. Workspace umożliwia zapisywanie zmian wprowadzonych w usłudze Narzędzia deweloperskie do kodu źródłowego zapisanego na komputerze.

Omówienie

Workspace umożliwia zapisanie zmiany wprowadzonej w Narzędziach deweloperskich w lokalnej kopii tego samego pliku Twój komputer. Załóżmy na przykład:

  • Kod źródłowy witryny masz na komputerze.
  • używasz lokalnego serwera WWW z katalogu z kodem źródłowym, dzięki czemu witryna jest dostępna; o localhost:8080.
  • Masz otwarty w Google Chrome adres localhost:8080, a za pomocą Narzędzi deweloperskich używasz CSS.

Gdy obszar roboczy jest włączony, zmiany CSS wprowadzone w Narzędziach deweloperskich są zapisywane w kodzie źródłowym na pulpicie.

Ograniczenia

Jeśli korzystasz z nowoczesnej platformy, prawdopodobnie przekształca ona kod źródłowy z formatu która jest łatwa w utrzymaniu i ma format zoptymalizowany pod kątem jak najszybszego uruchomienia. Obszar roboczy to zwykle są w stanie zmapować zoptymalizowany kod z powrotem do oryginalnego kodu źródłowego przy użyciu źródła .

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 z wybranego obszaru roboczego wystąpią problemy lub gdy aplikacja zacznie działać po konfiguracji niestandardowej rozpocznij wątek na liście adresowej lub zadaj pytanie w Stack Overflow, aby podzielić się swoją wiedzą z resztą społeczności narzędzi deweloperskich.

Powiązana funkcja: lokalne zastąpienia

Zastąpienia lokalne to kolejna funkcja Narzędzi deweloperskich, która jest podobna do obszaru roboczego. Używaj zastąpień lokalnych do imitowania treści internetowych lub nagłówków żądań bez oczekiwania na zmiany w backendzie lub gdy chcesz eksperymentować ze zmianami na stronie i śledzić te zmiany na całej stronie. jest wczytywana, ale mapowanie zmian na kod źródłowy strony nie jest istotne.

Krok 1. Konfiguracja

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

Skonfiguruj wersję demonstracyjną

  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. Oto przykładowy kod uruchamiania SimpleHTTPServer, ale możesz skorzystać z 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 pozostałej części tego samouczka ten katalog będzie nazywany /devtools-workspace-demo.

  3. Otwórz kartę w Google Chrome i przejdź do wersji witryny hostowanej lokalnie. Powinniście być w stanie: użyj adresu URL takiego jak localhost:8000. Dokładny numer portu może być inny.

    Hostowana lokalnie strona demonstracyjna otwarta w Chrome.

Skonfiguruj Narzędzia deweloperskie

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

  2. Przejdź do sekcji Ź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. Dodaj folder i wybierz folder. a następnie na karcie Źródła do obszaru roboczego.

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

    przycisk Zezwalaj w oknie.

Na karcie Obszar roboczy obok pól index.html, script.js i styles.css znajduje się teraz zielona kropka. Te zielone kropki oznaczają, że Narzędzia deweloperskie ustanowiły mapowanie między zasobami sieciowymi strony a plikami w folderze devtools-workspace-demo.

Na karcie Obszar roboczy widać teraz mapowanie plików lokalnych na pliki sieciowe.

Krok 2. Zapisz zmianę w usłudze porównywania cen na dysku

  1. Otwórz plik /devtools-workspace-demo/styles.css w edytorze tekstu. Zwróć uwagę, jak właściwość color elementu h1 elementy mają wartość fuchsia.

    Wyświetlenie pliku style.css w edytorze tekstu.

  2. Zamknij edytor tekstu.

  3. Wróć do Narzędzi deweloperskich i kliknij kartę Elements.

  4. Zmień wartość właściwości color elementu <h1> na 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 kolor jest ustawiony na zielony.

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

    Zielona kropka Zielona kropka obok opcji 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 jest teraz ustawiona na: ulubiony kolor.

  6. Załaduj ponownie. Odśwież stronę. Kolor elementu <h1> jest nadal ustawiony na Twój ulubiony kolor. Działa bo podczas wprowadzania zmiany w Narzędziach deweloperskich została ona zapisana na dysku. Po ponownym załadowaniu strony stronę, serwer lokalny udostępnił zmodyfikowaną kopię pliku z dysku.

Krok 3. Zapisz zmianę w kodzie HTML na dysku

Spróbuj zmienić kod HTML w panelu Elementy

  1. Otwórz kartę Elements.

  2. Kliknij dwukrotnie zawartość tekstową elementu h1 o nazwie Workspaces Demo i ją zastąp dzięki funkcji I ❤️ Cake.

    Próba zmiany kodu HTML z drzewa DOM panelu Elementy.

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

  4. Załaduj ponownie. Odśwież stronę. Przywrócony zostanie pierwotny tytuł strony.

Opcjonalnie: dlaczego to nie działa

  • Drzewo węzłów widoczne w panelu Elements reprezentuje model DOM strony.
  • Aby wyświetlić stronę, przeglądarka pobiera kod HTML przez sieć, analizuje go, a następnie konwertuje w drzewo węzłów DOM.
  • Jeśli strona zawiera kod JavaScript, może on dodawać, usuwać lub zmieniać węzły DOM. Usługa porównywania cen może DOM, za pomocą właściwości content.
  • Na podstawie modelu DOM przeglądarka określa, jakie treści powinna przedstawiać użytkownikom.
  • W związku z tym końcowy stan strony, którą widzą użytkownicy, może znacznie różnić się od kodu HTML przeglądarka została pobrana.
  • Utrudnia to Narzędziom deweloperskim określenie miejsca zmiany wprowadzonej w panelu Elements. należy zapisać, ponieważ na DOM wpływa kod HTML, JavaScript i CSS.

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

Zmiana kodu HTML w panelu Źródła

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

  1. Przejdź do sekcji Źródła > Strona.
  2. Kliknij (indeks). Otworzy się kod HTML strony.
  3. Zamień <h1>Workspaces Demo</h1> na <h1>I ❤️ Cake</h1>.
  4. Naciśnij Command+S (Mac) lub Control+S (Windows, Linux, ChromeOS), aby zapisać zmianę.

  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ę w JavaScripcie na dysku

W panelu Źródła możesz też wprowadzać zmiany w kodzie JavaScript. Czasem jednak trzeba uzyskiwać dostęp do innych paneli, takich jak Elements lub Elements, podczas wprowadzania zmian; do Twojej witryny. Panel Źródła możesz otworzyć obok innych paneli.

  1. Otwórz kartę Elements.
  2. Naciśnij Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS). menu poleceń, zostanie otwarte.

  3. Wpisz QS, a następnie wybierz Pokaż szybkie źródło. Na dole okna Narzędzi deweloperskich znajduje się kartę Szybkie źródło.

    Otwieram kartę Szybkie źródło w menu poleceń.

    Na karcie wyświetla się zawartość pola index.html, który jest ostatnim edytowany przez Ciebie w panelu Źródła. Na karcie Szybkie źródło znajdziesz edytor Źródła, gdzie 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 i 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 prezentacji. Jej styl jest regularny.

  7. Dodaj poniższy kod na końcu 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. 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 są wymienione w sekcji Ustawienia > Obszar roboczy.

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