Piaskownica HTML, CSS i JS

Do czego służy

Ta piaskownica to mały edytor kodu online do eksperymentów z front-endem. Pisz HTML, CSS i JavaScript w trzech kartach z podświetlaniem składni, a podgląd aktualizuje się w trakcie pisania — jak w CodePen czy JSFiddle, ale bez zakładania konta. Wbudowana konsola pokazuje wyniki console.log() i błędy z numerem wiersza w twoim JavaScripcie, więc możesz debugować bez otwierania narzędzi deweloperskich. Dzięki temu przydaje się na telefonie lub pożyczonym komputerze.

Użyj jej, aby wypróbować układ CSS, odtworzyć błąd dla współpracownika, przetestować fragment ze Stack Overflow, uczyć początkującego albo naszkicować szybki prototyp.

Jak używać

1. Pisz w kartach HTML, CSS i JS lub naciśnij Przykład, aby zacząć od małego demo licznika. Kropka na karcie oznacza, że zawiera kod.
2. Podgląd uruchamia się automatycznie 0,6 sekundy po tym, jak przestaniesz pisać. Wyłącz Autouruchamianie dla ciężkich skryptów i naciśnij Uruchom lub Ctrl+Enter, gdy będziesz gotowy.
3. Obserwuj Konsolę, aby widzieć logi, ostrzeżenia i błędy; najnowszy wiersz jest zawsze na górze. Obiekty, tablice, Mapy, Sety i elementy DOM są pokazywane w zwięzłej, czytelnej formie.
4. Udostępnij, aby wysłać komuś kod. Pobierz ZIP zapisuje index.html, style.css i script.js jako osobne pliki, gotowe do prawdziwego projektu; Pobierz HTML zapisuje wszystko jako jeden plik index.html, który otworzy się w każdej przeglądarce.

Twój kod jest przechowywany w tej przeglądarce, więc będzie na miejscu, gdy wrócisz. Klawisz Tab wcina dwiema spacjami.

Przykład

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Każde kliknięcie dodaje wiersz do konsoli. Jeśli popełnisz literówkę w nazwie, konsola pokaże czerwony ReferenceError z wierszem w karcie JS, w którym wystąpił.

Jak to działa

Trzy panele są łączone w jeden dokument HTML i wczytywane do iframe z atrybutem sandbox, więc kod nie może odczytać ciasteczek ani pamięci tej witryny. Mały skrypt dodany do ramki przekazuje wywołania konsoli i nieprzechwycone błędy do strony, a nic nie opuszcza twojego urządzenia.