Skills 与 MCP
chrome-devtools-mcp
让 AI 编码助手检查真实页面、DOM、样式、性能和交互。
浏览器调试
chrome-devtools-mcp 适合让 AI 编码助手检查真实页面、DOM、样式和交互。
适用场景
| 场景 | 价值 |
|---|---|
| 本地前端验收 | 直接查看 localhost 页面 |
| 布局问题 | 检查元素尺寸、层级和溢出 |
| 交互问题 | 点击、输入、切换状态后再检查 |
| 性能问题 | 查看控制台错误和网络请求 |
与截图结合
浏览器 MCP 适合查 DOM 和实时状态，Playwright 截图适合保存证据。做视觉复刻时建议两者结合：先用浏览器定位问题，再用截图记录修复前后。
最小安装形态
不同客户端的 MCP 配置略有差异，核心都是让客户端能启动浏览器检查工具。记录时保留配置文件路径、命令和工具列表。
{
"mcp": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
如果只是要保存截图，不一定要先接 MCP；可以直接用 Playwright 或浏览器插件完成。
本地 QA 工作流
- 启动本地站点，例如
pnpm dev --host 127.0.0.1 --port 3000。 - 打开目标页面，例如
http://127.0.0.1:3000/codex/model。 - 检查 Console，确认没有 hydration、404、字体或图标加载错误。
- 查看核心容器尺寸，确认标题、导航、按钮和卡片没有溢出。
- 切到移动端视口，检查侧边栏、菜单、TOC 和长文本换行。
- 切换暗色模式，确认背景、边框、代码块和徽标对比度正常。
- 保存截图路径，并在最终记录中写明页面、视口和发现的问题。
检查清单
| 检查项 | 说明 |
|---|---|
| Console | 是否有 hydration、资源加载或运行时错误 |
| Elements | 目标元素尺寸、换行、overflow 和 z-index |
| Network | 图片、字体、接口是否失败 |
| Interaction | 菜单、搜索、暗色模式、按钮点击是否可用 |
注意事项
不要让浏览器工具代替构建检查。前端任务结束前仍然需要运行 lint、typecheck、build，确保页面不是只在开发态可用。
交付格式
浏览器排查结束时，至少写清楚检查页面、视口尺寸、发现的问题、修复文件和复查截图路径。如果只是“看起来可以”，后续很难复盘。
继续阅读
按当前页面继续跳到相关教程、评测、路线或 Gallery 示例。