Kodlekplats
Online-lekplats för HTML, CSS och JavaScript med liveförhandsvisning, editor med radnummer och fångad konsol. Testa kodsnuttar direkt och ladda ner resultatet som en enda HTML-fil - helt i webbläsaren.
Vad är en kodlekplats?
En kodlekplats är en sandbox där du skriver HTML, CSS och JavaScript och direkt ser det renderade resultatet. Denna har dessutom en fångad konsol, editorer med radnummer och möjligheten att ladda ner ditt arbete som en enda HTML-fil.
Hur fungerar liveförhandsvisningen?
Dina tre kodpaneler kombineras till ett komplett HTML-dokument och renderas i en sandboxad iframe. Med automatisk körning uppdateras förhandsvisningen ungefär en halv sekund efter att du slutat skriva; annars tryck Kör.
Vad visar konsolpanelen?
Allt sidan skriver via console.log, info, warn och error, plus runtime-fel och ohanterade promise-avvisningar med radnummer. Den töms vid varje körning.
Sparas min kod om jag laddar om sidan?
Ja. Ett utkast av de tre panelerna sparas lokalt i webbläsaren och återställs vid nästa besök. Återställ återställer demonkoden, och att rensa webbplatsdata tar bort utkastet.
Är förhandsvisningen sandboxad och säker?
Förhandsvisningen körs i en sandboxad iframe utan same-origin-åtkomst: skript du testar kan inte läsa denna sida eller dess cookies. Testa ändå bara kod du litar på, eftersom den körs i din webbläsare.
Kan jag ladda ner mitt experiment?
Ja. Ladda ner .html sparar aktuell HTML, CSS och JavaScript kombinerat i en fristående fil som du kan öppna i valfri webbläsare eller dela.
Vad kan jag köra i JavaScript-panelen?
Standard webbläsar-JavaScript: DOM-manipulation, events, canvas, fetch till publika API:er (enligt deras CORS-regler) och valfritt bibliotek du klistrar in inline. Moduler och npm-paket löses inte.
Behöver lekplatsen internet?
Bara för att ladda själva sidan. Redigering, förhandsvisning och konsolfångst körs sedan lokalt, och din kod skickas aldrig någonstans.
Hur man använder Kodlekplats
Denna lekplats förenar din HTML, CSS och JavaScript i en sandlådeisolerad förhandsvisning helt i din webbläsare, med en konsolpanel som fångar loggar och fel. Ett utkast sparas lokalt så att du fortsätter där du slutade.
- Redigera HTML-, CSS- och JavaScript-fältet — varje editor har radnummer och syntaxfärgning.
- Med Automatisk körning på uppdateras förhandsvisningen automatiskt medan du skriver; annars trycker du på Kör (eller stänger av Automatisk körning och kör manuellt).
- Håll koll på Konsolpanelen under förhandsvisningen: console.log-utdata, varningar, fel och ofångade undantag visas där med radnummer.
- Tryck Återställ för att återgå till den inbyggda demon, eller Ladda ner .html för att spara allt som en fristående fil.
- Använd Öppna i nytt fönster för att se det aktuella dokumentet i full storlek i en egen flik.
Konsolen töms vid varje körning, så använd console.log fritt vid felsökning — utdata visas direkt utan att du öppnar webbläsarens riktiga konsol.
Relaterade verktyg
- JavaScript Förskönare Gratis online JavaScript-förskönare och kodformaterare. Konvertera omedelbart minifierad JS till ren, läsbar kod med korrekt indentering och anpassningsbara alternativ.
- JS-minifierare Minifiera JavaScript-kod direkt. Ta bort mellanslag, kommentarer och optimera din JS för snabbare laddning.
- Regex-testare Testa och felsök reguljära uttryck med realtidsmatchning och gruppinsamling.
- Markdown Förhandsvisning Gratis online Markdown-redigerare med live förhandsvisning. Skriv, rendera och exportera Markdown med fullt GFM-stöd.
- Hash-kontroll Beräkna och verifiera MD5, SHA-1, SHA-256, SHA-512 filhashar lokalt
- Chmod-kalkylator Gratis online chmod-kalkylator för att visualisera och beräkna Linux-filrättigheter med kryssrutor. Konvertera omedelbart mellan numerisk (755, 644) och symbolisk notation (rwxr-xr-x). Stöder speciella rättigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-teckenkodningsreferens med decimala, hexadecimala, oktala, binära koder, HTML-entiteter och teckenbeskrivningar. Omedelbar sökning och filtrering.
- Hex-visare Visa filinnehåll i hex-dump-format med sökning, offset-navigering och virtuell scrollning