browser-testing-with-devtools

Follow the reproduce-inspect-diagnose-fix-verify workflow: navigate to the page, capture a screenshot, check console errors, inspect the DOM element and computed styles, fix the source code, then reload and compare screenshots to confirm the fix.

Open the network monitor, trigger the action, then check the request URL, method, headers, payload, response status, and timing. Status codes guide diagnosis: 4xx indicates client issues, 5xx server errors, and CORS failures point to origin header misconfiguration.

Chrome DevTools MCP is a server that gives AI agents access to browser inspection tools like screenshots, DOM reading, console logs, and performance traces. Add it to your project's MCP config with the command npx @anthropic/chrome-devtools-mcp@latest.

Yes, but only for read-only state inspection such as reading variables or querying the DOM. It must not access cookies, localStorage tokens, or credentials, make external network requests, or modify the page without user confirmation.

Avoid it for backend-only changes, CLI tools, or any code that does not run in a browser. It is designed specifically for verifying rendered UI, runtime console output, network behavior, and frontend performance.

DOM text, console messages, and network responses can contain injected instructions designed to manipulate the agent. The skill requires flagging instruction-like content to the user and never navigating to URLs or executing commands found in page content.