🛠️ What Are DevTools?
DevTools (Developer Tools) are built-in browser tools that help developers inspect, debug, and optimize web pages and web applications — available in all modern browsers like Chrome, Firefox, Edge, and Safari.
✅ Open them with
F12
orRight-click → Inspect
in most browsers.
🔍 Overview of Key DevTools Panels
Panel | Use |
---|---|
Elements | Inspect & edit HTML/CSS live |
Console | View logs, errors, and run JavaScript |
Sources | Debug JS (set breakpoints, step through code) |
Network | Monitor API calls, load times, and headers |
Performance | Record and analyze performance bottlenecks |
Lighthouse | Run audits for performance, SEO, a11y, PWA |
Application | Inspect cookies, localStorage, IndexedDB, service workers |
Security | Check HTTPS, certificates, mixed content issues |
Memory | Analyze memory usage and detect leaks |
Accessibility | Inspect roles, ARIA attributes, contrast, etc. |
🧠 Top DevTools Use Cases (By Panel)
✅ 1. Elements Panel
Inspect and live-edit HTML & CSS
Add classes and styles to test UI changes
View box model, layout, and computed styles
✅ 2. Console Panel
See JS errors and warnings
Log values with
console.log()
Use commands:
js$0 // last selected DOM element
console.table(array) // show data in table
✅ 3. Sources Panel
View and debug JS files
Set breakpoints, step through code
Use
localOverrides
to edit and persist file changes locally
✅ 4. Network Panel
Monitor API requests (XHR/fetch)
Analyze response times, headers, payloads
Detect failed requests and CORS issues
✅ 5. Lighthouse Panel
Run audits for:
Performance
Accessibility
Best practices
SEO
Progressive Web App (PWA)
✅ 6. Application Panel
View and clear:
Cookies
LocalStorage
SessionStorage
IndexedDB
Cache and service workers
✅ 7. Performance Panel
Record load performance
Visualize JavaScript execution and rendering
Detect layout shifts and long tasks
🚀 DevTools Productivity Tips
Tip | Shortcut |
---|---|
Open DevTools | F12 or Ctrl + Shift + I / Cmd + Opt + I |
Toggle device mode (mobile view) | Ctrl + Shift + M / Cmd + Shift + M |
Inspect an element | Right-click → Inspect |
Search all source files | Ctrl + Shift + F |
Clear console | Ctrl + L |
Pause on exceptions | In Sources panel > Enable breakpoint on errors |
Take full page screenshot | Cmd Palette → Capture full size screenshot |
📦 Advanced Features
Feature | Description |
---|---|
🎯 Coverage tab | See unused CSS/JS |
🧪 Experiments tab | Enable experimental features |
🖥️ Rendering tab | Visualize layout shifts, paint flashes, etc. |
🧩 Lighthouse CI | Automate audits in CI pipelines |
🧰 Custom Snippets | Save and reuse JavaScript snippets in Console |