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.
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.
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 JavaScriptu lub DOM strony
Podczas tworzenia lub debugowania strony często warto uruchomić instrukcje w konsoli, by zmienić wygląd lub działanie strony.
Zwróć uwagę na tekst na przycisku poniżej.
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 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 obliczeniadocument.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.
- Wpisz
5 + 15
w konsoli. Wynik20
pojawi się pod wyrażeniem (chyba że jego ocena trwa zbyt długo). - 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. 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.Teraz wywołaj zdefiniowaną właśnie funkcję.
add(25);
Rysunek 4. Jak konsola wygląda po ocenie powyższych wyrażeń.
add(25)
zwraca wartość45
, ponieważ gdy funkcjaadd
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 dladocument.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.