Przegląd panelu Źródła

Kayce Basques

Sofia Emelianova

W panelu Źródła możesz wyświetlać i edytować zasoby witryny, takie jak arkusze stylów, pliki JavaScript i obrazy.

Omówienie

W panelu Źródła możesz:

• Wyświetl pliki.
• Edytowanie kodu CSS i JavaScriptu
• Utwórz i zapisz fragmenty kodu JavaScriptu, które możesz uruchomić na dowolnej stronie. Krótkie opisy przykładów są podobne do zakładek.
• Debugowanie kodu JavaScript.
• Skonfiguruj Workspace, aby zmiany wprowadzone w Narzędziach deweloperskich były zapisywane w kodzie w systemie plików.

Otwórz panel Źródła

Aby otworzyć panel Źródła:

1. Otwórz Narzędzia deweloperskie.
2. Otwórz menu Polecenia, naciskając:
   • macOS: Command + Shift + P
   • Windows, Linux i ChromeOS: Control + Shift + P.
3. Zacznij pisać sources, wybierz Pokaż panel Źródła i naciśnij Enter.

W prawym górnym rogu kliknij more_vert Więcej opcji > Więcej narzędzi > Źródła.

Wyświetl pliki

Aby wyświetlić wszystkie zasoby załadowane przez stronę, kliknij kartę Strona.

Struktura karty Strona:

• Poziom najwyższy, np. top na powyższym zrzucie ekranu, reprezentuje ramkę HTML. Znajdziesz je na każdej stronie, którą otworzysz.top top reprezentuje główną ramkę dokumentu.
• Drugi poziom, np. developers.google.com na powyższym zrzucie ekranu, reprezentuje źródło.
• Poziomy trzeci, czwarty itd. reprezentują katalogi i zasoby załadowane z tego źródła. Na przykład na zrzucie ekranu powyżej pełna ścieżka do zasobu devsite-googler-button to developers.google.com/_static/19aa27122b/css/devsite-googler-button.

Kliknij plik na karcie Strona, aby wyświetlić jego zawartość na karcie Edytor. Możesz wyświetlać pliki dowolnego typu. W przypadku obrazów zobaczysz ich podgląd.

Edytowanie kodu CSS i JavaScript

Aby edytować kod CSS i JavaScript, kliknij kartę Edytor. Narzędzia deweloperskie zaktualizują stronę, aby uruchomić nowy kod.

Edytor ułatwia też debugowanie. Na przykład podświetla i wyświetla tooltipy błędów w miejscu obok błędów składni i innych problemów, takich jak nieudane instrukcje CSS @import i url() oraz atrybuty HTML href z nieprawidłowymi adresami URL.

Jeśli edytujesz background-color elementu, zmiana zostanie zastosowana natychmiast.

Aby zmiany w JavaScriptie zaczęły obowiązywać, naciśnij Command + S (Mac) lub Control + S (Windows, Linux). Narzędzie DevTools nie uruchamia ponownie skryptu, więc jedyne zmiany w JavaScriptie, które mają wpływ na działanie, to te wprowadzone w funkcjach. Zwróć uwagę, że console.log('A') się nie uruchamia, a console.log('B') działa.

Jeśli po wprowadzeniu zmiany narzędzia DevTools ponownie uruchomiły cały skrypt, tekst A zostałby zapisany w Konsoli.

Gdy ponownie załadujesz stronę, narzędzia programistyczne kasują zmiany w CSS i JavaScript. Aby dowiedzieć się, jak zapisać zmiany w systemie plików, przeczytaj artykuł Konfigurowanie Workspace.

Tworzenie, zapisywanie i uruchamianie fragmentów kodu

Fragmenty to skrypty, które możesz uruchomić na dowolnej stronie. Wyobraź sobie, że wielokrotnie wpisujesz w Konsoli ten kod, aby wstawić na stronę bibliotekę jQuery, dzięki której możesz uruchamiać polecenia jQuery z Konsoli:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Zamiast tego możesz zapisać ten kod w fragmentie kodu i uruchamiać go kilkoma kliknięciami w każdej chwili, gdy go potrzebujesz. Narzędzie DevTools zapisuje fragment kodu w systemie plików. Na przykład możesz sprawdzić fragment kodu, który wstawia na stronę bibliotekę jQuery.

Aby uruchomić rozszerzenie:

• Otwórz plik na karcie Fragmenty kodu i na pasku działań u dołu kliknij Uruchom .
• Otwórz menu poleceń, usuń znak >, wpisz !, wpisz nazwę fragmentu kodu i naciśnij klawisz Enter.

Więcej informacji znajdziesz w artykule Uruchamianie fragmentów kodu z dowolnej strony.

Debugowanie kodu JavaScript

Zamiast używać console.log() do określania, gdzie w kodzie JavaScriptu występuje błąd, użyj narzędzi do debugowania w Narzędziach deweloperskich w Chrome. Ogólna idea polega na ustawieniu punktu przerwania, czyli miejsca w kodzie, w którym program ma się zatrzymać, a następnie przechodzeniu przez kolejne wiersze kodu.

Podczas przeglądania kodu możesz wyświetlać i zmieniać wartości wszystkich zdefiniowanych obecnie właściwości i zmiennych, uruchamiać JavaScript w Konsoli itp.

Zapoznaj się z artykułem Rozpoczęcie debugowania kodu JavaScript, aby poznać podstawy debugowania w Narzędziach deweloperskich.

Skup się tylko na kodzie

Narzędzia deweloperskie w Chrome pozwalają skupić się tylko na tworzonym kodzie, odfiltrowując szum generowany przez frameworki i narzędzia do kompilacji używane podczas tworzenia aplikacji internetowych.

Aby zapewnić Ci nowoczesne debugowanie stron internetowych, DevTools wykonuje te czynności:

• Oddziela kod autorski od wdrożonego. Aby ułatwić szybsze znajdowanie kodu, panel Źródła oddziela tworzony przez Ciebie kod od zapakowanego i skompresowanego kodu.
• Ignoruje znany kod zewnętrzny:
  • Panel Źródła ukrywa takie źródła z drzewa plików na karcie Strona.
  • Konsola ukrywa takie ramki w śladach stosu.
  • Menu Otwórz plik ukrywa takie pliki z wyników wyszukiwania.

Dodatkowo, jeśli jest to obsługiwane przez frameworki, zbiór wywołań w debugerze i zrzuty stosu w Konsoli pokazują pełną historię operacji asynchronicznych.

Aby dowiedzieć się więcej, zapoznaj się z tymi artykułami:

• Nowoczesne debugowanie stron internetowych w Narzędziach deweloperskich w Chrome
• Studium przypadku: lepsze debugowanie Angulara za pomocą Narzędzi deweloperskich

Konfigurowanie Workspace

Domyślnie, gdy edytujesz plik w panelu Źródła, zmiany te są tracone po ponownym załadowaniu strony. Obszary robocze umożliwiają zapisywanie zmian wprowadzonych w Narzędziach deweloperskich w systemie plików. Dzięki temu możesz używać Narzędzi deweloperskich jako edytora kodu.

Aby rozpocząć, przeczytaj artykuł Edycja plików w Google Workspace.