Skip to main content
Glama
Himangguo
by Himangguo

chrome-devtools-mcp

让 AI 通过 MCP 协议直接调用 Chrome DevTools Protocol(CDP),获取浏览器运行时 DOM 结构、计算样式、控制台日志、网络请求等信息,彻底解决 AI 只能读源码、无法获取真实运行时上下文的问题。

前置条件

  • Node.js 18+

  • Chrome 浏览器

Related MCP server: Chrome DevTools MCP

安装

npm install
npm run build

启动 Chrome(调试模式)

/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'

OpenCode 集成

~/.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

工具清单(11 个)

DOM 工具

工具

说明

list_tabs

列出所有可调试的 Tab(type=page)

query_selector

按 CSS 选择器查找元素,返回 tagName/id/classList

get_dom_tree

获取 DOM 子树,selector 可选,depth 最大 10

get_ancestors

获取元素完整祖先链(含指定样式 + 自动诊断),sticky/overflow/z-index 问题根因定位专用

CSS 工具

工具

说明

get_computed_styles

获取元素计算样式,返回 summary(布局关键属性)+ all(完整属性)

get_matched_styles

获取元素匹配的 CSS 规则列表(含来源文件、行号)

get_box_model

获取元素盒模型尺寸(width/height/margin/padding/border/content)

Runtime 工具

工具

说明

get_layout_metrics

获取页面视口/内容尺寸(viewportWidth/viewportHeight/contentWidth/contentHeight)

evaluate_js

在页面上下文执行 JS 表达式,自动拦截 cookie/localStorage/fetch 等敏感 API

get_console_logs

获取控制台日志,支持按 level 过滤(log/info/warn/error/debug)

Network 工具

工具

说明

get_network_requests

获取网络请求记录,支持 url_filter 关键词过滤,返回 method/status/duration/headers

注意get_console_logsget_network_requests 只收集 MCP 连接后的事件,连接前的记录无法追溯。

智能诊断(Phase 3)

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 → 层叠上下文异常

典型用法

诊断 sticky 失效

1. 调用 get_computed_styles(".sticky-header")
   → summary.position: sticky(确认已设置)

2. 调用 get_ancestors(".sticky-header")
   → diagnosis.summary: "发现 1 个阻断性问题。第3层 <div.el-scrollbar__wrap> overflow:hidden"
   → 根因定位完成,无需进一步推理

排查 JS 错误

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.cookielocalStoragesessionStoragefetchXMLHttpRequest

  • MCP Server 仅本地运行,数据不出 localhost

  • 仅供开发环境使用,勿集成到生产流程

Available Tools

11 tools
evaluate_jsA

在页面上下文中执行 JavaScript 表达式,返回执行结果。禁止访问 cookie/localStorage/fetch 等敏感 API。

ParametersJSON Schema
NameRequiredDescriptionDefault
expressionYes要执行的 JavaScript 表达式

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden. It discloses that execution happens in page context, returns the result, and prohibits access to sensitive APIs like cookie/localStorage/fetch. This is valuable safety context, though it does not mention potential side effects, promise handling, or error behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences: the first states the core action, the second states a critical restriction. It is front-loaded, concise, and every sentence serves a purpose with no unnecessary information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple one-parameter tool with no output schema or annotations, the description covers the action, the return value, and a key constraint. It omits details about return formatting, async scenarios, or side effects, but these are less critical given the tool's straightforward nature. It is reasonably complete for its complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with the only parameter 'expression' described as 'the JavaScript expression to execute.' The description does not add any extra syntax, format, or usage details beyond what the schema already provides, so it meets the baseline without enhancing parameter understanding.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool executes JavaScript expressions in the page context and returns the result. This specific verb+resource combination distinguishes it from sibling tools that read DOM metrics or inspect tabs, which do not execute arbitrary code.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The context is clear: use this tool when you need to run JavaScript in the page. However, it does not explicitly mention alternatives or exclusions relative to sibling tools, though the prohibition on sensitive APIs provides a form of 'when not to do X' guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_ancestorsA

获取元素的完整祖先链,每个祖先节点包含指定样式属性值。专为 sticky/overflow/z-index 层叠问题根因定位设计。

ParametersJSON Schema
NameRequiredDescriptionDefault
maxDepthNo最多追溯几层祖先,默认 20,最大 20
selectorYesCSS 选择器,定位目标元素
stylePropertiesNo要在每个祖先节点查询的样式属性,默认 ["overflow","position","transform","will-change","contain"]

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the burden of behavioral disclosure. It states the operation is to '获取' (get) the ancestor chain, implying a read-only action, and mentions that each node contains specified style property values. However, it does not clarify whether these are computed styles or inline styles, nor does it mention behavior around max depth or error cases. The purpose is clear, but transparency is limited.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is only two sentences, front-loaded with the tool's primary purpose and then a second sentence stating its intended use case. There is no redundant or filler content; every word contributes to understanding the tool's function and rationale.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a read-only get tool with no output schema, the description adequately covers the key aspects: what it does, what data it returns (ancestor chain with style property values), and its intended use case. It does not detail the exact return structure or potential edge cases, but these are not necessary for a simple query tool. The contextual information provided is sufficient for an agent to invoke it appropriately.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema already describes all three parameters with 100% coverage, making the schema self-sufficient. The description adds context about the use of styleProperties (each ancestor includes specified style property values) but does not elaborate on selector or maxDepth beyond what the schema provides. With full schema coverage, the baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses the specific verb '获取' (get) with a clear resource: the complete ancestor chain of an element, including style property values. It also explicitly states the tool's specialized use case for diagnosing sticky/overflow/z-index stacking issues, which distinguishes it from siblings like get_computed_styles or get_dom_tree.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear when-to-use guidance by indicating the tool is '专为 sticky/overflow/z-index 层叠问题根因定位设计' (specifically designed for locating root causes of sticky/overflow/z-index stacking issues). However, it does not explicitly mention when not to use it or name alternative tools, leaving some gap in guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_box_modelC

获取元素盒模型尺寸(width/height/margin/padding/border/content)

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS 选择器

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses the type of data returned (dimensions list) but does not specify the return format, behavior on missing selector, whether it returns the first matching element, or any potential side effects. Since it's a 'get' operation, read-only is implied, but not explicitly stated.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence, front-loaded with the action and resource, and lists all relevant dimensions concisely in parentheses. Every word earns its place with no filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The tool has no output schema, no annotations, and only one required parameter, making the description the primary source of information. It lacks return structure, edge cases, and differentiation from 'get_layout_metrics'. This is insufficient for an agent to reliably predict the tool's behavior.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%: the single 'selector' parameter is documented as 'CSS 选择器'. The tool description adds no extra information about the parameter, so it relies entirely on the schema. This meets the baseline of 3.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's function: '获取元素盒模型尺寸' (get element box model dimensions) and lists the specific dimensions (width/height/margin/padding/border/content). This is a specific verb+resource construction. However, it does not explicitly differentiate from the sibling 'get_layout_metrics', which may overlap.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No usage guidance is provided. There is no mention of when to use this tool versus alternatives, nor any exclusions or prerequisites. Given the sibling 'get_layout_metrics', an explicit distinction would help, but it is absent.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_computed_stylesA

获取元素所有计算样式(浏览器最终计算值),返回完整的 property: value 键值对

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS 选择器

TDQS

A3.8/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden. It adds meaningful behavioral context by explaining 'browser final computed values' and that it returns a complete set of property:value pairs, which goes beyond the tool name. It does not explicitly state read-only safety, but as a getter, this is strongly implied and the description is sufficiently transparent for a simple read operation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence that states the tool's purpose and return format without any unnecessary words. It is front-loaded and contains zero waste.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple tool with one parameter and no output schema, the description adequately explains what is returned (complete property:value pairs for computed styles). It does not mention edge cases like multiple matching elements or error behavior, but these are not critical for a tool of this simplicity. The description is complete enough for an agent to use it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema covers 100% of the parameter (selector, described as 'CSS selector'). The description adds no additional meaning about the selector beyond implying it targets an element, which is already evident from the schema and tool name. Baseline of 3 is appropriate since the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool gets all computed styles for an element with a specific verb and resource, and explicitly mentions it returns complete property:value pairs. This distinguishes it from sibling tools like get_matched_styles (matched rules) and get_layout_metrics (layout measurements).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives, nor any exclusions or prerequisites. It is implied that you use it when you need computed styles, but no explicit context or comparison is provided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_console_logsC

获取页面控制台日志(MCP 连接后产生的日志)

ParametersJSON Schema
NameRequiredDescriptionDefault
levelNo日志级别过滤,不传则返回全部
limitNo返回条数上限,默认 50,最大 200

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must carry the full burden. It mentions 'MCP 连接后产生的日志,' which hints that only logs after the MCP connection are returned, but it does not disclose return format, ordering, potential side effects, or other traits like whether logs are cleared on retrieval. This is insufficient for a tool with no annotation support.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that is concise and front-loaded with the core purpose. No fluff or redundant information. It earns its place by clearly stating the tool's function in minimal space.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema and no annotations, the description needs to explain behavior and return expectations. It only provides a terse statement of purpose and a vague qualifier about MCP connection. For a tool that returns console logs, it lacks details about the log structure, events, or limitations, making it incomplete for an agent to use confidently.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema provides 100% coverage for both parameters (level and limit) with descriptions in the schema itself. The tool description does not add any parameter information beyond what the schema already states, so the baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool gets page console logs ('获取页面控制台日志'), using a specific verb and resource. It is distinct from sibling tools like get_network_requests, though it does not explicitly name alternatives. The parenthetical 'MCP 连接后产生的日志' adds a scoping detail but could be clearer.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no guidance on when to use this tool versus alternatives. It does not mention that network logs are handled elsewhere or provide any context for choosing console logs over other inspection tools. The description only says what it does, not when to use it.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_dom_treeA

获取 DOM 子树结构,可按选择器定位根节点,depth 控制层级深度(最大 10)

ParametersJSON Schema
NameRequiredDescriptionDefault
depthNo子树深度,默认 3,最大 10
selectorNoCSS 选择器(可选,不传则从文档根开始)

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the burden for behavioral disclosure. It adds useful details like maximum depth (10) and default depth (3), and that selector is optional. However, it does not describe the return format, potential side effects, or edge cases (e.g., empty selector match). This is moderate transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence that covers purpose and key parameters without waste. Every phrase contributes meaning.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a relatively simple read tool with only two optional parameters and no output schema, the description is sufficient to guide selection and invocation. It covers main behavior and constraints (depth max 10, selector default). Minor gaps like return structure are not critical given the tool's simplicity and schema coverage.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% for both parameters (depth, selector), and the schema already provides clear descriptions. The main description essentially restates what the schema says without adding new semantic meaning. Baseline 3 is appropriate since schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's function: '获取 DOM 子树结构' (get DOM subtree structure), with a specific verb and resource. It also mentions key capabilities (selector for root node, depth control) and is distinct from sibling tools like get_ancestors and query_selector.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage context: you can specify a selector to start from a particular node and depth to control recursiveness. However, it does not explicitly state when to use this tool over alternatives (e.g., get_ancestors, query_selector) or provide exclusions. Usage is implied but not fully guided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_layout_metricsA

获取页面视口尺寸和内容尺寸(viewportWidth/viewportHeight/contentWidth/contentHeight)

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description must carry the burden of behavioral disclosure. It clearly implies a read-only operation via 'get' and specifies the returned properties, but it does not explicitly state that it has no side effects or what the units are. The property list adds transparency, but more context (e.g., content size meaning the scrollable document area) would be better.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single sentence that is front-loaded with the verb and resource, and the parenthetical list of properties adds specificity without padding. No wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple getter with no output schema, the description is largely sufficient. It names all required return fields (viewportWidth/viewportHeight/contentWidth/contentHeight). However, it does not clarify the semantics of 'content size' (e.g., whether it refers to the full scrollable area), which could cause ambiguity for an AI agent.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool has zero parameters, so the schema is trivial. The description provides relevant context by naming the returned metrics, which indirectly explains why no input is needed. Baseline for 0 params is 4, and this description meets that baseline.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb (获取/get) with a clear resource (页面视口尺寸和内容尺寸/page viewport and content size) and even lists the exact property names. This distinguishes it from sibling tools like get_box_model or get_computed_styles, which focus on element-specific metrics.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives, such as get_box_model for element dimensions or get_dom_tree for overall structure. The description implies its use for page-level metrics but does not state exclusions or conditions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_matched_stylesA

获取元素匹配的 CSS 规则列表,包含选择器、来源文件、行号和所有属性

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS 选择器

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of transparency. It does disclose the content of the returned list (selector, source file, line number, properties), which adds value. However, it does not clarify behavior for ambiguous inputs (e.g., selector matching multiple elements), error handling, or any limitations. The relationship between the 'selector' parameter and the 'element' mentioned is also unclear.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence in Chinese that front-loads the action and includes essential output details. There is no redundant information, and every element (verb, resource, output contents) earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (one parameter, no output schema), the description covers the core purpose and what is returned. However, it lacks any usage guidance relative to the many sibling tools, and the ambiguity about whether the selector identifies an element or matches multiple elements leaves a minor gap in understanding the exact behavior.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%: the only parameter, 'selector', is described as 'CSS 选择器' (CSS selector). The description adds no additional meaning beyond the schema, so the baseline 3 applies. The parameter's purpose is clear, but no extra syntax or formatting details are given.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's function: retrieving a list of CSS rules matched by an element, including specific fields (selectors, source files, line numbers, and all properties). The verb 'get' and resource 'matched styles' is specific, and it distinguishes itself from sibling tools like 'get_computed_styles' by focusing on matched rules rather than computed values.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no explicit guidance on when to use this tool versus alternatives such as 'get_computed_styles' or 'query_selector'. The usage is implied by the tool's purpose, but there is no mention of recommended scenarios, exclusions, or how it relates to sibling tools.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_network_requestsA

获取页面网络请求记录(MCP 连接后发生的请求),可按 URL 关键词过滤

ParametersJSON Schema
NameRequiredDescriptionDefault
limitNo返回条数上限,默认 50,最大 200
url_filterNoURL 关键词过滤(包含匹配),不传则返回全部

TDQS

A3.7/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description bears the full burden of behavioral disclosure. It usefully notes that only requests after the MCP connection are included, which is a non-obvious temporal constraint. However, it does not explicitly state read-only behavior, retention limits, side effects, or return format, leaving gaps.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence with zero redundant words. It immediately states the core function, then adds a useful filtering ability, making it concise and well structured for quick comprehension.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The tool is simple with only two optional parameters and no output schema, but the description does not explain what fields are returned (e.g., URL, status, timing) or whether results are paginated. The 'after MCP connection' note adds context, yet the absence of return-format guidance leaves the description incomplete for agent use.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% for both parameters (limit and url_filter), so the schema already fully describes them. The description adds a brief mention of URL keyword filtering but no additional depth or syntax beyond what the schema provides, matching the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb+resource structure ('Get page network request records') and clearly distinguishes this from sibling tools like get_console_logs and get_dom_tree by focusing on network activity. It also adds a precise scope ('requests that occurred after MCP connection'), which makes the tool's purpose unambiguous.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies the tool is for inspecting network requests but does not explicitly state when to use it over alternatives or mention exclusion cases. It mentions URL filtering as a usage option, but there is no 'when not to use' or comparison with get_console_logs or other sibling tools.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_tabsA

列出当前浏览器所有可调试的 Tab(仅显示 page 类型)

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the transparency burden. It discloses the scope ('current browser') and the behavioral filter ('only page type'), which fully describes the tool's behavior for a non-destructive list operation. There is no hidden side effect or additional trait that needs disclosure.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence that includes the action, scope, and filter. Every word earns its place; there is no redundancy or filler, making it highly concise and well-structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (no parameters, no output schema, no complex side effects), the description is sufficiently complete. It defines the exact scope (current browser, page-type tabs) and the action (list), which fully prepares an agent to invoke the tool correctly. No additional context is needed.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool has zero parameters, and the schema coverage is 100% (empty object). The baseline for 0-param tools is 4, and the description correctly adds no unnecessary parameter information while still conveying the tool's purpose and constraints.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'list' and the resource 'debuggable Tabs in current browser', and includes a specific filter ('only page type'). This distinguishes it from sibling DOM inspection tools, which focus on page elements rather than tabs.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear context for when to use the tool (enumerate browser tabs) and notes the page-type filter. It does not explicitly name alternatives or state when not to use it, but the tool's unique role among siblings makes the usage obvious. This aligns with 'clear context, no exclusions'.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

query_selectorA

在 DOM 中查找匹配选择器的所有元素,返回元素基本信息(tagName/id/classList)

ParametersJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS 选择器

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the disclosure burden. It transparently conveys a read-only operation ('find', 'return') and specifies output fields and that all matching elements are returned. It does not address edge cases like invalid selectors, but for a simple DOM query this is adequate.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence, front-loaded with the action verb 'find', and contains no redundant wording. It efficiently conveys the tool's purpose and output.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple tool with one parameter and no output schema, the description sufficiently covers purpose and return shape (tagName/id/classList for all matches). It lacks explicit mention of the return type (e.g., array) or behavior on zero matches, but the core information is present and unambiguous.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema already fully documents the 'selector' parameter at 100% coverage (description: 'CSS 选择器'). The description adds little semantic detail beyond restating that the selector is used for matching, so the baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool finds all DOM elements matching a CSS selector and returns basic element info (tagName, id, classList). This distinguishes it from sibling tools like get_dom_tree (whole tree) or get_computed_styles (styles).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for locating elements by selector, but does not explicitly state when to use it over alternatives like get_dom_tree or get_computed_styles, nor when not to use it. With a list of sibling tools provided, adding explicit alternative guidance would improve this dimensions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 11 tool updatesv1.0.0
    • First observedevaluate_js
    • First observedget_ancestors
    • First observedget_box_model
    • First observedget_computed_styles
    • First observedget_console_logs
    • First observedget_dom_tree
    • First observedget_layout_metrics
    • First observedget_matched_styles
    • First observedget_network_requests
    • First observedlist_tabs
    • First observedquery_selector

TDQS

A3.8/5.0
Disambiguation5/5

Each tool targets a distinct aspect of browser inspection: layout, tabs, DOM query, DOM tree, ancestors, styles, box model, JS execution, console, and network. Even the two style-related tools (computed vs. matched) are clearly differentiated.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern (get_, list_, query_, evaluate_), making the API predictable and easy to reason about. No mixed conventions or vague verbs.

Tool Count5/5

11 tools is well-scoped for a browser debugging server. Each tool covers a distinct capability without unnecessary overlap, and the count feels appropriate for the intended breadth.

Completeness4/5

The surface covers DOM, CSS, layout, JS evaluation, console, and network inspection, which are core for debugging. Missing interaction features (e.g., click, navigate, modify styles) suggest a read-only inspector, but that's consistent with the tool descriptions; minor gaps like screenshots or performance tracking could be added.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI coding assistants to control and inspect a live Chrome browser for automation, debugging, performance analysis, network monitoring, and DOM interaction through Chrome DevTools Protocol.
    3,288,165
    Apache 2.0
  • -
    license
    Not graded
    quality
    Not graded
    maintenance
    Enables AI coding assistants to control and inspect a live Chrome browser for automated debugging, performance analysis, and web interaction. It leverages Puppeteer and Chrome DevTools to provide capabilities like network monitoring, console logging, and automated browser actions.
    -

Latest Blog Posts

MCP directory API

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