Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@chrome-devtools-mcp Diagnose why the sticky header is not staying fixed"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
让 AI 通过 MCP 协议直接调用 Chrome DevTools Protocol（CDP），获取浏览器运行时 DOM 结构、计算样式、控制台日志、网络请求等信息，彻底解决 AI 只能读源码、无法获取真实运行时上下文的问题。
Node.js 18+
Chrome 浏览器
Related MCP server: Chrome DevTools MCP
npm install
npm run build/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/chrome-debug-profile推荐添加 alias 到 ~/.zshrc，之后直接用 chrome-debug 启动：
alias chrome-debug='/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug-profile'在 ~/.config/opencode/opencode.json 中添加：
{
"mcp": {
"chrome-devtools": {
"type": "local",
"command": ["node", "/path/to/chrome-devtools-mcp/dist/index.js"],
"env": {
"CHROME_DEBUGGING_PORT": "9222"
},
"enabled": true
}
}
}注意：
command必须是数组格式，不能是字符串。
MCP server 的所有 CDP 调用日志写入 ~/chrome-devtools-mcp.log，在任意终端运行以下命令实时查看：
tail -f ~/chrome-devtools-mcp.log工具 | 说明 |
| 列出所有可调试的 Tab（type=page） |
| 按 CSS 选择器查找元素，返回 tagName/id/classList |
| 获取 DOM 子树， |
| 获取元素完整祖先链（含指定样式 + 自动诊断），sticky/overflow/z-index 问题根因定位专用 |
工具 | 说明 |
| 获取元素计算样式，返回 |
| 获取元素匹配的 CSS 规则列表（含来源文件、行号） |
| 获取元素盒模型尺寸（width/height/margin/padding/border/content） |
工具 | 说明 |
| 获取页面视口/内容尺寸（viewportWidth/viewportHeight/contentWidth/contentHeight） |
| 在页面上下文执行 JS 表达式，自动拦截 cookie/localStorage/fetch 等敏感 API |
| 获取控制台日志，支持按 level 过滤（log/info/warn/error/debug） |
工具 | 说明 |
| 获取网络请求记录，支持 |
注意：
get_console_logs和get_network_requests只收集 MCP 连接后的事件，连接前的记录无法追溯。
get_ancestors 会自动在返回结果里附带 diagnosis 字段，无需 AI 额外推理即可定位根因：
{
"ancestors": [...],
"diagnosis": {
"hints": [
{
"depth": 2,
"tagName": "section",
"classList": ["arco-layout"],
"issue": "position:sticky 失效 — 祖先节点 overflow 非 visible/unset 会阻断 sticky",
"property": "overflow",
"value": "hidden",
"impact": "blocking"
}
],
"summary": "发现 1 个阻断性问题。第2层 <section> overflow:hidden"
}
}impact 三级：blocking（直接阻断）/ likely（大概率影响）/ possible（可能有影响）
检测覆盖：
overflow: hidden/scroll/auto/clip → sticky 失效
transform 非 none → fixed/sticky 失效
will-change: transform/opacity/filter → 层叠上下文异常
contain: layout/paint/strict/content → fixed 失效
filter / backdrop-filter → 层叠上下文异常
1. 调用 get_computed_styles(".sticky-header")
→ summary.position: sticky（确认已设置）
2. 调用 get_ancestors(".sticky-header")
→ diagnosis.summary: "发现 1 个阻断性问题。第3层 <div.el-scrollbar__wrap> overflow:hidden"
→ 根因定位完成，无需进一步推理1. 调用 get_console_logs(level="error")
→ 获取页面 error 级别日志
2. 调用 evaluate_js("document.querySelector('.btn').disabled")
→ 获取按钮当前的 disabled 状态1. 调用 get_network_requests(url_filter="/api/cooperation")
→ 查看合作相关接口的请求状态和响应时间调试端口绑定 127.0.0.1，禁止公网暴露
evaluate_js 自动拦截 document.cookie、localStorage、sessionStorage、fetch、XMLHttpRequest
MCP Server 仅本地运行，数据不出 localhost
仅供开发环境使用，勿集成到生产流程
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Live browser debugging for AI assistants — DOM, console, network via MCP.
A paid remote MCP for AI agent browser DevTools MCP, built to return verdicts, receipts, usage logs,
Provides cloud browser automation capabilities using Stagehand and Browserbase, enabling LLMs to i…
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Himangguo/chrome-devtools-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
