Uruchamianie JavaScriptu w konsoli

Kayce Basques
Kayce Basques
X GitHub

Ten interaktywny samouczek pokazuje, jak uruchamiać kod JavaScript w konsoli Narzędzi deweloperskich w Chrome. Więcej informacji o rejestrowaniu komunikatów w konsoli znajdziesz w artykule Zacznij rejestrować komunikaty. Więcej informacji o wstrzymywaniu kodu JavaScript i przechodzeniu przez niego wiersz po wierszu znajdziesz w artykule Rozpoczynanie debugowania kodu JavaScript.

Konsola.

Rysunek 1. Konsola.

Przegląd

Konsola to REPL, czyli Read, Evaluate, Print, and Loop (odczytaj, oceń, wydrukuj i zapętl). Odczytuje on wpisany przez Ciebie kod JavaScript, ocenia go, wyświetla wynik wyrażenia, a następnie wraca do pierwszego kroku.

Konfigurowanie Narzędzi deweloperskich

Ten samouczek został zaprojektowany tak, aby można było otworzyć wersję demonstracyjną i samodzielnie wypróbować wszystkie procesy. Gdy wykonujesz czynności fizycznie, łatwiej zapamiętasz później procesy.

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

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

    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 często przydaje się uruchamianie instrukcji w konsoli, aby zmienić wygląd lub działanie strony.

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

  2. Wpisz document.getElementById('hello').textContent = 'Hello, Console!' w konsoli, a potem naciśnij Enter, aby obliczyć wartość wyrażenia. Zwróć uwagę, jak zmienia się tekst w przycisku.

    Wygląd konsoli po obliczeniu powyższego wyrażenia.

    Rysunek 3. Wygląd konsoli po obliczeniu powyższego wyrażenia.

    Pod ocenionym kodem zobaczysz "Hello, Console!". Przypomnij sobie 4 kroki REPL: odczyt, ocena, wydruk, pętla. Po ocenie kodu REPL wyświetla wynik wyrażenia. W związku z tym "Hello, Console!" musi być wynikiem obliczenia document.getElementById('hello').textContent = 'Hello, Console!'.

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

Czasami potrzebujesz po prostu miejsca, w którym możesz przetestować kod lub wypróbować nowe funkcje JavaScriptu, których nie znasz. Konsola to idealne miejsce na tego rodzaju eksperymenty.

  1. Wpisz 5 + 15 w konsoli. Wynik 20 pojawi się pod wyrażeniem (chyba że obliczenie wyrażenia zajmie zbyt dużo czasu).
  2. Naciśnij Enter, aby obliczyć wartość wyrażenia. Konsola wyświetli wynik wyrażenia pod kodem. Ilustracja 4 poniżej pokazuje, jak powinna wyglądać konsola po obliczeniu tego wyrażenia.

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

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

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

    add(25);

    Wygląd konsoli po obliczeniu wartości powyższych wyrażeń.

    Rysunek 4. Wygląd konsoli po obliczeniu wartości powyższych wyrażeń.

    add(25) daje w wyniku 45, ponieważ gdy funkcja add jest wywoływana bez drugiego argumentu, wartość domyślna argumentu b to 20.

Dopóki funkcja nie zwróci wartości, nie będzie można uruchomić żadnego kodu w tej sesji konsoli. Jeśli trwa to zbyt długo, możesz użyć Menedżera zadań, aby anulować czasochłonne obliczenia. Spowoduje to jednak niepowodzenie bieżącej strony i utratę wszystkich wprowadzonych danych.

Dalsze kroki

Więcej funkcji związanych z uruchamianiem JavaScriptu w konsoli znajdziesz w artykule Uruchamianie JavaScriptu.

Narzędzia deweloperskie umożliwiają wstrzymanie skryptu w trakcie jego wykonywania. Podczas wstrzymania możesz użyć konsoli, aby wyświetlić i zmienić window lub DOM strony w danym momencie. Umożliwia to skuteczne debugowanie. Interaktywny samouczek znajdziesz w artykule Pierwsze kroki z debugowaniem JavaScriptu.

Konsola obsługuje też zestaw specyfikatorów formatu. Więcej informacji o formatowaniu i stylizowaniu wiadomości w konsoli znajdziesz w artykule Formatowanie i stylizowanie wiadomości w konsoli.

Oprócz tego konsola ma też zestaw funkcji ułatwiających interakcję ze stroną. Na przykład:

  • Zamiast wpisywać document.querySelector(), aby wybrać element, możesz wpisać $(). Ta składnia jest inspirowana biblioteką jQuery, ale nie jest nią w rzeczywistości. To tylko alias dla document.querySelector().
  • debug(function) skutecznie ustawia punkt przerwania w pierwszym wierszu tej funkcji.
  • keys(object) zwraca tablicę zawierającą klucze określonego obiektu.

Aby poznać wszystkie funkcje ułatwiające pracę, zapoznaj się z dokumentacją interfejsu Console Utilities API.