Use Chrome DevTools MCP to inspect live pages, reproduce browser issues, automate user flows, inspect console and network activity, and verify frontend fixes in a real Chrome session.
SkillScore77Maintained
Automatic
◆QA & Test Engineering pack
Last verified 9/3/2026
What it changes
Passed 14 of 18 test cases with the skill, and 13 of 18 without it.
Without skill73%
With skill77%
Checks it passed that the model alone missed
The response directs checking console messages or network requests after capturing initial page structure.
The response instructs taking a fresh snapshot following navigation before performing further element interactions.
The response instructs repeating the exact user path and comparing visible state alongside console and network results.
3 fixed14 passed either way3 still failing2 broke
Pass-rate lift
+5 pp
Tokens
-27%
Agent turns
0%
Response time
-34%
Model gemini-3.6-flashMeasured 9/3/2026v117 of 22 cases passed with skill · 18 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
I just clicked a link that navigated to a new view in the single-page application. Before clicking the next button, what step should I take to ensure I target valid element references?
What was checked, without and with the skill
Checked
Without skill
With skill
The response instructs taking a fresh snapshot following navigation before performing further element interactions.
Missed
Passed
case-06 · gemini-3.6-flash · 9/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md33 linessingle file
Use this skill when source inspection alone is not enough and Codex should operate a live browser.
Default Flow
Open or reuse a page with new_page or navigate_page.
Wait for the relevant UI if needed with wait_for.
Capture structure with take_snapshot.
Interact using uid values from the snapshot.
Inspect the relevant evidence surface:
list_console_messages or get_console_message for runtime errors
list_network_requests or get_network_request for API and asset failures
take_screenshot when visible state matters
evaluate_script for targeted DOM or app-state checks
Re-run the smallest verification path after each code change.
Working Rules
Prefer take_snapshot over screenshots for navigation and form work.
Take a fresh snapshot after navigation or DOM-changing actions.
Keep console and network queries filtered or paginated to reduce noise.
Save large artifacts to disk with filePath when the tool supports it.
If you need an already-running browser session, point the MCP server at it with --browser-url=... instead of launching a fresh instance.
Common Patterns
Reproduce a bug: navigate, wait, snapshot, interact, inspect console and network.
Verify a fix: repeat the exact user path and compare visible state plus console and request results.
Gather evidence: capture a screenshot, the failing request, and the matching console message.
When Not to Use It
If the question is purely about static source code and no live browser state matters.
If the MCP server is running in a restricted mode that does not expose the tools you need.