DevTools
A panel built into your browser that shows what a web page is made of and what it's doing behind the scenes.
What it is
DevTools is a set of panels hidden inside Chrome (and every other major browser). Open it with Cmd + Option + I on a Mac, F12 or Ctrl + Shift + I on Windows, or right-click anything and choose Inspect.
It has a tab for each kind of question. Elements shows the page's structure and styles. Console shows errors and messages. Network shows every request the page makes. Application shows what the site has stored in your browser.
You don't need to understand everything in it. Knowing where to find the error and how to copy it turns "it's broken" into a bug report a coding agent can actually fix.
How to ask for it
“The page is broken, can you fix it?”
“The pricing page shows a blank area where the plans should be. I opened Chrome DevTools: the Console has a red error, and the Network tab shows the /plans request failing with a 500. Both pasted below.”
Reporting what DevTools shows gives the agent the actual error and the failing request, so it can go straight to the cause.
You've seen this in
- CRight-click, then Inspect, in Chrome
- TThe panel that opens when you press F12
- SSafari's Web Inspector and Firefox's Developer Tools