Uruchamianie JavaScriptu w konsoli

Kayce Basques

Z tego interaktywnego samouczka dowiesz się, jak uruchomić JavaScript w konsoli Narzędzi deweloperskich w Chrome. Zobacz Rozpocznij korzystanie z komunikatów logowania, aby dowiedzieć się, jak rejestrować wiadomości w konsoli. Patrz: Pierwsze kroki Z debugowaniem JavaScript dowiesz się, jak wstrzymywać kod JavaScript i przechodzić przez niego w jednym wierszu na stronie za jednym razem.

Rysunek 1. Konsola.

Omówienie

Konsola to REPL (Read, Assessment, Print i Loop). Odczytuje wpisywany w nim JavaScript, ocenia kod, wyświetla wynik wyrażenie, a następnie 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. Kiedy czynności, z którymi będziesz fizycznie podążać, ułatwi Ci później ich zapamiętanie.

1. Naciśnij Command+Option+J (Mac) lub Control+Shift+J (Windows, Linux, ChromeOS), aby otworzyć Konsola, 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 przydaje się uruchamianie instrukcji w Konsoli w celu , aby zmienić wygląd lub sposób działania strony.

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

   Witaj świecie!

2. Wpisz document.getElementById('hello').textContent = 'Hello, Console!' w Konsoli i a następnie 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: „przeczytaj”, ocenianie, drukowanie, zapętlenie. 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 tylko placu zabaw z kodem, w którym możesz przetestować jakiś kod lub wypróbować nowy JavaScript funkcji, których 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 ocena wyrażenia zajmuje zbyt dużo czasu).
2. Naciśnij Enter, aby ocenić wyrażenie. Konsola wyświetli obraz. wynikiem wyrażenia znajdującego się pod kodem. Rysunek 4 poniżej przedstawia, jak konsola powinna na podstawie oceny tego wyrażenia.

3. Wpisz ten kod w konsoli. Spróbuj pisać ją po kolei znak po znaku, niż kopiowanie i wklejanie.

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

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

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

   add(25);
   

   

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

   Parametr add(25) przyjmuje wartość 45, ponieważ gdy funkcja add jest wywoływana bez drugiego argumentu, b przyjmuje wartość domyślną 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 w Menedżerze zadań anulować czasochłonne obliczenia. Spowoduje to jednak również zablokowanie 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. Po wstrzymaniu funkcji możesz: Konsola, aby w danym momencie wyświetlić i zmienić ustawienia window lub DOM strony. Dzięki temu do zaawansowanego debugowania. Zapoznaj się z interaktywnym opisem w artykule Pierwsze kroki z debugowaniem JavaScriptu. aplikacji Google Web Designer.

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ć $(). Ten jest inspirowana jQuery, ale 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.