Skill 广场
网页真机自动化调试与测试 Skill

网页真机自动化调试与测试.Skill

@addyosmani/browser-testing-with-devtools

4.8优秀AI 评分基础检查通过源自 GitHub

该能力让 AI 智能体能够连接真实 Chrome 浏览器环境(基于 Chrome DevTools MCP 服务),告别单纯看代码推测渲染效果的传统模式。智能体可以实时截图比对视觉样式、审查 DOM 树与计算样式、捕获控制台日志与报错、监控网络接口请求与响应数据,并执行性能追踪分析。同时包含严格的隔离与安全规则,防止浏览器不可信内容越权干扰指令执行或泄露敏感凭证,帮助开发者闭环完成从问题复现、排查、代码修复到真机验证的全流程。

编程前端开发工程师全栈开发者Web测试工程师2026-09-23 更新main

网页真机自动化调试与测试

该能力让 AI 智能体能够连接真实 Chrome 浏览器环境(基于 Chrome DevTools MCP 服务),告别单纯看代码推测渲染效果的传统模式。智能体可以实时截图比对视觉样式、审查 DOM 树与计算样式、捕获控制台日志与报错、监控网络接口请求与响应数据,并执行性能追踪分析。同时包含严格的隔离与安全规则,防止浏览器不可信内容越权干扰指令执行或泄露敏感凭证,帮助开发者闭环完成从问题复现、排查、代码修复到真机验证的全流程。

它会先理解你的原始内容和目标,再按清晰的步骤完成处理。你不需要学习复杂命令,也不用理解背后的技术细节。

常见场景

它能帮你做什么?

01

02

03

三步完成

怎么使用

1安装 Skill

把右侧安装请求发给你的 AI。

2说清楚目标

告诉 AI 你想完成什么,或直接贴入内容。

3检查结果

按需要继续调整语气、范围或格式。

复制就能用

你可以直接这样说

在本地 http://localhost:3000 打开待办事项页面,截图并检查控制台是否有报错或未捕获的 Promise 异常。

点击购物车结算按钮后无反应,通过 DevTools 捕获 Network 请求,看看接口状态码和返回的 Payload 是什么。

为当前的详情页录制一段性能 Trace,找出耗时超过 50ms 的长任务以及导致页面卡顿的原因。

适用人群

适合谁?

前端开发工程师全栈开发者Web测试工程师使用 AI 智能体写代码的开发者

上手门槛

使用难度

进阶

需要了解任务流程,页面已整理好使用步骤。

兼容范围

支持哪些 AI?

Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用
国内 Agent可直接使用

中文用户增强

Skill Px 做了什么?

中文说明简化使用方式补充中文案例整理安装流程降低理解难度