Koodileikkikenttä
Verkko-HTML-, CSS- ja JavaScript-leikkipaikka live-esikatselulla, rivinumeroisella editorilla ja tallennetulla konsolilla. Testaa koodinpätkiä heti ja lataa tulos yhtenä HTML-tiedostona - kokonaan selaimessasi.
Mitä koodileikkipaikka on?
Koodileikkipaikka on hiekkalaatikko, jossa kirjoitat HTML:ää, CSS:ää ja JavaScriptiä ja näet renderoidun tuloksen heti. Tämä lisää tallennetun konsolin, rivinumeroiset editorit ja mahdollisuuden ladata tyosi yhtenä HTML-tiedostona.
Miten live-esikatselu toimii?
Kolme koodipaneelia yhdistetään täydelliseksi HTML-asiakirjaksi ja renderöidään sandboxoidussa iframe:ssä. Automaattisen suorituksen ollessa päällä esikatselu päivittyy noin puoli sekuntia kirjoittamisen pysähdyksen jälkeen; muuten paina Suorita.
Mitä konsolipaneeli näyttää?
Kaiken, minkä sivu kirjoittaa console.log-, info-, warn- ja error-kutsuilla, sekä ajovirheet ja käsittelemättömät promise-hylkääkset rivinumeroineen. Se tyhjennetään joka suorituksella.
Tallentuuko koodini, jos lataan sivun uudelleen?
Kyllä. Kolmen paneelin luonnos tallentuu selaimen paikalliseen muistiin ja palautuu seuraavalla käynnillä. Nollaa palauttaa alkuperäisen demokoodin, ja sivustotietojen tyhjennys poistaa luonnoksen.
Onko esikatselu sandboxattu ja turvallinen?
Esikatselu toimii sandboxoidussa iframe:ssä ilman same-origin-oikeuksia: testaatavat skriptit eivät voi lukea tätä sivua tai sen evästeitä. Testaa silti vain luotettavaa koodia, sillä se suoritetaan selaimeesi.
Voinko ladata kokeiluni?
Voin. Lataa .html tallentaa nykyiset HTML:n, CSS:n ja JavaScriptin yhdeksi itsenäiseksi tiedostoksi, jonka avaa missä tahansa selaimessa tai jaat muille.
Mitä voin suorittaa JavaScript-paneelissa?
Tavallista selain-JavaScriptiä: DOM-manipulaatio, tapahtumat, canvas, fetch julkisiin rajapintoihin (niiden CORS-sääntöjen puitteissa) ja mikä tahansa inline-liitetty kirjasto. Moduuleja ja npm-paketteja ei ratkaista.
Tarvitseeko leikkipaikka internetin?
Vain sivun itsensä lataamiseen. Muokkaus, esikatselu ja konsolin tallennus toimivat sen jälkeen paikallisesti, eikä kirjoittamaasi koodia lähetetä minnekään.
Näin käytät työkalua Koodileikkikenttä
Tämä leikkikenttä yhdistää HTML-, CSS- ja JavaScript-koodisi hiekkalaatikkoon eristettyyn live-esikatseluun kokonaan selaimessasi, konsolipaneelilla, joka tallentaa lokit ja virheet. Luonnos tallentuu paikallisesti, joten jatkat siitä mihin jäit.
- Muokkaa HTML-, CSS- ja JavaScript-ruutuja — jokaisessa editorissa on rivinumerot ja syntaksin väritys.
- Automaattisen suorituksen ollessa päällä esikatselu päivittyy kirjoittaessasi; muuten paina Suorita (tai kytke Automaattinen suoritus pois ja aja käsin).
- Seuraa esikatselun alla olevaa Konsoli-paneelia: console.log-tulosteet, varoitukset, virheet ja käsittelemättömät poikkeukset näkyvät siellä rivinumeroineen.
- Paina Nollaa palataksesi sisäänrakennettuun demoon tai Lataa .html tallentaaksesi kaiken yhteen itsenäiseen tiedostoon.
- Käytä Avaa uudessa ikkunassa nähdäksesi nykyisen asiakirjan täysikokoisena omassa välilehdessään.
Konsoli tyhjennetään jokaisella ajolla, joten lisää console.log-rivejä vapaasti debugatessa — tulosteet näkyvät heti ilman selaimen oikean konsolin avaamista.
Aiheeseen liittyvät työkalut
- JavaScript Kaunistaja Ilmainen online JavaScript-kaunistaja ja koodin muotoilija. Muunna välittömästi minifioitu JS puhtaaksi, luettavaksi koodiksi oikeilla sisennyksillä ja muokattavilla vaihtoehdoilla.
- JS-minifioija Minifioi JavaScript-koodi välittömästi. Poista välilyönnit, kommentit ja optimoi JS nopeampaa latausta varten.
- Regex-testaaja Testaa ja virheenjäljitä säännöllisiä lausekkeita reaaliaikaisella täsmäyksellä ja ryhmien sieppauksella.
- Markdown Esikatselu Ilmainen online-Markdown-editori live-esikatselulla. Kirjoita, renderöi ja vie Markdown täydellisellä GFM-tuella.
- Tiivistetarkistus Laske ja vahvista MD5, SHA-1, SHA-256, SHA-512 tiedostotiivisteet paikallisesti
- Chmod-laskin Ilmainen online chmod-laskin Linux-tiedostooikeuksien visualisointiin ja laskentaan valintaruuduilla. Muunna heti numeerisen (755, 644) ja symbolisen merkintätavan (rwxr-xr-x) välillä. Tukee erikoisoikeuksia kuten setuid, setgid, sticky bit.
- ASCII-taulukko Täydellinen ASCII-merkkikoodausviite desimaali-, heksadesimaali-, oktaali-, binäärikoodeilla, HTML-entiteeteillä ja merkinkuvauksilla. Välitön haku ja suodatus.
- Hex-katselin Näytä tiedostojen sisältö hex-dump-muodossa haulla, siirtymällä ja virtuaalisella vierityksellä