chrome-debug

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chrome DevTools Debugging

Chrome DevTools 调试

This skill explains how to use the Chrome DevTools MCP for browser debugging and UI verification.

本技能介绍如何使用Chrome DevTools MCP进行浏览器调试和UI验证。

Setup

准备工作

Before using Chrome DevTools MCP, you must launch Chrome in headless mode with remote debugging enabled:

bash

npm run chrome &

This runs Chrome with the required flags for Docker/containerized environments:

```
--remote-debugging-port=9222
```
- Enables MCP connection
```
--no-sandbox
```
- Required for Docker
```
--headless
```
- Runs without display
```
--disable-gpu
```
- Avoids GPU issues in containers

Wait a few seconds for Chrome to start before using MCP tools.

在使用Chrome DevTools MCP之前，您必须以无头模式启动Chrome并启用远程调试：

bash

npm run chrome &

此命令会使用Docker/容器化环境所需的参数启动Chrome：

```
--remote-debugging-port=9222
```
- 启用MCP连接
```
--no-sandbox
```
- Docker环境下必需
```
--headless
```
- 无界面运行
```
--disable-gpu
```
- 避免容器中的GPU问题

在使用MCP工具前，请等待几秒让Chrome启动完成。

Screenshots

屏幕截图

IMPORTANT: Always save screenshots to the

.screenshots

directory using the

filePath

parameter:

mcp__chrome-devtools__take_screenshot with filePath: ".screenshots/descriptive-name.png"

Use descriptive filenames like:

```
.screenshots/homepage-initial.png
```
```
.screenshots/login-form-error.png
```
```
.screenshots/after-click-submit.png
```

This allows debugging and visual comparison later.

重要提示： 请始终使用

filePath

参数将屏幕截图保存到

.screenshots

目录中：

mcp__chrome-devtools__take_screenshot with filePath: ".screenshots/descriptive-name.png"

请使用具有描述性的文件名，例如：

```
.screenshots/homepage-initial.png
```
```
.screenshots/login-form-error.png
```
```
.screenshots/after-click-submit.png
```

这便于后续进行调试和视觉对比。

Workflow Example

工作流示例

Start Chrome:
bash
```
npm run chrome &
```
Wait 2-3 seconds for startup.

Navigate to the dev server:

mcp__chrome-devtools__navigate_page url="http://localhost:5173"

Take a snapshot to see page structure:
```
mcp__chrome-devtools__take_snapshot
```
The snapshot shows element UIDs you can use for interactions.

Take a screenshot for visual verification:

mcp__chrome-devtools__take_screenshot filePath=".screenshots/page-state.png"

Interact with elements using UIDs from snapshot:

mcp__chrome-devtools__click uid="1_4"
mcp__chrome-devtools__fill uid="1_5" value="test@example.com"

启动Chrome：
bash
```
npm run chrome &
```
等待2-3秒直至启动完成。

导航到开发服务器：

mcp__chrome-devtools__navigate_page url="http://localhost:5173"

拍摄快照以查看页面结构：
```
mcp__chrome-devtools__take_snapshot
```
快照会显示可用于交互的元素UID。

截取屏幕截图以进行视觉验证：

mcp__chrome-devtools__take_screenshot filePath=".screenshots/page-state.png"

使用快照中的UID与元素交互：

mcp__chrome-devtools__click uid="1_4"
mcp__chrome-devtools__fill uid="1_5" value="test@example.com"

Tips

小贴士

Prefer snapshots over screenshots - Snapshots are faster and provide element UIDs for interaction
Always save screenshots locally - Use
```
.screenshots/
```
directory with descriptive names
Check if Chrome is running - If tools fail to connect, run
```
npm run chrome &
```
again
Wait after navigation - Use
```
wait_for
```
to ensure page content loads before interacting

优先使用快照而非屏幕截图 - 快照速度更快，且会提供用于交互的元素UID
始终将屏幕截图保存到本地 - 使用
```
.screenshots/
```
目录并采用具有描述性的文件名
检查Chrome是否在运行 - 如果工具无法连接，请重新运行
```
npm run chrome &
```
导航后等待 - 使用
```
wait_for
```
确保页面内容加载完成后再进行交互