Czym jest uruchamiacz JavaScript?

JavaScript to język działający w każdej przeglądarce internetowej, a większość deweloperów testuje jego małe fragmenty, wklejając je do konsoli przeglądarki. Uruchamiacz JavaScript wykonuje to samo zadanie na osobnej stronie. Wpisujesz kilka wierszy kodu, uruchamiasz je i odczytujesz to, co kod wypisuje za pomocą console.log. To szybki sposób na sprawdzenie działania funkcji, przetestowanie pomysłu lub sprawdzenie, co zwraca dana metoda - bez konfigurowania projektu.

Opis narzędzia

To narzędzie uruchamia kod JavaScript w Twojej przeglądarce i wyświetla wszystko, co kod zapisuje w konsoli. Wpisz lub wklej kod po lewej stronie i naciśnij Uruchom albo użyj skrótu Ctrl+Enter (na komputerze Mac: Cmd+Enter). Wynik pojawi się po prawej stronie - po jednym wierszu dla każdego wywołania console, a ostrzeżenia i błędy zostaną oznaczone kolorami. Kod nie zostanie uruchomiony, dopóki o to nie poprosisz, więc możesz go swobodnie edytować.

Kod jest uruchamiany w Web Workerze, czyli wątku działającym w tle przeglądarki. Dzięki temu skrypt, który nigdy się nie kończy, nie zawiesi strony - naciśnij Zatrzymaj, a skrypt zostanie zakończony. Twój kod nie jest wysyłany na serwer.

Przykłady

Wyświetlenie obliczenia i obiektu:

const prices = [4.5, 12, 7.25];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log("Suma:", total);
console.log({ count: prices.length, average: total / prices.length });
JavaScript

Wynik:

Suma: 23.75
{ count: 3, average: 7.916666666666667 }

Oczekiwanie na operację asynchroniczną za pomocą await na najwyższym poziomie:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Początek");
await sleep(1000);
console.log("Po jednej sekundzie");
JavaScript

Funkcje

  • Wyświetla wyniki console.log, info, debug, warn i error, używając kolorów dla ostrzeżeń i błędów
  • Formatuje obiekty, tablice, mapy, zbiory, klasy, daty i błędy oraz obsługuje odwołania cykliczne
  • Obsługuje symbole zastępcze, takie jak %s, %d, %i, %f, %j i %o, w pierwszym argumencie
  • Obsługuje console.group, count, time, assert, dir i clear
  • Uruchamia kod asynchroniczny, w tym await na najwyższym poziomie, timery i promisy
  • Raportuje błędy składni, nieprzechwycone błędy i nieobsłużone odrzucenia promisów w wynikach
  • Przycisk Zatrzymaj natychmiast kończy skrypt, nawet jeśli utknął on w nieskończonej pętli
  • Opcja Zachowaj logi, domyślnie włączona, zachowuje wyniki wcześniejszych uruchomień, aby można było porównywać rezultaty
  • Najedź kursorem na wiersz wyniku, aby zobaczyć datę i godzinę jego zapisania
  • Skopiuj cały wynik, wyczyść go przyciskiem Wyczyść lub pobierz kod jako plik

Jak to działa

Po naciśnięciu przycisku Uruchom narzędzie tworzy nowego Web Workera i wysyła do niego Twój kod. Wewnątrz workera metody console są zastępowane, dzięki czemu każde wywołanie jest konwertowane na tekst i wysyłane z powrotem do strony. Twój kod jest opakowywany w funkcję asynchroniczną, co umożliwia używanie await na najwyższym poziomie.

Pasek stanu pod wynikami pokazuje stan Uruchomiono, gdy kod jest wykonywany lub gdy nadal oczekuje uruchomiony przez Ciebie timer. setInterval podtrzymuje działanie do momentu jego wyczyszczenia albo naciśnięcia przycisku Zatrzymaj. Każde uruchomienie rozpoczyna się w nowym workerze, więc zmienne z wcześniejszego uruchomienia nigdy nie pozostają dostępne. Wyniki są zachowywane pomiędzy uruchomieniami, gdy zaznaczona jest opcja Zachowaj logi. Usuń jej zaznaczenie, aby każde uruchomienie rozpoczynało się z pustymi wynikami, albo w dowolnym momencie naciśnij Wyczyść, aby je usunąć.

Wskazówki

  • Używaj console.log, a nie końcowego wyrażenia: wartość ostatniego wiersza nie jest wyświetlana, więc samo 1 + 2 niczego nie pokaże
  • Worker nie ma strony, dlatego document, window i inne obiekty DOM są niedostępne. Używaj self jako zakresu globalnego
  • Statyczne instrukcje importu nie działają w tego rodzaju kodzie
  • Wyniki przechowują 1000 najnowszych wierszy, a pojedynczy wiersz jest skracany po 10000 znaków
  • Żądania wykonywane za pomocą fetch są wysyłane z Twojej przeglądarki tak jak wszystkie inne i podlegają standardowym regułom cross-origin
  • Uruchamiaj tylko kod, któremu ufasz, tak samo jak w konsoli przeglądarki