Kód-játszótér
Online HTML, CSS és JavaScript játszótér élő előnézettel, sorszámozott szerkesztővel és rögzített konzollal. Teszteld a kódrészleteket azonnal, és töltsd le az eredményt egyetlen HTML fájlként - teljesen a böngésződben.
Mi az a kód-játszótér?
A kód-játszótér egy sandbox, ahol HTML-t, CSS-t és JavaScriptet írsz, és azonnal látod a renderelt eredményt. Ez ráadásul rögzített konzolt, sorszámozott szerkesztőket és a munkád egyetlen HTML fájlként való letöltését is kínálja.
Hogyan működik az élő előnézet?
A három kódpanel egy teljes HTML-dokumentummá áll össze, és sandboxolt iframe-ben renderelődik. Automatikus futtatás mellett az előnézet kb. fél másodperccel az írás abbahagyása után frissül; egyébként nyomd meg a Futtatás gombot.
Mit mutat a konzolpanel?
Mindent, amit az oldal a console.log, info, warn és error segítségével kiír, plusz a futásidejű hibákat és a kezeletlen promise-elutasításokat sorszámokkal. Minden futtatáskor kiürül.
Megmarad a kódom az oldal újratöltésekor?
Igen. A három panel piszkozata lokálisan tárolódik a böngésződben, és a következő látogatáskor visszatöltődik. A Visszaállítás az eredeti demókódot hozza vissza, a webhelyadatok törlése pedig a piszkozatot törli.
Az előnézet sandboxolt és biztonságos?
Az előnézet sandboxolt iframe-ben fut same-origin hozzáférés nélkül: a tesztelt szkriptek nem olvashatják ezt az oldalt és a sütijeit. Ennek ellenére csak megbízható kódot futtass, mert az a böngésződben fut.
Letölthetem a kísérletemet?
Igen. A .html letöltése az aktuális HTML-t, CSS-t és JavaScriptet egyetlen önálló fájlba menti, amit bármely böngészőben megnyithatsz vagy megoszthatsz.
Mit futtathatok a JavaScript panelen?
Szabványos böngészős JavaScriptet: DOM-manipulációt, eseményeket, canvast, fetch-et nyilvános API-khoz (azok CORS-szabályai szerint) és minden inline beillesztett könyvtárat. Modulok és npm-csomagok nem oldódnak fel.
Szükség van internetre a játszótérhez?
Csak magának az oldalnak a betöltéséhez. A szerkesztés, az előnézet és a konzolrögzítés utána helyben fut, és a kódod soha nem kerül sehova feltöltésre.
A(z) Kód-játszótér használata
Ez a játszótér a HTML, CSS és JavaScript kódodat homokozós élő előnézetbe egyesíti, teljes egészében a böngésződben, naplókat és hibákat rögzítő konzolpanellel. A piszkozat helyben mentődik, így ott folytathatod, ahol abbahagytad.
- Szerkeszd a HTML, CSS és JavaScript paneleket — minden szerkesztőben van sorszámozás és szintaxiskiemelés.
- Automatikus futtatás mellett gépelés közben frissül az előnézet; egyébként nyomd meg a Futtatás gombot (vagy kapcsold ki az Automatikus futtatást, és indítsd kézzel).
- Figyeld az előnézet alatti Konzol panelt: a console.log kimenetek, figyelmeztetések, hibák és kezeletlen kivételek sorszámmal jelennek meg ott.
- A Visszaállítással visszatérsz a beépített demóhoz, a .html letöltésével pedig egyetlen önálló fájlba mentheted az egészet.
- A Megnyitás új ablakban opcióval a jelenlegi dokumentumot láthatod teljes méretben, saját lapján.
A konzol minden futtatáskor törlődik, így hibakereséskor bátran használj console.log sort — a kimenet azonnal megjelenik, a böngésző valódi konzolja nélkül.
Kapcsolódó eszközök
- JavaScript Szépítő Ingyenes online JavaScript szépítő és kódformázó. Alakítsa át azonnal a minimalizált JS-t tiszta, olvasható kóddá megfelelő behúzással és testreszabható beállításokkal.
- JS minimalizáló JavaScript kód azonnali minimalizálása. Távolítsa el a szóközöket, megjegyzéseket és optimalizálja a JS-t a gyorsabb betöltéshez.
- Regex tesztelő Tesztelje és hibakeresse a reguláris kifejezéseket valós idejű egyezéssel és csoportrögzítéssel.
- Markdown Előnézet Ingyenes online Markdown szerkesztő élő előnézettel. Írjon, rendereljen és exportáljon Markdown-t teljes GFM támogatással.
- Hash-ellenőrző MD5, SHA-1, SHA-256, SHA-512 fájl hash-ek helyi kiszámítása és ellenőrzése
- Chmod-számológép Ingyenes online chmod-számológép a Linux fájljogosultságok vizualizálásához és számításához jelölőnégyzetekkel. Azonnali átváltás numerikus (755, 644) és szimbolikus jelölés (rwxr-xr-x) között. Támogatja a különleges jogosultságokat mint setuid, setgid, sticky bit.
- ASCII Táblázat Teljes ASCII karakterkódolási referencia tizes, tizenhatos, nyolcas, kettes számrendszerbeli kódokkal, HTML entitásokkal és karakterleírásokkal. Azonnali keresés és szűrés.
- Hex megjelenítő Fájltartalom megtekintése hex dump formátumban kereséssel, offset navigációval és virtuális görgetéssel