In this article · 9 sections
Press F12 (or right-click → Inspect) in Chrome and you open Chrome DevTools: a toolkit for seeing exactly what a page is doing. Developers use it daily to fix layout problems, debug JavaScript, find slow files and test mobile views.
Elements: HTML and CSS live
- Click the arrow icon, then click any part of the page to jump to its HTML
- Edit text or CSS in the Styles pane and see changes instantly (they're temporary)
- Crossed-out CSS rules show what's being overridden
- The Computed tab shows final values and the box model (margin, border, padding)
Great for fixing "why is this button misaligned?" in seconds.
Device toolbar: mobile testing
Press Ctrl+Shift+M to view the page as a phone. Pick a device or set a custom width (e.g. 360px). Check menus, forms and text size. See mobile-first design.
Console: JavaScript errors
- Red errors explain broken sliders, forms and menus, with file and line number
- Type JavaScript directly to test:
document.querySelectorAll('img').length - Use
console.log()in your code to check values. See JavaScript basics
Network: what loads and how fast
- Reload with the Network tab open to see every file, its size and load time
- Filter by Img, JS, Fetch/XHR
- Click an AJAX request to see what was sent and returned. See fetch tutorial
- Red rows are failed requests (404 images, broken scripts)
- Use throttling ("Fast 4G" / "Slow 4G") to feel what mobile users experience
Lighthouse: quick audits
Run Lighthouse for Performance, Accessibility, Best Practices and SEO scores with specific suggestions. Test in an incognito window to avoid extensions affecting results. See web accessibility basics.
Application: storage and cookies
See cookies, localStorage and session data. Useful for debugging login issues and cookie consent. Clear site data here when testing fresh visits.
Sources: breakpoints
Set breakpoints in JavaScript to pause and inspect variables step by step, a big upgrade over scattered console.log() calls.
Practical tasks to try
- Find the largest image on your homepage (Network → sort by size)
- Check for mixed content warnings in the Console. See SSL errors
- Find why a font looks different (Elements → Computed → font-family)
- Check your contact form's request and response
FAQs
Can DevTools change a live website?
Only in your browser, temporarily. Nothing is saved to the server.
Do other browsers have DevTools?
Yes. Edge has the same tools; Firefox and Safari have similar ones.
Was this article helpful?
Your answer helps us improve our guides