Przegląd panelu Źródła

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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:

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.

Karta 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.

Wyświetlanie pliku na karcie Edytor.

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.

Wbudowana etykietka błędu składni.

Jeśli edytujesz background-color elementu, zmiana zacznie obowiązywać natychmiast.

Edytowanie kodu CSS na karcie Edytor.

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.

Edytowanie kodu JavaScript na karcie Edytor.

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.

Fragment kodu, który wstawia bibliotekę jQuery na stronie.

Aby uruchomić rozszerzenie:

  • Otwórz plik na karcie Fragmenty kodu i na pasku działań u dołu kliknij Uruchom Przycisk 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.

Wstrzymanie w punkcie przerwania.

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:

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:

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.