Skill 广场
网页自动化交互与性能诊断 Skill

网页自动化交互与性能诊断.Skill

@github/chrome-devtools

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

基于 Chrome DevTools 协议与 MCP 服务的浏览器接管能力。支持通过文本无障碍快照精确定位元素并执行表单填写、点击与文件上传,同时能够实时监控控制台日志、排查异常网络请求,以及启动性能 Trace 录制以分析 LCP 和布局偏移等核心 Web 性能指标。

编程前端开发工程师Web自动化测试工程师性能优化工程师2026-09-23 更新main

网页自动化交互与性能诊断

基于 Chrome DevTools 协议与 MCP 服务的浏览器接管能力。支持通过文本无障碍快照精确定位元素并执行表单填写、点击与文件上传,同时能够实时监控控制台日志、排查异常网络请求,以及启动性能 Trace 录制以分析 LCP 和布局偏移等核心 Web 性能指标。

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

常见场景

它能帮你做什么?

01

02

03

三步完成

怎么使用

1安装 Skill

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

2说清楚目标

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

3检查结果

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

复制就能用

你可以直接这样说

打开 https://example.com/login,填写测试账号与密码并点击登录,检查是否有控制台 JS 报错与失败接口。

对当前电商商品详情页进行一次完整的性能分析录制,找出导致 LCP 偏慢和页面重排的静态资源。

列出当前打开页面中所有状态码为 400 以上的网络请求,并打印其请求路径与响应内容。

适用人群

适合谁?

前端开发工程师Web自动化测试工程师性能优化工程师全栈开发者

上手门槛

使用难度

进阶

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

兼容范围

支持哪些 AI?

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

中文用户增强

Skill Px 做了什么?

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