Uruchamianie JavaScriptu w konsoli

Kayce Basques

Ten interaktywny samouczek pokazuje, jak uruchamiać kod JavaScript w konsoli Narzędzi deweloperskich Chrome. Informacje o logowaniu wiadomości w konsoli znajdziesz w artykule Pierwsze kroki z komunikatami logowania. Aby dowiedzieć się, jak wstrzymywać kod JavaScript i przechodzić po nim wiersz po wierszu, przeczytaj artykuł Pierwsze kroki z debugowaniem kodu JavaScript.

Konsola.

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, a potem wraca 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 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.

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

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

Wyświetlanie i zmienianie kodu JavaScript lub modelu 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.

  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.

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

    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 (odczytaj), evaluate (sprawdź), print (wydrukuj), loop (powtórzenie). Po ocenie kodu interpreter 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ą

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 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. Aby ocenić wyrażenie, naciśnij Enter. Konsole wypisuje 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, zapoznaj się z artykułem Definiowanie wartości domyślnych argumentów funkcji.

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

    add(25);

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

    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 JavaScriptu.

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 aliasdocument.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 dokumentem Console Utilities API Reference (w języku angielskim).