Plac zabaw HTML
Wklej HTML, CSS i JS — zobacz wynik na żywo od razu, jak w JSFiddle.
Podgląd pojawi się tutaj
Brak wyjściu
Przypadki użycia
HTML Playground to darmowe, działające w przeglądarce środowisko testowe dla HTML, CSS i JavaScript. Używaj go do szybkich eksperymentów, debugowania fragmentów, sprawdzania układów responsywnych i udostępniania działającego przykładu. Oto praktyczne sposoby, by wycisnąć z niego jak najwięcej:
-
Wklej kompletny plik HTML
Przełącz się na tryb „Pojedynczy plik” i wklej kompletny dokument .html z osadzonymi blokami <style> i <script>, aby zobaczyć dokładnie, jak się renderuje, bez ręcznego dzielenia.
-
Osobne panele HTML / CSS / JS
Twórz znaczniki, style i zachowanie w trzech wyraźnie oddzielonych panelach i włącz tryb „Osobno”, aby zobaczyć, jak złożony wynik aktualizuje się na żywo.
-
Podgląd na żywo (z opóźnieniem)
Pisz w dowolnym edytorze, a podgląd odświeży się automatycznie po krótkim opóźnieniu, dzięki czemu możesz szybko iterować bez naciskania przycisku po każdej edycji.
-
Zobacz wyjście konsoli
Gdy Twój JavaScript zapisuje wartości lub zgłasza błąd, zwijany panel konsoli pokazuje wyjście log, ostrzeżeń i błędów oraz wyjątki nieuchwycone, z akcją czyszczenia jednym kliknięciem.
-
Podgląd według szerokości urządzenia i eksport
Sprawdź mobilny układ za pomocą przełącznika szerokości urządzenia, a następnie Kopiuj samodzielny HTML do schowka lub Pobierz pojedynczy samowystarczalny plik .html, aby go udostępnić.
Częste pytania
- Jak korzystać z tej aplikacji?
- Wybierz „Osobno” (edycja HTML, CSS i JS w osobnych panelach) lub „Pojedynczy plik” (wklejenie jednego kompletnego dokumentu HTML), wpisz lub wklej swój kod, a podgląd zaktualizuje się automatycznie. Przycisk Uruchom odświeża go ręcznie, panel konsoli pozwala zobaczyć błędy, a Kopiuj/Pobierz eksportuje wynik.
- Czy mogę wkleić cały plik HTML z CSS i JS w środku?
- Tak. W trybie „Pojedynczy plik” wklej cały dokument HTML wraz z blokami <style> i <script>, a zostanie on wyświetlony bez zmian.
- Co dzieje się z moim kodem?
- Twój kod pozostaje w Twojej przeglądarce. Jest renderowany wyłącznie w zaszczepionym (sandbox) podglądzie na tej stronie i zapisywany lokalnie w przeglądarce, abyś mógł wrócić tam, gdzie skończyłeś. Aplikacja nie wysyła Twojego kodu na serwer.
- Dlaczego mój kod się nie uruchamia lub pokazuje błąd?
- Otwórz panel konsoli, aby zobaczyć dokładny błąd lub ostrzeżenie. Najczęstsze przyczyny to błędy składni JavaScript, brakujące elementy, do których odwołuje się Twój kod, lub skrypty wymagające zasobu sieciowego. Popraw zaznaczony błąd, a podgląd zaktualizuje się automatycznie.
- Czy mogę zapisać lub udostępnić swoją pracę?
- Tak. Użyj Kopiuj, aby umieścić samodzielny HTML w schowku, lub Pobierz, aby zapisać pojedynczy plik .html, który możesz otworzyć lub udostępnić. Twój kod jest też zapamiętywany lokalnie między wizytami, dopóki nie naciśniesz Wyczyść.