⚡ DevTools Lite
Elements (HTML)
Styles (CSS)
Console (JS)
Auto-Run
▶ Run
<div class="card"> <h1>Hello World</h1> <p>Edit me live!</p> <button id="btn">Click Me</button> </div>
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #f0f2f5; } .card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; } h1 { color: #333; } button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #0056b3; }
console.log("System Ready."); document.getElementById('btn').addEventListener('click', () => { console.log("Button clicked!"); alert("It works!"); });
Console
🚫 Clear