JavaScript
Debugowanie

Punkty przerwania

Punkty przerwania wstrzymują program, gdy wykonanie osiągnie określony punkt. Następnie możesz przechodzić przez program wiersz po wierszu, obserwując jego wykonanie i sprawdzając zawartość swoich zmiennych.

Istnieją trzy sposoby tworzenia punktów przerwania.

1. Z kodu za pomocą debugger; komunikat.
2. Z przeglądarki za pomocą Narzędzi dla programistów.
3. Ze zintegrowanego środowiska programistycznego (IDE).

Oświadczenie debugera

Możesz umieścić debugger; instrukcja w dowolnym miejscu w kodzie JavaScript. Gdy interpreter JS dojdzie do tego wiersza, zatrzyma wykonywanie skryptu, umożliwiając sprawdzenie zmiennych i przejście przez kod.

Narzędzia deweloperskie

Drugą opcją jest dodanie punktu przerwania bezpośrednio do kodu z Narzędzi programistycznych przeglądarki.

Otwieranie narzędzi programistycznych

Chrome lub Firefox

1. Naciśnij klawisz F12, aby otworzyć Narzędzia programistyczne
2. Przejdź na kartę Źródła (Chrome) lub kartę Debugger (Firefox)
3. Naciśnij Ctrl + P i wpisz nazwę pliku JavaScript
4. Naciśnij Enter, aby go otworzyć.

Internet Explorer lub Edge

1. Naciśnij klawisz F12, aby otworzyć Narzędzia programistyczne
2. Przejdź do zakładki Debugger.
3. Użyj ikony folderu w lewym górnym rogu okna, aby otworzyć okienko wyboru plików; możesz tam znaleźć swój plik JavaScript.

Safari

1. Naciśnij Command + Opcja + C, aby otworzyć Narzędzia programistyczne
2. Przejdź na kartę Zasoby
3. Otwórz folder „Skrypty” w panelu po lewej stronie
4. Wybierz plik JavaScript.

Dodanie punktu przerwania z Narzędzi dla programistów

Po otwarciu pliku JavaScript w Narzędziach programisty możesz kliknąć numer linii, aby umieścić punkt przerwania. Następnym razem twój program się tam zatrzyma.

Uwaga na temat zminimalizowanych źródeł: jeśli twoje źródło jest zminimalizowane, możesz dość go wydrukować (przekonwertować na format czytelny). W Chrome można to zrobić, klikając przycisk {} w prawym dolnym rogu przeglądarki kodu źródłowego.

IDE

Visual Studio Code (VSC)

VSC ma wbudowaną obsługę debugowania JavaScript.

1. Kliknij przycisk Debuguj po lewej stronie lub Ctrl + Shift + D
2. Jeśli nie zostało to jeszcze zrobione, utwórz plik konfiguracji uruchamiania ( launch.json ), naciskając ikonę koła zębatego.
3. Uruchom kod z VSC, naciskając zielony przycisk odtwarzania lub naciśnij F5 .

Dodanie punktu przerwania w VSC

Kliknij obok numeru wiersza w pliku źródłowym JavaScript, aby dodać punkt przerwania (zostanie on oznaczony na czerwono). Aby usunąć punkt przerwania, kliknij ponownie czerwone kółko.

Wskazówka: Możesz także wykorzystać warunkowe punkty przerwania w narzędziach programistycznych przeglądarki. Pomagają w pomijaniu niepotrzebnych przerw w wykonywaniu. Przykładowy scenariusz: chcesz zbadać zmiennej w pętli dokładnie na 5 ^th iteracji.

Przechodzenie przez kod

Po wstrzymaniu wykonywania w punkcie przerwania możesz śledzić wykonywanie wiersza po wierszu, aby obserwować, co się stanie. Otwórz Narzędzia programistyczne przeglądarki i poszukaj ikon Kontroli wykonania. (W tym przykładzie zastosowano ikony w Google Chrome, ale będą one podobne w innych przeglądarkach).

Wznów: anuluj wykonywanie. Shorcut: F8 (Chrome, Firefox)

Step Over: Uruchom następny wiersz kodu. Jeśli ten wiersz zawiera wywołanie funkcji, uruchom całą funkcję i przejdź do następnego wiersza zamiast przeskakiwać tam, gdzie funkcja jest zdefiniowana. Skrót: F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Krok w: Uruchom następny wiersz kodu. Jeśli linia zawiera wywołanie funkcji, wskocz do funkcji i wstrzymaj ją. Skrót: F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

Step Out: Uruchom resztę bieżącej funkcji, wróć do miejsca, z którego funkcja została wywołana, i zatrzymaj się przy następnej instrukcji. Skrót: Shift + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

Używaj ich w połączeniu ze stosem wywołań , który powie ci, w której funkcji aktualnie się znajdujesz, która funkcja nazywa się tą funkcją i tak dalej.

Aby uzyskać więcej informacji i porad, zobacz przewodnik Google „Jak przejść przez kod” .

Linki do dokumentacji klawiszy skrótu przeglądarki:

• Chrom
• Firefox
• TO ZNACZY
• Krawędź
• Safari

Automatyczne wstrzymywanie wykonania

W przeglądarce Google Chrome możesz wstrzymać wykonywanie bez konieczności umieszczania punktów przerwania.

Wstrzymaj przy wyjątku: gdy ten przycisk jest włączony, jeśli twój program napotka nieobsługiwany wyjątek, program zatrzyma się, jakby osiągnął punkt przerwania. Przycisk znajduje się w pobliżu Kontroli wykonania i jest przydatny do lokalizowania błędów.

Można również wstrzymać wykonywanie, gdy znacznik HTML (węzeł DOM) zostanie zmodyfikowany lub gdy zostaną zmienione jego atrybuty. Aby to zrobić, kliknij prawym przyciskiem myszy węzeł DOM na karcie Elementy i wybierz opcję „Przerwij ...”.

Interaktywne zmienne interpretera

Pamiętaj, że działają one tylko w narzędziach programistycznych niektórych przeglądarek.

$_ daje wartość dowolnego wyrażenia, które zostało ocenione jako ostatnie.

"foo"             // "foo"
$_                // "foo"

$0 odnosi się do elementu DOM aktualnie wybranego w Inspektorze. Jeśli więc <div id="foo"> jest podświetlone:

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 odnosi się do wcześniej wybranego elementu, $2 do wybranego wcześniej i tak dalej za $3 $4 i $4 .

Aby uzyskać kolekcję elementów pasujących do selektora CSS, użyj $$(selector) . Jest to zasadniczo skrót do document.querySelectorAll .

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{alias do document.getElementById lub document.querySelector}

Inspektor elementów

Kliknięcie Wybierz element na stronie, aby go sprawdzić przycisk w lewym górnym rogu karty Elementy w przeglądarce Chrome lub Inspector w przeglądarce Firefox, dostępny w Narzędziach programisty, a następnie kliknięcie elementu strony podświetla element i przypisuje go do $0 zmienna .

Inspektora elementów można używać na różne sposoby, na przykład:

1. Możesz sprawdzić, czy JS manipuluje DOM w sposób, w jaki się spodziewasz,
2. Możesz łatwiej debugować swój CSS, sprawdzając, które reguły wpływają na element
   ( Karta Style w Chrome)
3. Możesz bawić się CSS i HTML bez ponownego ładowania strony.

Ponadto Chrome zapamiętuje 5 ostatnich wyborów na karcie Elementy. $0 to bieżący wybór, a $1 to poprzedni wybór. Możesz przejść do $4 . W ten sposób możesz łatwo debugować wiele węzłów bez ciągłego przełączania do nich wyboru.

Możesz przeczytać więcej na Google Developers .

Używanie ustawiających i pobierających, aby znaleźć to, co zmieniło właściwość

Powiedzmy, że masz taki obiekt:

var myObject = {
    name: 'Peter'
}

Później w kodzie próbujesz uzyskać dostęp do myObject.name i dostajesz George zamiast Petera . Zaczynasz się zastanawiać, kto to zmienił i gdzie dokładnie został zmieniony. Istnieje sposób na umieszczenie debugger (lub czegoś innego) na każdym zestawie (za każdym razem, gdy ktoś robi myObject.name = 'something' ):

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

Zauważ, że zmieniliśmy name na _name i zdefiniujemy ustawiającego i pobierającego dla name .

set name to ustawiający. To miłe miejsce, w którym możesz umieścić debugger , console.trace() lub cokolwiek innego, czego potrzebujesz do debugowania. Seter ustawi wartość dla name w _name . Getter (część get name ) odczyta stamtąd wartość. Teraz mamy w pełni funkcjonalny obiekt z funkcją debugowania.

Jednak przez większość czasu obiekt, który się zmienia, nie jest pod naszą kontrolą. Na szczęście możemy zdefiniować obiekty ustawiające i pobierające na istniejących obiektach w celu ich debugowania.

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

Sprawdź ustawiające i pobierające w MDN, aby uzyskać więcej informacji.

Obsługa przeglądarek dla ustawiających / pobierających:

Przerwa po wywołaniu funkcji

W przypadku nazwanych (nieanonimowych) funkcji można przerwać, gdy funkcja jest wykonywana.

debug(functionName);

Przy następnym uruchomieniu functionName functionName debugger zatrzyma się w pierwszym wierszu.

Korzystanie z konsoli

W wielu środowiskach masz dostęp do globalnego obiektu console który zawiera podstawowe metody komunikacji ze standardowymi urządzeniami wyjściowymi. Najczęściej będzie to konsola JavaScript przeglądarki (więcej informacji można znaleźć w Chrome , Firefox , Safari i Edge ).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

Możesz użyć różnych metod konsoli, aby wyróżnić swoje wyniki na różne sposoby. Inne metody są również przydatne do bardziej zaawansowanego debugowania.

Więcej dokumentacji, informacji na temat zgodności i instrukcji otwierania konsoli przeglądarki znajduje się w temacie Konsola .

Uwaga: jeśli potrzebujesz obsługi IE9, usuń console.log lub zawiń jego wywołania w następujący sposób, ponieważ console jest niezdefiniowana do momentu otwarcia Narzędzi programisty:

if (console) { //IE9 workaround
    console.log("test");
}