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 CSS i JavaScript.
• Utwórz i zapisz fragmenty kodu JavaScript, które możesz uruchomić na dowolnej stronie. Fragmenty są podobnie jak skryptozakładki.
• Debugowanie JavaScript.
• Skonfiguruj obszar roboczy, aby zmiany wprowadzone w Narzędziach deweloperskich były zapisywane w kodzie w pliku. systemu.

Wyświetl pliki

W panelu Strona możesz wyświetlać wszystkie zasoby, które zostały wczytane przez stronę.

Sposób organizacji panelu Strona:

• Najwyższy poziom, np. top na zrzucie ekranu powyżej, reprezentuje ramkę HTML. Aplikację top znajdziesz na z każdej odwiedzanej strony. top oznacza główną ramkę dokumentu.
• Drugi poziom, np. developers.google.com na zrzucie ekranu powyżej, reprezentuje pochodzenie.
• Trzeci, czwarty poziom itd. reprezentuje wczytane katalogi i zasoby. z danego źródła. np. na zrzucie ekranu powyżej pełna ścieżka do zasobu Obecny stan „devsite-googler-button”: 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świetlić każdy typ z pliku. W przypadku obrazów zobaczysz podgląd obrazu.

Edytuj CSS i JavaScript

W panelu Edytora możesz edytować pliki CSS i JavaScript. Narzędzia deweloperskie zaktualizują stronę, aby uruchomić nowy kod.

Edytor pomaga też w debugowaniu. Na przykład podkreśla i wyświetla wbudowane etykietki o błędach obok błędów składniowych i innych problemów, takich jak błędy instrukcji CSS @import i url() oraz atrybuty HTML href z nieprawidłowymi adresami URL.

Jeśli zmodyfikujesz background-color elementu, zobaczysz, że zmiana została wprowadzona. natychmiast.

Aby zastosować zmiany w JavaScripcie, 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.

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

Narzędzia deweloperskie usuwają zmiany CSS i JavaScript po ponownym załadowaniu strony. Zobacz Konfigurowanie Workspace, aby dowiedzieć się, jak zapisać zmiany w systemie plików.

Tworzenie, zapisywanie i uruchamianie fragmentów kodu

Fragmenty kodu to skrypty, które możesz uruchomić na dowolnej stronie. Wyobraź sobie, że cały czas wpisuje następujący kod w Konsoli, aby wstawić bibliotekę jQuery na stronie mogą 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 przycisku w dowolnym momencie. Potrzebujemy tych informacji. Narzędzia deweloperskie zapiszą fragment kodu w systemie plików. Przyjrzyj się na przykład fragmentowi który wstawia bibliotekę jQuery na stronie.

Aby uruchomić fragment kodu:

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

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

Debugowanie JavaScript

Zamiast używać metody console.log() do sprawdzania, gdzie występują błędy JavaScript, rozważ użycie metody Narzędzia do debugowania w Narzędziach deweloperskich w Chrome. Ogólnie chodzi o ustawienie punktu przerwania, czyli zamierzone zatrzymanie w kodzie, a następnie wykonanie wielu czynności, po jednym wierszu obecnie się znajdujesz.

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

Zapoznaj się z artykułem Pierwsze kroki z debugowaniem JavaScriptu, 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 samodzielnie tworzonym kodzie, odfiltrowując szum generowany przez platformy i tworząc narzędzia, z których możesz korzystać przy tworzeniu aplikacji internetowych.

Aby umożliwić korzystanie z nowoczesnego debugowania internetowego, Narzędzia deweloperskie wykonuje te czynności:

• Oddziela utworzony i wdrożony kod. Aby umożliwić Ci szybsze znalezienie kodu, panel Źródła oddziela utworzony kod od kodu zawartego w pakiecie i zminifikowanego.
• 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 przed zrzutami stosu.
  • Menu Otwórz plik ukrywa takie pliki w wynikach wyszukiwania.

Dodatkowo, jeśli te platformy obsługują platformy, stos wywołań w debugerze i zrzuty stosu w konsoli prezentują pełną historię operacji asynchronicznych.

Więcej informacji:

• Nowoczesne debugowanie internetowe w Narzędziach deweloperskich w Chrome
• Studium przypadku: lepsze debugowanie Angular dzięki narzędziom deweloperskim

Konfigurowanie Workspace

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

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