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.
• Edytuj CSS i JavaScript.
• Utwórz i zapisz fragmenty kodu JavaScriptu, które możesz uruchomić na dowolnej stronie. Fragmenty są podobne do skryptozakładka.
• Debugowanie JavaScript.
• Skonfiguruj obszar roboczy, 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, wykonaj te czynności:

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 wczytane przez stronę, kliknij kartę Strona.

Sposób porządkowania karty Strona:

• Najwyższy poziom, np. top na zrzucie ekranu powyżej, reprezentuje ramkę HTML. Znajdziesz je na każdej stronie, którą otworzysz. top oznacza główną ramkę dokumentu.
• Drugi poziom, np. developers.google.com na zrzucie ekranu powyżej, reprezentuje pochodzenie.
• Trzeci, czwarty poziom itd. reprezentuje katalogi i zasoby wczytane z tego punktu początkowego. 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 podgląd obrazu.

Edytowanie kodu CSS i JavaScript

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

Edytor pomaga też w debugowaniu. 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 zacznie obowiązywać natychmiast.

Aby zastosować zmiany JavaScriptu, naciśnij Command+S (Mac) lub Control+S (Windows, Linux). Narzędzia deweloperskie nie uruchamiają skryptu ponownie, więc jedynymi zmianami w języku JavaScript, które obowiązują, są zmiany wprowadzane w funkcjach. Na przykład zwróć uwagę na to, że interfejs console.log('A') nie działa, 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. Załóżmy, że wielokrotnie wpisujesz w konsoli poniższy kod, aby wstawić bibliotekę jQuery na stronie i 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 we fragmencie kodu i uruchamiać go kilkoma kliknięciami przycisku w dowolnym momencie. Narzędzia deweloperskie zapiszą 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ę swojego fragmentu, a następnie naciśnij 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 Chrome DevTools. Ogólnie chodzi o to, aby ustawić punkt przerwania, czyli celowo wyznaczone miejsce w kodzie, a potem krok po kroku sprawdzać wykonanie 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 i wykonywać inne czynności.

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 umożliwić korzystanie z nowoczesnego debugowania internetowego, Narzędzia deweloperskie wykonuje te czynności:

• Oddziela utworzony i wdrożony kod. Aby ułatwić Ci szybsze znajdowanie kodu, panel Źródła oddziela tworzony przez Ciebie kod od skompilowanego i skompresowanego kodu.
• Ignoruje znany kod innej firmy:
  • Panel Źródła ukrywa takie źródła w drzewie plików na karcie Strona.
  • Konsola ukrywa takie ramki w śladach stosu.
  • Menu Otwórz plik ukrywa takie pliki w wynikach 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 internetowe 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 w systemie plików zmian wprowadzonych w Narzędziach deweloperskich. Dzięki temu możesz używać Narzędzi deweloperskich jako edytora kodu.

Odpowiednie informacje znajdziesz w artykule Edytowanie plików z obszarami roboczymi.