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
todevelopers.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:
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.