Plac zabaw dla kodu
Online plac zabaw HTML, CSS i JavaScript z podglądem na żywo, edytorem z numerami linii i przechwyconą konsolą. Testuj fragmenty natychmiast i pobierz wynik jako jeden plik HTML - w całości w przeglądarce.
Czym jest plac zabaw dla kodu?
Plac zabaw dla kodu to piaskownica, w której piszesz HTML, CSS i JavaScript i od razu widzisz wyrenderowany wynik. Ten dodaje przechwyconą konsolę, edytory z numerami linii i możliwość pobrania pracy jako jednego pliku HTML.
Jak działa podgląd na żywo?
Trzy panele kodu są łączone w kompletny dokument HTML i renderowane w izolowanym iframe. Przy włączonym auto uruchamianiu podgląd odświeża się około pół sekundy po przerwaniu pisania; w przeciwnym razie naciśnij Uruchom.
Co pokazuje panel konsoli?
Wszystko, co strona wypisuje przez console.log, info, warn i error, a także błędy wykonania i nieobsłużone odrzucenia Promise wraz z numerami linii. Jest czyszczony przy każdym uruchomieniu.
Czy mój kod zostaje zapisany po odświeżeniu strony?
Tak. Szkic wszystkich trzech paneli jest zapisywany lokalnie w przeglądarce i przywracany przy następnej wizycie. Resetuj przywraca oryginalny kod demo, a wyczyszczenie danych witryny usuwa szkic.
Czy podgląd jest izolowany i bezpieczny?
Podgląd działa w izolowanym iframe bez dostępu same-origin: testowane skrypty nie mogą czytać tej strony ani jej ciasteczek. Testuj mimo to tylko zaufany kod, bo wykonuje się w twojej przeglądarce.
Czy mogę pobrać swój eksperyment?
Tak. Pobierz .html zapisuje bieżące HTML, CSS i JavaScript połączone w jeden samowystarczalny plik, który otworzysz w dowolnej przeglądarce lub komuś prześlesz.
Co mogę uruchomić w panelu JavaScript?
Standardowy JavaScript przeglądarkowy: manipulację DOM, zdarzenia, canvas, fetch do publicznych API (zgodnie z ich regułami CORS) i każdą wklejoną w linii bibliotekę. Moduły i pakiety npm nie są rozwiązywane.
Czy plac zabaw wymaga internetu?
Tylko do wczytania samej strony. Edycja, podgląd i przechwytywanie konsoli działają potem lokalnie, a twój kod nigdzie nie jest wysyłany.
Jak korzystać z Plac zabaw dla kodu
To plac zabaw łączy Twój HTML, CSS i JavaScript w wydzielony podgląd na żywo w całości w Twojej przeglądarce, z panelem konsoli przechwytującym logi i błędy. Szkic zapisuje się lokalnie, więc wracasz dokładnie do miejsca, w którym skończyłeś.
- Edytuj panele HTML, CSS i JavaScript — każdy edytor ma numery linii i kolorowanie składni.
- Przy włączonym Auto uruchamianiu podgląd odświeża się w trakcie pisania; w przeciwnym razie naciśnij Uruchom (albo wyłącz Auto uruchamianie i startuj ręcznie).
- Obserwuj panel Konsola pod podglądem: wyniki console.log, ostrzeżenia, błędy i nieprzechwycone wyjątki pojawiają się tam z numerami linii.
- Naciśnij Resetuj, aby wrócić do wbudowanego demo, albo Pobierz .html, by zapisać wszystko w jednym samowystarczalnym pliku.
- Skorzystaj z Otwórz w nowym oknie, aby obejrzeć bieżący dokument w pełnym rozmiarze we własnej karcie.
Konsola jest czyszczona przy każdym uruchomieniu, więc podczas debugowania dodawaj console.log do woli — wynik pokazuje się natychmiast, bez otwierania prawdziwej konsoli przeglądarki.
Powiązane narzędzia
- Upiększacz JavaScript Darmowy upiększacz i formater kodu JavaScript online. Natychmiast konwertuj zminifikowany JS na czysty, czytelny kod z odpowiednimi wcięciami i konfigurowalnymi opcjami.
- Minifikator JS Minifikuj kod JavaScript natychmiast. Usuń białe znaki, komentarze i zoptymalizuj JS dla szybszego ładowania.
- Tester wyrażeń regularnych Testuj i debuguj wyrażenia regularne z dopasowaniem w czasie rzeczywistym i przechwytywaniem grup.
- Podgląd Markdown Darmowy edytor Markdown online z podglądem na żywo. Pisz, renderuj i eksportuj Markdown z pełnym wsparciem GFM.
- Sprawdzanie Hash Obliczaj i weryfikuj hashe MD5, SHA-1, SHA-256, SHA-512 lokalnie
- Kalkulator Chmod Darmowy kalkulator chmod online do wizualizacji i obliczania uprawnień plików Linux za pomocą pól wyboru. Natychmiastowa konwersja między notacją liczbową (755, 644) a symboliczną (rwxr-xr-x). Obsługuje specjalne uprawnienia jak setuid, setgid, sticky bit.
- Tabela ASCII Kompletna referencja kodowania znaków ASCII z kodami dziesiętnymi, szesnastkowymi, ósemkowymi, binarnymi, encjami HTML i opisami znaków. Natychmiastowe wyszukiwanie i filtrowanie.
- Przeglądarka Hex Przeglądaj zawartość plików w formacie hex dump z wyszukiwaniem, nawigacją offsetu i wirtualnym przewijaniem