Przegląd panelu Źródła

Kayce Basques

Sofia Emelianova

Panel Źródła w Narzędziach deweloperskich w Chrome pozwala:

• Wyświetl pliki
• Edytuj kod CSS i JavaScript.
• Utwórz i zapisz fragmenty kodu JavaScript, które możesz uruchomić na dowolnej stronie. Fragmenty są podobne do skryptozakładek.
• Debugowanie JavaScript.
• Skonfiguruj obszar roboczy, aby zmiany wprowadzane w Narzędziach deweloperskich były zapisywane w kodzie w systemie plików.

Wyświetl pliki

W panelu Strona możesz wyświetlać wszystkie zasoby wczytane przez stronę.

Struktura panelu Strona:

• Element najwyższego poziomu, taki jak top na zrzucie ekranu powyżej, reprezentuje ramkę HTML. top znajdziesz na każdej stronie, którą odwiedzasz. top reprezentuje główną ramkę dokumentu.
• Drugi poziom, np. developers.google.com na zrzucie ekranu powyżej, reprezentuje źródło.
• Trzeci poziom, czwarty poziom itd. reprezentują katalogi i zasoby wczytane 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 w panelu Strona, aby wyświetlić jego zawartość w panelu Edytor. Możesz wyświetlać dowolne typy plików. W przypadku obrazów widoczny jest podgląd obrazu.

Edytowanie arkuszy CSS i JavaScript

Aby edytować kod CSS i JavaScript, skorzystaj z panelu Edytora. Narzędzia deweloperskie aktualizują stronę, aby uruchomić nowy kod.

Edytor pomaga też w debugowaniu. Na przykład narzędzie to podkreśla i wyświetla w tekście podpowiedzi z błędami obok błędów składni i innych problemów, takich jak błędy CSS @import i url() oraz atrybuty HTML href z nieprawidłowymi adresami URL.

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

Aby zastosować zmiany w kodzie JavaScript, naciśnij Command+S (Mac) lub Control+S (Windows, Linux). Narzędzia deweloperskie nie uruchamiają ponownie skryptu, dlatego jedyne zmiany w JavaScripcie, które zaczynają obowiązywać, to zmiany wprowadzone w funkcjach. Zanotuj na przykład, jak nie działa console.log('A'), a console.log('B') – tak.

Gdyby Narzędzia deweloperskie ponownie uruchomiły cały skrypt po wprowadzeniu zmiany, tekst A zostałby zarejestrowany w konsoli.

DevTools usuwa zmiany CSS i JavaScript po ponownym załadowaniu strony. Informacje o tym, jak zapisać zmiany w systemie plików, znajdziesz w artykule Konfigurowanie obszaru roboczego.

Tworzenie, zapisywanie i uruchamianie fragmentów

Fragmenty to skrypty, które możesz uruchomić na dowolnej stronie. Załóżmy, że wielokrotnie wpisujesz ten kod w konsoli, by wstawić na stronie bibliotekę jQuery i umożliwić uruchamianie poleceń jQuery w 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 go zapisać we fragmentie kodu i w każdej chwili uruchomić go kilkoma kliknięciami. DevTools zapisze fragment w Twoim systemie plików. Możesz na przykład sprawdzić fragment, który wstawia na stronie bibliotekę jQuery.

Aby uruchomić fragment kodu:

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

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

Debugowanie JavaScript

Zamiast używać właściwości console.log() do określania, gdzie występuje błąd JavaScriptu, możesz użyć narzędzi do debugowania Narzędzi deweloperskich w Chrome. Ogólna zasada to ustawienie punktu przerwania, czyli celowe miejsce zatrzymania w kodzie, a następnie śledzenie wykonywania kodu krok po kroku.

W trakcie wykonywania kodu możesz m.in. wyświetlać i zmieniać wartości wszystkich zdefiniowanych obecnie właściwości i zmiennych, uruchamiać JavaScript w konsoli oraz wykonywać inne czynności.

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

Skoncentruj się tylko na kodzie

Dzięki narzędziom deweloperskim w Chrome możesz skupić się tylko na swoim kodzie, odfiltrowując szum generowany przez platformy i narzędzia do tworzenia aplikacji, których używasz podczas tworzenia aplikacji internetowych.

Aby zapewnić nowoczesne środowisko debugowania stron internetowych, Narzędzia deweloperskie wykonują następujące działania:

• Rozdziela kod utworzony i wdrożony. Aby ułatwić Ci szybsze znalezienie kodu, panel Źródła oddzieli utworzony przez Ciebie kod od połączonego i zminifikowanego kodu.
• Ignoruje znany kod innej firmy:
  • Panel Źródła ukrywa takie źródła w drzewie plików w panelu Strona.
  • Konsola ukrywa takie ramki w zrzucie stosu.
  • Takie pliki nie są widoczne w wynikach wyszukiwania za pomocą menu Otwórz plik.

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

Więcej informacji:

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

Konfigurowanie obszaru roboczego

Domyślnie zmiany wprowadzone w pliku w panelu Źródła zostaną utracone po ponownym załadowaniu strony. Obszary robocze umożliwiają zapisywanie w systemie plików zmian wprowadzonych w Narzędziach deweloperskich. Pozwala to używać Narzędzi deweloperskich jako edytora kodu.

Więcej informacji znajdziesz w artykule Edytowanie plików za pomocą obszarów roboczych.