Browser DevTools

You might say

Clicking Save does not update the page. Use browser developer tools to find the evidence instead of guessing from the screen.

Browser DevTools are built-in tools for inspecting page structure, styles, errors, requests, and storage state.For example, when Save does not update the page, use Elements for nodes and styles, Console for script errors, Network for request status and responses, and Storage for browser data such as cookies. DevTools provides evidence and temporary edits; it does not replace server logs, permission checks, or a real code fix.

Know first

HTML HTTP

DevTools

Which evidence panel matches a page symptom

Save profileCurrent page

ElementsConsoleNetworkStorage

<button class="primary">Save</button>
.primary { background: #4338ca; }

The tools expose evidence: Elements for structure and styles, Console for script errors, Network for requests, and Storage for browser data.

What the four common panels answer

How to open DevTools: Right-click and select 'Inspect' or 'Inspect Element'. Shortcuts: Mac Cmd+Option+I, Windows F12 or Ctrl+Shift+I. Opens to Elements panel by default, click tabs to switch to Console, Network, or Application.

Elements and Console: Elements inspects the current DOM, attributes, and CSS; Console shows script errors, logs, and reproducible runtime information.

Network and Storage: Network inspects requests, status codes, request data, and responses; Storage inspects browser state such as cookies and Web Storage. Choose by symptom, then carry evidence into the fix and retest.

You can say this to an AI Agent

Use the browser developer tools to investigate the failed save. State what you found in Elements, Console, Network, or Storage, especially the save request's status and response. Modify the code only after finding evidence, then send the request again and confirm the page updates.

Learn next

1HTTP→2Server Logs→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

Clicking Save does not update the page, and the server response is needed to explain the failure. Which panel should you open first?

A. Open Network and inspect the save request's status, payload, and responseB. Open Elements and keep changing the button text until it looks savedC. Open Storage, delete all browser data, and click Save again