Przegląd panelu Źródła

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Użyj panelu Źródła, aby wyświetlić i edytować zasoby witryny, takie jak arkusze stylów, pliki JavaScript i obrazy.

Przegląd

Panel Źródła umożliwia:

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 poleceń, naciskając:
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Ctrl+Shift+P
  3. Zacznij pisać sources, wybierz Pokaż panel Źródła i naciśnij Enter.

Możesz też w prawym górnym rogu kliknąć more_vert Więcej opcji > Więcej narzędzi > Źródła.

Wyświetl pliki

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

Karta Strona.

Struktura karty Strona:

  • Najwyższy poziom, np. top na zrzucie ekranu powyżej, reprezentuje ramkę HTML. Symbol top znajdziesz na każdej odwiedzanej stronie. top reprezentuje główną ramkę dokumentu.
  • Drugi poziom, np. developers.google.com na powyższym zrzucie ekranu, reprezentuje źródło.
  • Trzeci poziom, czwarty poziom itd. reprezentują katalogi i zasoby, które zostały 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.

Wyświetlanie pliku na karcie Edytor.

Edytowanie 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 podkreśla i wyświetla dymki z błędami w pobliżu 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.

Etykietka błędu składni w tekście.

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

Edytowanie kodu CSS na karcie Edytor.

Aby zmiany w JavaScript weszły w życie, naciśnij Command+S (Mac) lub Control+S (Windows, Linux). Narzędzia deweloperskie nie uruchamiają ponownie skryptu, więc jedyne zmiany w JavaScript, które są wprowadzane, to te, które wprowadzasz w funkcjach. Zwróć uwagę, że na przykład 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 deweloperskie ponownie uruchomiły cały skrypt, tekst A zostałby zarejestrowany w Konsoli.

Gdy ponownie załadujesz stronę, Narzędzia deweloperskie usuną zmiany w CSS i JavaScript. Więcej informacji o zapisywaniu zmian w systemie plików znajdziesz w artykule Konfigurowanie obszaru roboczego.

Tworzenie, zapisywanie i uruchamianie fragmentów kodu

Fragmenty kodu to skrypty, które możesz uruchamiać na dowolnej stronie. Załóżmy, że wielokrotnie wpisujesz w konsoli ten kod, aby wstawić do strony bibliotekę jQuery i móc 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 uruchomić go kilkoma kliknięciami w dowolnym momencie. Narzędzia deweloperskie zapiszą fragment kodu w systemie plików. Na przykład sprawdź fragment kodu, który wstawia bibliotekę jQuery na stronę.

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

Aby uruchomić fragment kodu:

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

Więcej informacji znajdziesz w artykule Uruchamianie fragmentów kodu na dowolnej stronie.

Debugowanie JavaScriptu

Zamiast używać console.log() do wnioskowania, gdzie w kodzie JavaScript występuje błąd, użyj narzędzi do debugowania w Narzędziach deweloperskich w Chrome. Ogólnie chodzi o ustawienie punktu przerwania, czyli miejsca, w którym kod ma się zatrzymać, a potem przechodzenie przez kod wiersz po wierszu.

Wstrzymanie w punkcie przerwania.

Podczas przechodzenia przez kod możesz wyświetlać i zmieniać wartości wszystkich aktualnie zdefiniowanych właściwości i zmiennych, uruchamiać JavaScript w konsoli i wykonywać inne czynności.

Podstawowe informacje o debugowaniu w Narzędziach deweloperskich znajdziesz w artykule Rozpoczynanie debugowania JavaScriptu.

Skup się tylko na kodzie

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

Aby zapewnić Ci nowoczesne narzędzia do debugowania stron internetowych, Narzędzia deweloperskie wykonują te czynności:

Dodatkowo, jeśli jest to obsługiwane przez platformy, stos wywołań w debuggerze i zrzuty stosu w konsoli pokazują pełną historię operacji asynchronicznych.

Więcej informacji znajdziesz w tych artykułach:

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ąć, zapoznaj się z artykułem Edytowanie plików w obszarach roboczych.