Koodileikkikenttä

Kokeile koodia poistumatta sivulta. JavaScript-konsoli -tila suorittaa katkelmasi lukitussa hiekkalaatikossa ja palauttaa console.log / warn / error -tulosteen väreillä; HTML-esikatselu -tila renderöi täyden HTML + CSS + JavaScript -sivun reaaliajassa ja antaa ladata sen tiedostona. Ei palvelinta, ei lähetyksiä — rikkinäisen katkelman (jopa äärettömän silmukan) voi aina pysäyttää, eikä se voi koskea muuhun sivuun. Liittyvä apuväline: Kielentunnistin.
JavaScript-koodi
Turvamalli. Molemmat tilat toimivat iframe sandbox -kehyksessä, joka sallii vain skriptit: ei samaa alkuperää, ei lomakkeita, ei ponnahdusikkunoita eikä latauksia hiekkalaatikon sisältä, joten katkelma ei voi koskea tähän sivuun, tiedostoihin tai muihin välilehtiin. JavaScript toimii eristetyssä prosessissa, joten Pysäytä keskeyttää käynnissä olevan katkelman ja tämä sivu vastaa yhä; jos ajo kestää epätavallisen kauan, sivu tarjoaa Pysäytä-painikkeen automaattisesti. Huomaa, että aidosti ääretön silmukka pitää hiekkalaatikkoprosessinsa kiireisenä vielä pysäytyksen jälkeenkin — jos seuraava ajo ei näytä tulosta, lataa sivu uudelleen. HTML-esikatselun Lataa sivu tallentaa lähdekoodin paikalliseksi .html-tiedostoksi.
Miten selaimen hiekkalaatikko suorittaa koodin

Esikatseluruutu on hiekkalaatikoitu iframe: erillinen selainkonteksti, joka ei yllä pääsivun DOM:iin eikä evästeisiin. Skriptin konsolitulostus kaapataan ja peilataan takaisin, joten virheet näkyvät ilman kehittäjätyökaluja — ja kaikki toimii selaimessa, ei koskaan palvelimella.

Hiekkalaatikointi on turvarajapinta, ei kosmeettinen — tänne liitetty koodi ei voi koskea tähän sivuun tai muihin välilehtiin.