Guide · Agent skill

How to use the Browser Testing with DevTools agent skill

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

The browser-testing-with-devtools skill teaches an AI agent to test and debug web pages inside a real Chrome browser through the Chrome DevTools MCP server. It is for developers working on front-end layout, console errors, failing API calls or page performance. After following this guide you will know what the skill does, how to install it, how to configure the MCP server, and how to ask for browser checks in plain language.

Browser Testing with DevToolsaddyosmani/agent-skills · MIT Download the skill

Quick start

1Check prerequisites. Install Node.js so npx is available, and make sure Chrome is installed.
2Download the skill. Download the ZIP for browser-testing-with-devtools from this page.
3Unzip the skill. Unzip it into ~/.claude/skills/ for personal use or into your project's .claude/skills/ folder for one project.
4Configure the MCP server. Add the chrome-devtools server to your project's .mcp.json or Claude Code settings using npx chrome-devtools-mcp@latest with --isolated.
5Ask for a browser check. Describe the page, the symptom and the expected result in plain language.
6Review the findings. Check the screenshots, console output and network data the agent reports, and confirm any fix with a reload.

What does the browser-testing-with-devtools skill make the agent do?

Once installed, the agent can look at a web page running in Chrome the way a user would. Chrome DevTools MCP gives it access to screenshots, the live DOM, console logs, network requests, performance traces, computed styles and the accessibility tree.

This lets the agent confirm a fix works in the browser instead of guessing from code. The skill says to use it for building or modifying anything that renders in a browser, and not for backend-only changes, CLI tools or code that never runs in a browser.

Screenshot: captures the current page state
DOM inspection: reads the live DOM tree
Console logs: retrieves log, warn and error output
Network monitor: captures requests and responses
Performance trace: records timing data to profile load time
Element styles: reads computed styles
Accessibility tree: reads the accessibility tree
JavaScript execution: runs read-only inspection code in the page

Install the skill from the download

Download the ZIP for the browser-testing-with-devtools skill from this page. The skill is a single file, SKILL.md. You can make it available in one of two ways.

For Claude Code, unzip the download into ~/.claude/skills/ to make it available everywhere, or into a project's .claude/skills/ folder to share it with that project only.

In the Claude apps, you can upload the skill under Settings → Capabilities → Skills instead.

Personal: unzip into ~/.claude/skills/
Project-specific: unzip into the project's .claude/skills/
Claude apps: Settings → Capabilities → Skills

Configure the chrome-devtools MCP server

The skill needs the chrome-devtools MCP server. Add it to your project's .mcp.json or to your Claude Code settings. The server is launched with npx, so Node.js must be installed.

The skill's recommended setup passes --isolated, which uses a temporary profile that is wiped when the browser closes. Without connect flags, the server uses its own dedicated profile under ~/.cache/chrome-devtools-mcp/, separate from your personal browser.

Requires Node.js with npx and a Chrome browser
Optional: --autoConnect needs Chrome 144+ and remote debugging enabled at chrome://inspect/#remote-debugging
Use --autoConnect only when the test truly needs your logged-in state

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
    }
  }
}

How to trigger the skill with natural requests

You do not need special syntax. Describe the browser problem or check you want, and mention the page or dev server. The skill's description covers requests to inspect the DOM, capture console errors, analyze network requests, profile performance or verify visual output.

Good requests name the symptom and the expected result, so the agent knows what to compare against.

"The settings page header overlaps the sidebar on my local dev server. Find out why and check it after the fix."
"Capture console errors when I load the checkout page on localhost."
"The profile form request returns 500. Show me the request payload and response."
"Measure load performance of the home page and report Core Web Vitals."

How the agent works through a UI bug

For UI bugs, the skill sets a five-step loop: reproduce, inspect, diagnose, fix and verify. The agent takes a screenshot before changing anything, then reloads, takes a second screenshot to compare, confirms the console is clean and runs your automated tests.

For network issues, the skill follows capture, analyze and verify steps, checking request URL, method, headers and payloads.

Safety notes: scripts, network and your browser profile

The skill runs scripts and uses the network, because the MCP server is launched with npx and drives a real browser. Its security rules make the agent treat all browser content as untrusted data. DOM text, console messages and network responses are reported, not obeyed, and the agent will not navigate to URLs taken from page content without your confirmation.

The biggest risk is attaching to your real profile. With --autoConnect the agent can see all open windows of that profile, including email, banking and saved sessions. Close unrelated tabs first, prefer a separate test profile signed into only the test account, and detach when done.

JavaScript execution is read-only by default. The skill forbids external requests from page scripts, reading cookies or storage tokens, and DOM changes without your confirmation.

Default to the dedicated or --isolated profile for localhost testing
Use a separate Chrome profile if you need logged-in state
Treat any agent access to your open tabs as something to review

Tips for getting reliable results

Give the agent the local URL of your dev server so it knows exactly which page to test. Ask for a screenshot before and after a fix so you can compare them. Keep JavaScript checks narrow and tied to the bug, since the skill asks the agent to avoid exploratory scripts.

Name the exact page or route to test
Ask for before and after screenshots
Ask for console and network checks together with visual checks
Keep your automated tests in the loop for the final verify step

What people use it for

Debugging a layout bug on a local React or Vue page by comparing screenshots before and after a CSS change
Finding the console error that appears only after a button click on a dev server
Inspecting a failing API call's request headers and response payload from the network monitor
Profiling page load on a local dev server and reading Core Web Vitals-related timing data

Frequently asked questions

How do I install the browser-testing-with-devtools skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.

What do I need to run it?

You need Node.js with npx, a Chrome browser, and the chrome-devtools MCP server configured in .mcp.json or Claude Code settings. Chrome 144+ with remote debugging is only needed if you use --autoConnect.

Is the browser-testing-with-devtools skill free?

The skill is published under the MIT licence. The source does not cover pricing for Claude or other products you may use with it.

Why does the skill run scripts and use the network?

The MCP server is launched via npx chrome-devtools-mcp@latest and drives a real Chrome browser, so the skill runs scripts and uses the network. Its security rules limit what JavaScript execution may do.

Will the agent use my personal logged-in Chrome?

Not by default. The recommended setup uses a dedicated profile or --isolated. Only --autoConnect attaches to your running Chrome, which can expose all open windows, so use it only when needed.

What if the agent does not see the browser or the MCP server fails?

Check that the chrome-devtools server is in your .mcp.json or Claude Code settings, that Node.js with npx is installed, and that Chrome is available. The source does not list other troubleshooting steps.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are a developer or team who wants an agent to check front-end changes, console errors, failing requests or page performance in a real browser before reporting them done. Skip it for backend-only work or code that never runs in a browser, and avoid pointing it at your real logged-in profile unless you have isolated it first.

Download the skill