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ł Zaczynamy korzystać z logowania wiadomości. 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.

Omówienie

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 procesów. Gdy będziesz aktywnie uczestniczyć w szkoleniu, ł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ę na tej stronie.

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

    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.

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

    Jak wygląda Konsola 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: odczyt, ocena, wydruk, pętla. 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ą

Czasami potrzebujesz po prostu miejsca, w którym możesz testować kod lub wypróbowywać 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. Aby ocenić wyrażenie, naciśnij Enter. 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);

    Jak Konsola wygląda po ocenie powyższych 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. Aby zapoznać się z debugowaniem JavaScriptu, obejrzyj interaktywny samouczek 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 alias domeny document.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).