🔍 DevTools: Your Superpower Magnifying Glass!
Want to peek behind the scenes of any website? Press F12 or right-click and choose Inspect to open Developer Tools!
Example
Example
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>DevTools Interactive DOM Inspector</title>
6
<style>
7
body { font-family: sans-serif; background: #0f172a; color: #fff; padding: 24px; text-align: center; }
8
.demo-box { background: #1e293b; padding: 24px; border-radius: 12px; border: 2px dashed #04AA6D; max-width: 500px; margin: 0 auto; }
9
h2 { color: #04AA6D; }
10
</style>
11
</head>
12
<body>
13
14
<div class="demo-box">
15
<h2 id="demo-title">Inspect Me in DevTools!</h2>
16
<p>Right-click this element and select <strong>Inspect</strong> to view it in the Elements panel.</p>
17
<button onclick="alert('Hello from Browser DevTools!')" style="background:#04AA6D;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-weight:bold;cursor:pointer;margin-top:10px;">
18
Test DevTools Click
19
</button>
20
</div>
21
22
</body>
23
</html>