with one click
browser-devtools-investigation
// Use Chrome DevTools MCP for browser debugging beyond CSS/layout verification
// Use Chrome DevTools MCP for browser debugging beyond CSS/layout verification
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | browser-devtools-investigation |
| description | Use Chrome DevTools MCP for browser debugging beyond CSS/layout verification |
Use this skill when agents need browser access for non-layout tasks, such as reproducing remote bugs, inspecting runtime/network behavior, validating interaction flows, or prototyping scraping-oriented extraction logic.
Keep frontend-visual-verification for CSS/layout issues. Use this skill for broader browser investigation.
The chrome-devtools MCP server starts Chromium lazily when a DevTools tool is used. Use this command only for manual troubleshooting or when you need to pre-open a specific URL:
opencode-ensure-chromium-devtools
Set OPENCODE_DEVTOOLS_URL when you need that command to open a specific remote target first.
Define the claim or failure precisely.
Reproduce in browser and capture baseline evidence.
Inspect the likely failure surface.
chrome-devtools_list_console_messages, chrome-devtools_get_console_messagechrome-devtools_list_network_requests, chrome-devtools_get_network_requestchrome-devtools_take_snapshot, chrome-devtools_evaluate_scriptValidate hypothesis with the smallest useful check.
Re-verify after changes (or after applying a workaround).
When chrome-devtools MCP is active, common tools include:
chrome-devtools_new_page, chrome-devtools_navigate_page, chrome-devtools_list_pages, chrome-devtools_select_page, chrome-devtools_close_pagechrome-devtools_click, chrome-devtools_fill, chrome-devtools_fill_form, chrome-devtools_press_key, chrome-devtools_type_text, chrome-devtools_drag, chrome-devtools_upload_filechrome-devtools_take_snapshot, chrome-devtools_evaluate_script, chrome-devtools_take_screenshotchrome-devtools_list_console_messages, chrome-devtools_get_console_message, chrome-devtools_list_network_requests, chrome-devtools_get_network_requestchrome-devtools_wait_for, chrome-devtools_emulate, chrome-devtools_resize_pagechrome-devtools_lighthouse_audit, chrome-devtools_performance_start_trace, chrome-devtools_performance_stop_trace, chrome-devtools_performance_analyze_insight, chrome-devtools_take_memory_snapshotchrome-devtools_take_snapshot and chrome-devtools_evaluate_scriptFor each investigation, report:
Claim/Issue: [what was investigated]
Path: [URL + minimal reproduction steps]
Result: pass/fail/inconclusive
Evidence: [1-2 key console/network/DOM observations]
Keep output concise. Return synthesized evidence only; do not dump raw DevTools transcripts.