Skip to main content
Frontend Glossary

Frontend engineering · Debugging

Developer Tools

Also called: DevTools, F12, Browser console, Inspect element

The debugging panel built into the browser. Press F12 to open it and see the page structure, styles, error messages, and network requests.

In detail

Developer tools are like a car's dashboard plus a diagnostic scanner. Press F12, or right-click and choose "Inspect," to open them. These are the panels beginners use most:

Elements shows the DOM structure and the CSS applied to each element, and lets you tweak styles temporarily to try things out. Console shows JavaScript errors and logged messages. Network shows each request's URL, status code, and response data. Application shows local storage like localStorage and cookies. Click the phone icon in the toolbar to simulate a phone screen.

When something goes wrong, send the AI the exact error text from the console along with the status code and response of the failed request in Network. That's far more useful than just saying "the page is broken."

Developer info
Term ID
eng-devtools
DOM selectors
No DOM cues. This concept isn't detected directly on a page.
Priority
1 · when several match at the same level, the higher priority wins
Version
v1 · updated Sep 29, 2026