Uruchamianie JavaScriptu w konsoli

Kayce Basques

Z tego interaktywnego samouczka dowiesz się, jak uruchomić JavaScript w konsoli Narzędzi deweloperskich w Chrome. Informacje o logowaniu wiadomości w konsoli znajdziesz w artykule Pierwsze kroki z komunikatami logowania. Z artykułu Pierwsze kroki z debugowaniem JavaScriptu dowiesz się, jak wstrzymywać kod JavaScript i sprawdzać go po jednym wierszu.

Konsola.

Rysunek 1. Konsola.

Przegląd

Konsola to REPL (Read, Assessment, Print i Loop). Odczytuje wpisany przez Ciebie JavaScript, ocenia kod, wyświetla wynik wyrażenia, a potem wraca do pierwszego kroku.

Skonfiguruj Narzędzia deweloperskie

Z tego samouczka dowiesz się, jak otworzyć wersję demonstracyjną i samodzielnie wypróbować wszystkie przepływy pracy. Gdy będziesz fizycznie ją śledzić, z większym prawdopodobieństwem zapamiętasz cały proces.

  1. Naciśnij Command+Option+J (Mac) lub Control+Shift+J (Windows, Linux, ChromeOS), aby otworzyć konsolę bezpośrednio 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 JavaScriptu lub DOM strony

Podczas tworzenia lub debugowania strony często warto uruchomić instrukcje w konsoli, by 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 i naciśnij Enter, aby ocenić wyrażenie. Zwróć uwagę, jak zmienia się tekst na przycisku.

    Jak konsola wygląda po ocenie powyższego wyrażenia.

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

    Poniżej ocenionego kodu znajduje się pozycja "Hello, Console!". Przypomnij sobie 4 etapy REPL: odczytywanie, ocenę, drukowanie i pętlę. Po sprawdzeniu kodu REPL wyświetla wynik wyrażenia. Zatem "Hello, Console!" musi być wynikiem obliczenia document.getElementById('hello').textContent = 'Hello, Console!'.

Uruchamianie dowolnego JavaScriptu, który nie jest związany ze stroną

Czasem potrzebujesz po prostu placu zabaw, w którym przetestujesz kod lub wypróbujesz nowe funkcje JavaScriptu, których jeszcze nie znasz. Konsola to idealne miejsce do takich eksperymentów.

  1. Wpisz 5 + 15 w konsoli. Wynik 20 pojawi się pod wyrażeniem (chyba że jego ocena trwa zbyt długo).
  2. Naciśnij Enter, aby ocenić wyrażenie. Konsola wyświetli wynik wyrażenia pod kodem. Rysunek 4 poniżej przedstawia, jak powinna wyglądać konsola po ocenie tego wyrażenia.

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

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

    Jeśli nie znasz składni b=20, zobacz definicję domyślnych wartości argumentów funkcji.

  4. Teraz wywołaj zdefiniowaną właśnie funkcję.

    add(25);

    Jak konsola wygląda po ocenie powyższych wyrażeń.

    Rysunek 4. Jak konsola wygląda po ocenie 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 Twoja 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 również błąd bieżącej strony i utratę wszystkich wprowadzonych danych.

Dalsze kroki

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

Narzędzia deweloperskie umożliwiają wstrzymywanie skryptu w trakcie jego wykonywania. Gdy to zrobisz, możesz skorzystać z Konsoli, aby wyświetlić i zmienić wartość window lub DOM strony. Zapewnia to zaawansowane funkcje debugowania. Interaktywny samouczek znajdziesz w artykule Pierwsze kroki z debugowaniem JavaScriptu.

Konsola obsługuje też zestaw specyfikatorów formatu. Więcej informacji o formatowaniu wiadomości i określaniu ich stylu znajdziesz w artykule Formatowanie i styl komunikatów w konsoli.

Konsola ma też zestaw udogodnień, które ułatwiają interakcję ze stroną. Na przykład:

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

Aby poznać wszystkie przydatne funkcje, zapoznaj się z dokumentacją interfejsu Console Utilities API.