Guide · Agent skill
How to use the Chrome DevTools Browser Control agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The chrome-devtools skill teaches an AI agent how to drive a live Chrome browser through the chrome-devtools MCP server, a connector that exposes browser controls as tools. This guide explains what the skill lets the agent do, how to install it, how to ask for things in plain language, and what to watch for. By the end you will know how to set it up, trigger it, and use it for debugging, screenshots and performance checks.
Chrome DevTools Browser Controlgithub/awesome-copilot · MIT Download the skill Quick start
- 1Set up the MCP server. Install the chrome-devtools MCP server and connect it to Google Chrome. The skill cannot control a browser without it.
- 2Download the skill ZIP. Get the ZIP file for the chrome-devtools skill from this page. It contains SKILL.md.
- 3Unzip into the skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 4Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 5Make a plain-language request. Describe the page and the task, such as checking a page for console errors or taking a screenshot.
- 6Review the agent's actions. Check which pages, forms and clicks the agent uses, especially on logged-in or sensitive sites.
What the chrome-devtools skill makes the agent do
The skill is a set of instructions that tells an agent how to use the chrome-devtools MCP server. Without the server connected to Chrome, the skill cannot control a browser on its own. With both in place, the agent can work with a real browser page.
The skill groups its tools into four areas: navigation and page management, input and interaction, debugging and inspection, and emulation and performance.
- Navigation: open new tabs, go to URLs, switch between pages, list open pages and close them, and wait for text to appear.
- Interaction: click, fill inputs or whole forms, hover, press keys, drag elements, handle alerts and prompts, and upload files.
- Debugging: take text snapshots and screenshots, read console messages, run JavaScript in the page, and list network requests.
- Emulation and performance: resize the viewport, throttle CPU or network, emulate geolocation, and record and analyse performance traces.
Install the chrome-devtools skill
Download the ZIP file for the skill from this page. The skill package contains a single file, SKILL.md.
For a personal install, unzip the folder into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder instead.
In the Claude apps, you can also upload the skill under Settings → Capabilities → Skills.
Before you rely on the skill, make sure the chrome-devtools MCP server is installed and connected to Google Chrome. The skill does not replace that setup.
How to trigger the skill with natural requests
You do not need a special command. Describe the browser task you want done in plain language, and mention the page or the problem. The agent decides when this skill applies.
The skill is designed for tasks such as navigating pages, clicking elements, filling forms, taking screenshots, checking console errors, inspecting network requests and profiling speed. Requests that match these tasks are the ones it is built for.
- Open our staging login page, fill in the test account form and tell me if the submit button works.
- Take a screenshot of the pricing page at a mobile width.
- Why is the product page failing to load? Check the console errors and any 4xx or 5xx requests.
- Record a performance trace of the home page reload and tell me what is hurting the largest contentful paint.
How the agent works through a page
The skill recommends a specific order of steps. The most important rule is to take a text snapshot before interacting. The snapshot lists the elements on the page with uid values, and the click and fill tools need those uid values to target an element. Because uid values can change after navigation or DOM changes, the agent should take a new snapshot after any major change.
For failing pages, the skill suggests checking console messages first, then network requests for failed resources, then evaluating specific DOM elements or variables. For slow pages, it suggests starting a trace with reload and auto-stop, waiting for the trace to finish, then analysing it for issues such as LCP or layout shifts.
- Use take_snapshot to find elements, and take_screenshot only for visual checks.
- Run list_pages and select_page if you are unsure which tab is active.
- Use reasonable timeouts with wait_for so the agent does not hang on slow elements.
1. take_snapshot to get the current page structure.
2. Find the uid of the target element.
3. Use click(uid=...) or fill(uid=..., value=...).Safety notes: scripts, network and live accounts
The skill itself runs no scripts, but it uses the network, because it works with a live browser and the sites in it. It can also act on accounts that are logged in and on forms it fills in, so an agent might submit something you did not intend.
Only point the skill at sites you own or have permission to test. Using it on sites you do not control can breach their policies. For sensitive accounts, consider a test profile and review what the agent plans to click or submit before it proceeds.
- Do not use it to scrape or automate sites you do not own or have permission to test.
- Be careful with logged-in sessions, payment forms and anything that sends data.
Tips for better results
Give the agent a specific page and a specific goal. A request like check the checkout page for console errors gives the agent a clear path. A vague request makes it guess which tab and tools to use.
Ask for snapshots rather than screenshots when you want the agent to act on elements. Screenshots are useful for a visual check, but the agent relies on snapshots for logic.
- Name the tab or URL when more than one page is open.
- Ask for a performance trace with reload when you want to measure a fresh page load.
- Ask the agent to report what it found before it makes further changes.
What people use it for
- Debugging a page that throws JavaScript errors by reading console messages and evaluating DOM values.
- Finding failed 4xx or 5xx network requests on a page that will not load its content.
- Taking screenshots of a page at different viewport sizes for visual checks.
- Recording a performance trace of a reload to find slow-loading issues and layout shifts.
- Walking through a form on a site you own to check that fields and buttons respond.
Frequently asked questions
What is the chrome-devtools agent skill?
It is a set of instructions that teaches an AI agent to use the chrome-devtools MCP server to control and inspect a live Chrome browser. It covers navigation, clicking and form filling, debugging, screenshots and performance profiling.
Do I need to install anything else before using this skill?
Yes. The skill only gives instructions. You need the chrome-devtools MCP server installed and connected to Google Chrome, or the agent cannot control a browser.
Is the chrome-devtools skill free?
The skill is released under the MIT licence. This page does not state pricing for the MCP server or Chrome, so check those separately.
Where do I put the skill files?
Unzip the downloaded ZIP into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Can the agent run scripts from this skill?
The skill does not run scripts. It does use the network, and the agent can run JavaScript inside a page with evaluate_script, so review what it does on sensitive sites.
Is this skill a good alternative to a scraping tool?
Not for scraping. It is intended for debugging, QA and performance checks on sites you own or are allowed to test. For large-scale data collection, a dedicated scraping tool is a better fit, and the skill should not be used on sites you do not have permission to test.
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
This skill suits web developers and QA engineers who want an agent to inspect a live page, read errors, capture screenshots and profile load performance, provided they already have the chrome-devtools MCP server running with Chrome. It is a poor fit if you only need static code changes, if you cannot set up the MCP server, or if you want to automate sites you do not have permission to test.
Download the skill