chrome-devtools-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chrome DevTools Skill

使用 Chrome DevTools Protocol 进行网页数据获取和分析。

Use Chrome DevTools Protocol for web page data acquisition and analysis.

工作流程（AI 自动执行）

Workflow (Automatically Executed by AI)

当用户使用此 skill 时，AI 应该自动完成以下所有步骤，而不是让用户手动执行：

When users use this skill, the AI should automatically complete all the following steps instead of asking users to perform them manually:

1. 自动启动 Chrome 远程调试

1. Automatically Start Chrome Remote Debugging

AI 自动检测操作系统并启动 Chrome：

Windows:

bash

start chrome --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-devtools-profile" [URL]

重要提示: 使用固定的
--user-data-dir
（如
chrome-devtools-profile
），不要每次使用不同的文件夹。这样 Chrome 会记住登录状态、Cookie 和缓存，下次启动更快。

macOS:

bash

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir="$TMPDIR/chrome-profile-stable" [URL]

Linux:

bash

google-chrome --remote-debugging-port=9222 --user-data-dir="/tmp/chrome-profile-stable" [URL]

The AI automatically detects the operating system and starts Chrome:

Windows:

bash

start chrome --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-devtools-profile" [URL]

Important Note: Use a fixed
--user-data-dir
(e.g.,
chrome-devtools-profile
) instead of a different folder each time. This way Chrome will remember login states, cookies, and cache, making subsequent starts faster.

macOS:

bash

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir="$TMPDIR/chrome-profile-stable" [URL]

Linux:

bash

google-chrome --remote-debugging-port=9222 --user-data-dir="/tmp/chrome-profile-stable" [URL]

2. 自动启动 MCP 服务器

2. Automatically Start MCP Server

AI 自动启动 MCP 服务器（在后台运行）：

bash

npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222

The AI automatically starts the MCP server (runs in the background):

bash

npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222

3. 执行用户请求的操作

3. Execute the Operation Requested by the User

使用以下 MCP 工具完成用户任务：

```
mcp__chrome-devtools__navigate_page
```
- 导航到页面
```
mcp__chrome-devtools__wait_for
```
- 等待页面加载
```
mcp__chrome-devtools__take_snapshot
```
- 获取页面快照
```
mcp__chrome-devtools__evaluate_script
```
- 执行 JavaScript 提取数据
```
mcp__chrome-devtools__screenshot
```
- 截取屏幕截图

mcp__chrome-devtools__list_network_requests

- 列出网络请求

Complete user tasks using the following MCP tools:

```
mcp__chrome-devtools__navigate_page
```
- Navigate to a page
```
mcp__chrome-devtools__wait_for
```
- Wait for page loading
```
mcp__chrome-devtools__take_snapshot
```
- Get page snapshot
```
mcp__chrome-devtools__evaluate_script
```
- Execute JavaScript to extract data
```
mcp__chrome-devtools__screenshot
```
- Take screenshots

mcp__chrome-devtools__list_network_requests

- List network requests

标准操作流程（AI 使用）

Standard Operating Procedure (For AI Use)

当用户要求打开/分析/抓取某个网页时，AI 按以下顺序执行：

1. 启动 Chrome（调试模式）
2. 启动 MCP 服务器
3. 导航到目标 URL
4. 等待页面加载
5. 执行用户请求的操作（截图/提取数据/监控网络等）
6. 返回结果给用户

When users request to open/analyze/crawl a web page, the AI executes in the following order:

1. Start Chrome (in debugging mode)
2. Start MCP server
3. Navigate to the target URL
4. Wait for page loading
5. Perform the operation requested by the user (screenshot/data extraction/network monitoring, etc.)
6. Return results to the user

数据提取技巧

Data Extraction Techniques

提取列表数据:

javascript

() => {
  const items = document.querySelectorAll(".item");
  return Array.from(items).map((item) => ({
    title: item.querySelector(".title")?.innerText,
    link: item.querySelector("a")?.href,
  }));
};

提取表格数据:

javascript

() => {
  const rows = document.querySelectorAll("table tr");
  return Array.from(rows).map((row) =>
    Array.from(row.querySelectorAll("td, th")).map((cell) => cell.innerText)
  );
};

Extract List Data:

javascript

() => {
  const items = document.querySelectorAll(".item");
  return Array.from(items).map((item) => ({
    title: item.querySelector(".title")?.innerText,
    link: item.querySelector("a")?.href,
  }));
};

Extract Table Data:

javascript

() => {
  const rows = document.querySelectorAll("table tr");
  return Array.from(rows).map((row) =>
    Array.from(row.querySelectorAll("td, th")).map((cell) => cell.innerText)
  );
};

常见用例

Common Use Cases

打开网页并截图: 启动 Chrome → 导航 → 截图 → 返回结果
商品信息抓取: 导航 → 滚动加载 → 提取列表
表单自动化: 导航 → fill_form → click → wait_for
API 监控: 导航 → list_network_requests → get_network_request
性能分析: performance_start_trace → 操作 → performance_stop_trace

Open web page and take screenshot: Start Chrome → Navigate → Take screenshot → Return results
Product information crawling: Navigate → Scroll to load → Extract list
Form automation: Navigate → fill_form → click → wait_for
API monitoring: Navigate → list_network_requests → get_network_request
Performance analysis: performance_start_trace → Operation → performance_stop_trace

最佳实践

Best Practices

自动处理所有前置步骤 - 不要要求用户手动启动 Chrome 或 MCP 服务器
使用固定的用户数据目录 - 保持
```
--user-data-dir
```
一致，避免每次都重新加载
先用
```
take_snapshot
```
了解页面结构
复杂提取用
```
evaluate_script
```
执行 JavaScript
确保返回 JSON 可序列化的数据
处理动态内容时使用
```
wait_for
```

Automatically handle all pre-steps - Do not ask users to manually start Chrome or MCP server
Use a fixed user data directory - Keep
```
--user-data-dir
```
consistent to avoid reloading every time
Use
```
take_snapshot
```
first to understand the page structure
Use
```
evaluate_script
```
to execute JavaScript for complex extraction
Ensure returned data is JSON-serializable
Use
```
wait_for
```
when handling dynamic content

技术原理

Technical Principles

Chrome DevTools Protocol (CDP) 通信方式

Chrome DevTools Protocol (CDP) Communication Methods

方式	协议	用途
HTTP	`http://127.0.0.1:9222/json/list`	获取页面列表、基本信息
WebSocket	`ws://127.0.0.1:9222/devtools/page/{pageId}`	实时控制页面、执行脚本

Method	Protocol	Usage
HTTP	`http://127.0.0.1:9222/json/list`	Get page list and basic information
WebSocket	`ws://127.0.0.1:9222/devtools/page/{pageId}`	Real-time page control and script execution

WebSocket 通信流程

WebSocket Communication Process

python

import asyncio
import websockets
import json

async def cdp_example():
    # 1. 连接到 Chrome DevTools WebSocket
    ws_url = "ws://127.0.0.1:9222/devtools/page/{pageId}"
    async with websockets.connect(ws_url) as ws:

        # 2. 启用 Runtime 域
        await ws.send(json.dumps({
            "id": 1,
            "method": "Runtime.enable"
        }))

        # 3. 执行 JavaScript
        await ws.send(json.dumps({
            "id": 2,
            "method": "Runtime.evaluate",
            "params": {
                "expression": "document.title",
                "returnByValue": True
            }
        }))

        # 4. 循环接收响应，匹配 id
        while True:
            msg = await ws.recv()
            data = json.loads(msg)
            if data.get('id') == 2:  # 匹配请求 id
                return data['result']['result']['value']

python

import asyncio
import websockets
import json

async def cdp_example():
    # 1. Connect to Chrome DevTools WebSocket
    ws_url = "ws://127.0.0.1:9222/devtools/page/{pageId}"
    async with websockets.connect(ws_url) as ws:

        # 2. Enable Runtime domain
        await ws.send(json.dumps({
            "id": 1,
            "method": "Runtime.enable"
        }))

        # 3. Execute JavaScript
        await ws.send(json.dumps({
            "id": 2,
            "method": "Runtime.evaluate",
            "params": {
                "expression": "document.title",
                "returnByValue": True
            }
        }))

        # 4. Loop to receive responses and match id
        while True:
            msg = await ws.recv()
            data = json.loads(msg)
            if data.get('id') == 2:  # Match request id
                return data['result']['result']['value']

关键注意事项

Key Notes

响应匹配: WebSocket 会收到多种消息（
```
consoleAPICalled
```
、
```
executionContextCreated
```
等），必须通过
```
id
```
匹配请求和响应
等待页面加载: 执行操作后使用
```
await asyncio.sleep(2)
```
或等待特定元素
编码问题: Windows 终端需要
```
sys.stdout.reconfigure(encoding='utf-8')
```
来正确显示中文

Response Matching: WebSocket receives various messages (such as
```
consoleAPICalled
```
,
```
executionContextCreated
```
, etc.), so you must match requests and responses via
```
id
```
Wait for Page Loading: Use
```
await asyncio.sleep(2)
```
or wait for specific elements after performing operations
Encoding Issues: Windows terminals require
```
sys.stdout.reconfigure(encoding='utf-8')
```
to display Chinese correctly

实战经验与踩坑记录

Practical Experience and Troubleshooting Records

问题 1: Windows 中文输出乱码

Problem 1: Garbled Chinese Output on Windows

现象: 抓取的中文内容显示为乱码或抛出

UnicodeEncodeError: 'gbk' codec can't encode character

原因: Windows 终端默认使用 GBK 编码，而 Python 输出 UTF-8 中文时会冲突解决: 在 Python 脚本开头添加编码配置：

python

import sys
sys.stdout.reconfigure(encoding='utf-8')

重要: 所有示例脚本（

baidu_search_example.py

、

cdp_helper.py

）都已添加此编码配置，直接运行不会产生乱码。

Phenomenon: Crawled Chinese content displays as garbled characters or throws

UnicodeEncodeError: 'gbk' codec can't encode character

Cause: Windows terminals use GBK encoding by default, which conflicts when Python outputs UTF-8 Chinese Solution: Add encoding configuration at the beginning of the Python script:

python

import sys
sys.stdout.reconfigure(encoding='utf-8')

Important: All sample scripts (

baidu_search_example.py

cdp_helper.py

) have added this encoding configuration, so running them directly will not cause garbled characters.

问题 2: HTML 字符实体转义

Problem 2: HTML Character Entity Escaping

现象: JavaScript 代码中的

=>

箭头函数在通过 JSON 传输时被转义为

=>

原因: JSON 标准会对某些字符进行 Unicode 转义解决: 这是正常现象，不影响实际执行。如果需要在 Python 中处理，可以使用：

python

import codecs
decoded = codecs.decode(string, 'unicode_escape')

Phenomenon: The

=>

arrow function in JavaScript code is escaped as

=>

during JSON transmission Cause: JSON standard escapes certain Unicode characters Solution: This is normal and does not affect actual execution. If you need to handle it in Python, you can use:

python

import codecs
decoded = codecs.decode(string, 'unicode_escape')

问题 3: 页面 ID 获取

Problem 3: Page ID Acquisition

现象: 不知道当前页面的 WebSocket URL 解决: 通过 HTTP 接口获取页面列表：

bash

curl -s http://127.0.0.1:9222/json/list

然后提取

webSocketDebuggerUrl

字段

注意: 页面 ID 是动态生成的，每次启动 Chrome 都会变化。应该在代码中动态获取而不是硬编码：

python

import urllib.request
import json

def get_ws_url():
    req = urllib.request.Request('http://127.0.0.1:9222/json/list')
    with urllib.request.urlopen(req) as response:
        pages = json.loads(response.read().decode())
    return pages[0]['webSocketDebuggerUrl'] if pages else None

Phenomenon: Unknown WebSocket URL of the current page Solution: Get the page list via HTTP interface:

bash

curl -s http://127.0.0.1:9222/json/list

Then extract the

webSocketDebuggerUrl

field

Note: Page IDs are dynamically generated and change every time Chrome starts. You should get them dynamically in code instead of hardcoding:

python

import urllib.request
import json

def get_ws_url():
    req = urllib.request.Request('http://127.0.0.1:9222/json/list')
    with urllib.request.urlopen(req) as response:
        pages = json.loads(response.read().decode())
    return pages[0]['webSocketDebuggerUrl'] if pages else None

问题 4: Windows 等待命令跨平台兼容性问题

Problem 4: Cross-Platform Compatibility of Windows Wait Commands

现象: 在 Git Bash 中使用

timeout /t 3 /nobreak

报错

invalid time interval

原因:

timeout

是 Windows CMD 命令，在 Bash 中语法不兼容解决: 使用跨平台的等待方案：

bash

undefined

Phenomenon: Using

timeout /t 3 /nobreak

in Git Bash reports

invalid time interval

Cause:

timeout

is a Windows CMD command, which is incompatible with Bash syntax Solution: Use cross-platform wait solutions:

bash

undefined

Windows CMD

timeout /t 3 /nobreak >nul

Git Bash / Linux

sleep 3

跨平台通用（Windows）

Cross-platform universal (Windows)

ping -n 4 127.0.0.1 > nul

undefined

ping -n 4 127.0.0.1 > nul

undefined

问题 5: Claude Code 文件写入限制

Problem 5: Claude Code File Writing Restrictions

现象: 直接使用 Write 工具创建新文件时提示 "File has not been read yet" 原因: Claude Code 要求必须先读取文件才能写入（安全机制）解决:

先使用 Read 工具读取文件（如果不存在会报错，需要用 Bash 创建空文件）
或者使用 Bash 的
```
echo
```
或
```
cat
```
命令直接写入
或者使用 Python 脚本动态生成并执行代码

Phenomenon: Prompt "File has not been read yet" appears when directly using the Write tool to create a new file Cause: Claude Code requires reading the file first before writing (security mechanism) Solution:

First use the Read tool to read the file (if it does not exist, an error will be reported, so you need to create an empty file with Bash)
Or use Bash's
```
echo
```
or
```
cat
```
command to write directly
Or use Python scripts to dynamically generate and execute code

问题 6: 动态内容提取不完整

Problem 6: Incomplete Dynamic Content Extraction

现象: 提取的搜索结果中某些字段（如摘要）为空原因:

页面使用了动态加载，需要滚动才能显示全部内容
不同网站使用不同的 class 名称
某些内容是异步加载的

解决:

使用多个选择器匹配：

javascript

const abstract = item.querySelector('.c-abstract, .abstract, [class*="abstract"]')?.innerText;

滚动页面加载更多内容：

javascript

window.scrollTo(0, document.body.scrollHeight);

增加等待时间确保异步内容加载完成

Phenomenon: Some fields (such as abstracts) in crawled search results are empty Cause:

The page uses dynamic loading and requires scrolling to display all content
Different websites use different class names
Some content is loaded asynchronously

Solution:

Use multiple selectors for matching:

javascript

const abstract = item.querySelector('.c-abstract, .abstract, [class*="abstract"]')?.innerText;

Scroll the page to load more content:

javascript

window.scrollTo(0, document.body.scrollHeight);

Increase waiting time to ensure asynchronous content is fully loaded

问题 7: 前台 vs 后台操作浏览器

Problem 7: Foreground vs Background Browser Operations

CDP 支持两种操作模式，根据用户需求选择：

后台操作（默认）：

通过 WebSocket 发送 JavaScript 命令直接操作 DOM
浏览器界面不会显示操作过程（用户看不到输入、点击等动作）
适合数据抓取、自动化测试等不需要可视化反馈的场景
代码示例：

python

undefined

CDP supports two operation modes, choose according to user needs:

Background Operation (Default)：

Directly operate the DOM by sending JavaScript commands via WebSocket
The browser interface will not display the operation process (users cannot see input, clicks, etc.)
Suitable for scenarios like data crawling and automated testing that do not require visual feedback
Code example:

python

undefined

直接设置输入框的值（用户看不到输入过程）

Directly set the value of the input box (users cannot see the input process)

await ws.send(json.dumps({ "method": "Runtime.evaluate", "params": { "expression": "document.querySelector('#kw').value = '美女';" } }))


**前台操作（可视化）**：
- 使用 CDP 的 Input 域模拟真实用户输入
- 浏览器会显示完整的操作过程（键盘输入、鼠标点击等）
- 适合演示、教学、需要用户观察操作过程的场景
- 代码示例：
```python

await ws.send(json.dumps({ "method": "Runtime.evaluate", "params": { "expression": "document.querySelector('#kw').value = '美女';" } }))


**Foreground Operation (Visualization)**：
- Use CDP's Input domain to simulate real user input
- The browser will display the complete operation process (keyboard input, mouse clicks, etc.)
- Suitable for demonstration, teaching, and scenarios where users need to observe the operation process
- Code example:
```python

1. 先聚焦输入框

1. First focus on the input box

await ws.send(json.dumps({ "method": "Runtime.evaluate", "params": { "expression": "document.querySelector('#kw').focus();" } }))

2. 模拟键盘输入（用户能看到逐字输入）

2. Simulate keyboard input (users can see character-by-character input)

for char in "美女": await ws.send(json.dumps({ "method": "Input.dispatchKeyEvent", "params": { "type": "char", "text": char } })) await asyncio.sleep(0.1) # 模拟真实打字间隔

for char in "美女": await ws.send(json.dumps({ "method": "Input.dispatchKeyEvent", "params": { "type": "char", "text": char } })) await asyncio.sleep(0.1) # Simulate real typing interval

3. 模拟点击搜索按钮（用户能看到点击效果）

3. Simulate clicking the search button (users can see the click effect)

await ws.send(json.dumps({ "method": "Input.dispatchMouseEvent", "params": { "type": "mousePressed", "x": 100, "y": 200, "button": "left" } }))


**选择建议**：
| 场景 | 推荐模式 | 原因 |
|------|---------|------|
| 数据抓取 | 后台 | 速度快，不需要可视化 |
| 自动化测试 | 后台 | 稳定可靠，不受UI影响 |
| 搜索类任务 | 后台 | 直接构造URL更简单可靠 |
| 操作演示 | 前台 | 用户能看到完整过程 |
| 教学演示 | 前台 | 便于观察和理解 |
| 表单填写 | 两者皆可 | 后台更快，前台更直观 |

**搜索类任务推荐方案**：
- **后台方式**（推荐）：直接构造搜索URL，如 `https://www.baidu.com/s?wd=关键词`
- **前台方式**：仅当用户明确要求"可视化"、"能看到操作过程"时使用

await ws.send(json.dumps({ "method": "Input.dispatchMouseEvent", "params": { "type": "mousePressed", "x": 100, "y": 200, "button": "left" } }))


**Selection Suggestions**：
| Scenario | Recommended Mode | Reason |
|------|---------|------|
| Data crawling | Background | Fast, no visualization required |
| Automated testing | Background | Stable and reliable, not affected by UI |
| Search tasks | Background | Directly constructing URLs is simpler and more reliable |
| Operation demonstration | Foreground | Users can see the complete process |
| Teaching demonstration | Foreground | Easy to observe and understand |
| Form filling | Either | Background is faster, foreground is more intuitive |

**Best Practices for Search Tasks**：
- **Background Method (Recommended)**: Directly construct the search URL, such as `https://www.baidu.com/s?wd=keyword`
- **Foreground Method**: Only use when users explicitly request "visualization" or "ability to see the operation process"

问题 8: 搜索类任务的最佳实践

Problem 8: Best Practices for Search Tasks

场景: 用户要求"在百度/谷歌搜索某某关键词并抓取结果"

方案对比:

方案	实现方式	优点	缺点	推荐度
A	后台直接访问搜索URL	简单、快速、稳定	用户看不到过程	⭐⭐⭐⭐⭐
B	前台模拟输入点击	可视化、有反馈	复杂、慢、需处理坐标	⭐⭐⭐

推荐方案 A（后台方式）：

python

undefined

Scenario: Users request "search for a certain keyword on Baidu/Google and crawl the results"

Solution Comparison:

Solution	Implementation	Advantages	Disadvantages	Recommendation
A	Directly access the search URL in the background	Simple, fast, stable	Users cannot see the process	⭐⭐⭐⭐⭐
B	Simulate input and click in the foreground	Visual, with feedback	Complex, slow, need to handle coordinates	⭐⭐⭐

Recommended Solution A (Background Method)：

python

undefined

直接构造搜索URL，一步到位

Directly construct the search URL in one step

url = f"https://www.baidu.com/s?wd={urllib.parse.quote(keyword)}" await client.navigate(url) await asyncio.sleep(3) # 等待加载 results = await client.evaluate(extract_script)


**何时使用方案 B（前台方式）**：
- 用户明确要求"可视化操作"、"让我看到过程"
- 教学演示场景
- 需要展示自动化操作过程

**前台方式注意事项**：
1. 必须先 `focus()` 输入框
2. 打字间隔 0.1-0.15 秒最合适
3. 百度搜素按钮坐标约 x:650, y:230（1920x1080分辨率）
4. 需要启用 Input 域：`Input.enable`

**前台输入文字详细步骤**（以百度搜索框为例）：

```python

url = f"https://www.baidu.com/s?wd={urllib.parse.quote(keyword)}" await client.navigate(url) await asyncio.sleep(3) # Wait for loading results = await client.evaluate(extract_script)


**When to Use Solution B (Foreground Method)**：
- Users explicitly request "visual operation" or "let me see the process"
- Teaching demonstration scenarios
- Need to show the automation operation process

**Notes for Foreground Method**：
1. Must `focus()` on the input box first
2. A typing interval of 0.1-0.15 seconds is most appropriate
3. The coordinates of Baidu's search button are approximately x:650, y:230 (1920x1080 resolution)
4. Need to enable Input domain: `Input.enable`

**Detailed Steps for Foreground Text Input** (Taking Baidu search box as an example)：

```python

步骤 1: 启用 Input 域（必须先启用才能发送键盘事件）

Step 1: Enable Input domain (must be enabled first to send keyboard events)

await ws.send(json.dumps({ "id": 1, "method": "Input.enable" }))

步骤 2: 聚焦输入框（关键步骤，否则键盘事件可能无效）

Step 2: Focus on the input box (key step, otherwise keyboard events may be invalid)

await ws.send(json.dumps({ "id": 2, "method": "Runtime.evaluate", "params": { "expression": "document.querySelector('#kw').focus();", # '#kw' 是百度搜索框ID "returnByValue": True } })) await asyncio.sleep(0.5) # 等待聚焦完成

await ws.send(json.dumps({ "id": 2, "method": "Runtime.evaluate", "params": { "expression": "document.querySelector('#kw').focus();", # '#kw' is the ID of Baidu's search box "returnByValue": True } })) await asyncio.sleep(0.5) # Wait for focusing to complete

步骤 3: 清空输入框（可选，确保输入框为空）

Step 3: Clear the input box (optional, ensure it is empty)

await ws.send(json.dumps({ "id": 3, "method": "Runtime.evaluate", "params": { "expression": "document.querySelector('#kw').value = '';", "returnByValue": True } }))

步骤 4: 逐字输入文字（用户能看到逐字输入动画）

Step 4: Input text character by character (users can see the typing animation)

text = "hello 你好呀" for i, char in enumerate(text): await ws.send(json.dumps({ "id": 10 + i, "method": "Input.dispatchKeyEvent", "params": { "type": "char", # 输入字符 "text": char # 要输入的字符 } })) await asyncio.sleep(0.15) # 打字间隔，让用户能看到动画


**关键要点**：
- `type: "char"` 用于输入普通字符
- 必须先 `focus()` 输入框，否则输入可能无效
- 间隔时间建议 0.1-0.2 秒，太短可能漏字，太长用户等待久
- 支持中文输入，无需额外编码处理

text = "hello 你好呀" for i, char in enumerate(text): await ws.send(json.dumps({ "id": 10 + i, "method": "Input.dispatchKeyEvent", "params": { "type": "char", # For inputting ordinary characters "text": char # Character to input } })) await asyncio.sleep(0.15) # Typing interval, allowing users to see the animation


**Key Points**：
- `type: "char"` is used for inputting ordinary characters
- Must `focus()` on the input box first, otherwise input may be invalid
- The recommended interval is 0.1-0.2 seconds; too short may cause missing characters, too long makes users wait too long
- Supports Chinese input without additional encoding processing

问题 9: 表单自动化执行顺序

Problem 9: Execution Order for Form Automation

正确顺序:

启用 Runtime → 2. 填充输入框 → 3. 点击按钮 → 4. 等待页面加载 → 5. 提取数据

示例代码（百度搜索后台方式）：

python

undefined

Correct Order:

Enable Runtime → 2. Fill input boxes → 3. Click button → 4. Wait for page loading → 5. Extract data

Sample Code (Baidu search background method)：

python

undefined

1. 填充搜索词

1. Fill in search term

await ws.send(json.dumps({ "id": 2, "method": "Runtime.evaluate", "params": { "expression": "document.querySelector('#kw').value = '搜索词';", "returnByValue": True } }))

2. 点击搜索按钮

2. Click search button

await ws.send(json.dumps({ "id": 3, "method": "Runtime.evaluate", "params": { "expression": "document.querySelector('#su').click();", "returnByValue": True } }))

3. 等待加载

3. Wait for loading

await asyncio.sleep(3)

4. 提取结果

4. Extract results

await ws.send(json.dumps({ "id": 4, "method": "Runtime.evaluate", "params": { "expression": """ (() => { const items = document.querySelectorAll('.result'); return Array.from(items).map(item => ({ title: item.querySelector('h3')?.innerText, link: item.querySelector('a')?.href })); })() """, "returnByValue": True } }))

undefined

undefined

用户使用指南

User Guide

如何使用此 Skill

How to Use This Skill

用户可以通过以下方式触发此 skill：

直接说明需求 - 描述你想对网页做什么
使用
/chrome-devtools-skill
命令 - 显式调用 skill
提及网页操作 - 任何涉及"打开网页、抓取数据、截图"等关键词

Users can trigger this skill in the following ways:

Directly state requirements - Describe what you want to do with the web page
Use the
/chrome-devtools-skill
command - Explicitly call the skill
Mention web page operations - Any keywords involving "open web page, crawl data, take screenshot", etc.

提示词示例

Prompt Examples

以下是一些用户可以使用的提示词模板：

Here are some prompt templates users can use:

基础操作

Basic Operations

打开 https://www.example.com 并截图

抓取 https://www.example.com 的页面内容

分析一下这个网页：https://github.com/xxx/xxx

Open https://www.example.com and take a screenshot

Crawl the content of https://www.example.com

Analyze this web page: https://github.com/xxx/xxx

数据提取

Data Extraction

打开 https://www.jd.com，提取首页所有商品标题和价格

访问 https://www.zhihu.com/explore，获取热门问题列表

抓取 https://www.example.com 页面中的所有链接

Open https://www.jd.com and extract all product titles and prices on the homepage

Visit https://www.zhihu.com/explore and get the list of popular questions

Crawl all links on https://www.example.com

监控和分析

Monitoring and Analysis

打开 https://www.example.com，监控页面加载的所有 API 请求

分析 https://www.example.com 的页面性能

访问 https://www.example.com，提取页面中的所有图片地址

Open https://www.example.com and monitor all API requests loaded by the page

Analyze the page performance of https://www.example.com

Visit https://www.example.com and extract all image URLs on the page

自动化操作

Automation Operations

打开 https://www.example.com，在搜索框输入"关键词"并搜索

访问 https://www.example.com，点击"加载更多"按钮，抓取所有列表数据

Open https://www.example.com, enter "keyword" in the search box and search

Visit https://www.example.com, click the "Load More" button, and crawl all list data

提示词技巧

Prompt Tips

明确 URL - 提供完整的网页地址
说明目标 - 清楚描述你想获取什么数据或执行什么操作
指定格式 - 如果需要特定格式，可以说明（如"以表格形式返回"）
复杂任务分步 - 对于多步骤任务，可以分步描述

Specify the URL clearly - Provide the complete web address
State the goal clearly - Describe what data you want to obtain or what operation you want to perform
Specify the format - If you need a specific format, you can state it (e.g., "return in table format")
Break down complex tasks - For multi-step tasks, describe them step by step

示例对话

Sample Conversations

用户: 帮我打开百度，看看热搜榜有什么内容

AI: [自动启动 Chrome → 打开百度 → 提取热搜数据 → 返回结果]

用户: 抓取 https://news.ycombinator.com 的前 10 条新闻标题和链接

AI: [自动启动 Chrome → 打开 Hacker News → 提取新闻数据 → 返回表格]

用户: 分析一下淘宝首页都加载了哪些接口

AI: [自动启动 Chrome → 打开淘宝 → 监控网络请求 → 返回 API 列表]

User: Help me open Baidu and see what's on the hot search list

AI: [Automatically start Chrome → Open Baidu → Extract hot search data → Return results]

User: Crawl the titles and links of the top 10 news items on https://news.ycombinator.com

AI: [Automatically start Chrome → Open Hacker News → Extract news data → Return table]

User: Analyze which interfaces are loaded on the Taobao homepage

AI: [Automatically start Chrome → Open Taobao → Monitor network requests → Return API list]

参考资源

Reference Resources

示例脚本: 见
```
scripts/
```
目录
- ```
baidu_search_example.py
```
  - 百度搜索完整示例
- ```
cdp_helper.py
```
  - CDP 客户端封装类
- ```
README.md
```
  - 快速开始指南

Sample Scripts: See
```
scripts/
```
directory
- ```
baidu_search_example.py
```
  - Complete Baidu search example
- ```
cdp_helper.py
```
  - CDP client encapsulation class
- ```
README.md
```
  - Quick start guide

Chrome DevTools MCP 配置信息

Chrome DevTools MCP Configuration Information

如果用户询问

chrome-devtools MCP

怎么配置，提供以下 JSON 配置信息：

json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

// 测试修改 // 另一个测试修改 // 测试修改 pre-push 方案

If users ask how to configure

chrome-devtools MCP

, provide the following JSON configuration information:

json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

// Test modification // Another test modification // Test modification pre-push solution