Uruchamianie JavaScriptu w konsoli

Kayce Basques

Ten interaktywny samouczek pokazuje, jak uruchamiać kod JavaScript w konsoli Narzędzi deweloperskich Chrome. Aby dowiedzieć się, jak rejestrować komunikaty w Konsoli, przeczytaj artykuł Pierwsze kroki z logowaniem wiadomości. Aby dowiedzieć się, jak wstrzymywać kod JavaScript i przeglądać go wiersz po wierszu, przeczytaj artykuł Pierwsze kroki z debugowaniem kodu JavaScript.

Rysunek 1. Konsola.

Przegląd

Konsola to REPL, czyli Read (czytaj), Evaluate (sprawdzaj), Print (drukuj) i Loop (powtarzaj). Czyta wpisany przez Ciebie kod JavaScript, ocenia go, drukuje wynik wyrażenia i powraca do pierwszego kroku.

Konfigurowanie Narzędzi deweloperskich

Ten samouczek został tak zaprojektowany, aby umożliwić Ci otwarcie wersji demonstracyjnej i samodzielne wypróbowanie wszystkich przepływów pracy. Gdy będziesz śledzić instrukcje, łatwiej będzie Ci później przypomnieć sobie procesy.

1. Naciśnij Command + Option + J (Mac) lub Control + Shift + J (Windows, Linux i ChromeOS), aby otworzyć konsolę, która znajduje się na tej stronie.

   

   Rysunek 2. Po lewej stronie znajduje się ten samouczek, a po prawej – Narzędzia deweloperskie.

Wyświetlanie i zmienianie kodu JavaScript lub DOM strony

Podczas tworzenia lub debugowania strony często warto uruchomić instrukcje w Konsoli, aby zmienić wygląd lub działanie strony.

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

   Witaj, świecie!

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

   

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

   Pod kodem, który został oceniony, zobaczysz "Hello, Console!". Przypomnij sobie 4 etapy metody Repl: read, evaluate, print, loop (czytaj, oceniaj, drukuj, powtarzaj). Po ocenie kodu REPL wypisuje wynik wyrażenia. "Hello, Console!" musi być wynikiem oceny document.getElementById('hello').textContent = 'Hello, Console!'.

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

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

1. W konsoli wpisz 5 + 15. Wynik 20 pojawi się pod wyrażeniem (chyba że jego obliczenie zajmuje zbyt dużo czasu).
2. Naciśnij Enter, aby ocenić wyrażenie. Konsole wypisuje wynik wyrażenia pod kodem. Rysunek 4 poniżej pokazuje, jak powinna wyglądać konsola po wykonaniu tego wyrażenia.

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

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

   Jeśli nie znasz składni b=20, zapoznaj się z artykułem Definiowanie wartości domyślnych argumentów funkcji.

4. Teraz wywołaj zdefiniowaną przez siebie funkcję.

   add(25);
   

   

   Rysunek 4. Jak Konsola wygląda po ocenie podanych powyżej wyrażeń.

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

Dopóki funkcja nie zwróci wyniku, 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 błąd na bieżącej stronie i utratę wszystkich wprowadzonych danych.

Dalsze kroki

Aby dowiedzieć się więcej o funkcjach związanych z uruchamianiem kodu JavaScript w Konsoli, przeczytaj artykuł Uruchamianie kodu JavaScript.

Narzędzie DevTools pozwala wstrzymać skrypt w trakcie jego wykonywania. Podczas pauzy możesz w konsoli wyświetlić i zmienić window lub DOM strony w danym momencie. Dzięki temu debugowanie jest bardziej efektywne. Interaktywny samouczek znajdziesz w artykule Pierwsze kroki z debugowaniem kodu JavaScript.

Konsola obsługuje też zestaw wskaźników formatu. Aby poznać wszystkie metody formatowania i stylizowania wiadomości w Konsoli, przeczytaj artykuł Formatowanie i stylizowanie wiadomości w Konsoli.

Oprócz tego Konsola zawiera też zestaw przydatnych funkcji, które ułatwiają interakcję ze stroną. Na przykład:

• Zamiast wpisywać document.querySelector(), aby wybrać element, możesz wpisać $(). Ta składnia jest inspirowana jQuery, ale nie jest to jQuery. Jest to tylko alias domeny document.querySelector().
• debug(function) 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.