Uruchamianie JavaScriptu w konsoli

Kayce Basques

Twitter GitHub Usterka

W tym interaktywnym samouczku pokazujemy, jak uruchamiać JavaScript w konsoli Chrome DevTools. Aby dowiedzieć się, jak rejestrować komunikaty w konsoli, przeczytaj artykuł Pierwsze kroki z wiadomościami Logging. Z sekcji Pierwsze kroki z debugowaniem JavaScriptu dowiesz się, jak wstrzymać kod JavaScript i przechodzić go po kolei (wiersz po wierszu).

Rysunek 1. Konsola.

Opis

Konsola to REPL, czyli skrót od Read, Assess, Print i Loop. Odczytuje ona wpisany przez Ciebie kod JavaScript, ocenia kod, wyświetla wynik wyrażenia i wraca do pierwszego kroku.

Konfigurowanie Narzędzi deweloperskich

Ten samouczek został zaprojektowany tak, aby umożliwić Ci otwarcie wersji demonstracyjnej i wypróbowanie wszystkich przepływów pracy samodzielnie. Jeśli będziesz dalej ćwiczyć, bardziej prawdopodobne jest, że przypomnisz sobie przepływy pracy później.

1. Naciśnij Command+Option+J (Mac) lub Control+Shift+J (Windows, Linux, ChromeOS), aby otworzyć konsolę bezpośrednio na tej stronie.

   

   Rysunek 2. Ten samouczek po lewej stronie, a Narzędzia deweloperskie po prawej.

Wyświetlanie i zmienianie kodu JavaScript lub DOM strony

Podczas tworzenia lub debugowania strony przydaje się często uruchomienie instrukcji w konsoli, aby zmienić wygląd lub działanie strony.

1. Zwróć uwagę na tekst na przycisku poniżej.

   Witaj, świecie!

2. Wpisz document.getElementById('hello').textContent = 'Hello, Console!' w konsoli i naciśnij Enter, aby ocenić wyrażenie. Zwróć uwagę, jak zmienia się tekst na przycisku.

   

   Rysunek 3. Jak wygląda konsola po ocenie wyrażenia powyżej.

   Pod ocenionym przez Ciebie kodem widoczna jest informacja "Hello, Console!". Wywołaj 4 kroki REPL: czytanie, ocenianie, drukowanie i pętla. Po obliczeniu kodu polecenie REPL wyświetla wynik wyrażenia. Zatem "Hello, Console!" musi być wynikiem oceny document.getElementById('hello').textContent = 'Hello, Console!'.

Uruchamiać dowolny kod JavaScript, który nie jest związany ze stroną

Czasami potrzebujesz po prostu platformy do kodowania, w której przetestujesz fragment kodu lub wypróbujesz nowe funkcje JavaScriptu, których nie znasz. Konsola jest idealnym miejscem do tego typu eksperymentów.

1. Wpisz 5 + 15 w konsoli. Wynik 20 pojawi się pod wyrażeniem (chyba że ocena wyrażenia zajmuje za dużo czasu).
2. Aby sprawdzić wyrażenie, naciśnij Enter. Konsola wyświetli wynik wyrażenia pod kodem. Rysunek 4 poniżej pokazuje, jak powinna wyglądać konsola po ocenie tego wyrażenia.

3. Wpisz ten kod w konsoli. Zamiast kopiować i wklejać, spróbuj go wpisać znak po znaku.

   function add(a, b=20) {
     return a + b;
   }
   

   Jeśli nie znasz składni b=20, przeczytaj artykuł o definiowaniu wartości domyślnych argumentów funkcji.

4. Teraz wywołaj zdefiniowaną przed chwilą funkcję.

   add(25);
   

   

   Rysunek 4. Jak konsola wygląda po sprawdzeniu powyższych wyrażeń.

   add(25) zwraca wartość 45, ponieważ gdy funkcja add jest wywoływana bez drugiego argumentu, b przyjmuje domyślnie wartość 20.

Dopóki funkcja nie zostanie zwrócona, nie będziesz mieć możliwości uruchamiania żadnego kodu w tej sesji konsoli. Jeśli trwa to zbyt długo, możesz anulować czasochłonne obliczenia w Menedżerze zadań. Spowoduje to jednak błąd bieżącej strony i utratę wszystkich wpisanych danych.

Dalsze kroki

Zobacz Uruchamianie JavaScript, aby poznać więcej funkcji związanych z uruchamianiem JavaScriptu w konsoli.

Narzędzia deweloperskie umożliwiają wstrzymywanie działania skryptu w trakcie jego wykonywania. Gdy Twoje urządzenie jest wstrzymane, możesz w dowolnym momencie wyświetlić i zmienić window lub DOM strony w konsoli. Ułatwia to debugowanie. Interaktywny samouczek znajdziesz w sekcji Pierwsze kroki z debugowaniem JavaScriptu.

Konsola obsługuje też zestaw specyfikatorów formatu. Aby poznać wszystkie metody formatowania i stylizowania wiadomości w konsoli, zobacz Formatowanie wiadomości w konsoli.

Poza tym Konsola oferuje również szereg dodatkowych funkcji, które ułatwiają korzystanie ze strony. Na przykład:

• Zamiast wpisywać document.querySelector(), aby wybrać element, możesz wpisać $(). Ta składnia jest zainspirowana językiem jQuery, ale tak naprawdę nie jest to jQuery. To po prostu alias dla document.querySelector().
• debug(function) efektywnie ustawia punkt przerwania w pierwszym wierszu tej funkcji.
• keys(object) zwraca tablicę zawierającą klucze wskazanego obiektu.

Zobacz dokumentację interfejsu Console Utilities API, aby poznać wszystkie wygodne funkcje.