页面为何卡?这款Skill看浏览器

自动化浏览器操作、调试页面和分析性能。

chrome-devtools 是让 AI 借助 Chrome DevTools MCP 操作和检查真实浏览器的 Skill。它可以复现页面操作,查看报错与网络请求,也能记录性能轨迹,帮助开发者排查卡顿和加载异常。

一个页面打不开,截图通常只能告诉你“白屏了”。这款 Skill 会把控制台和网络请求一起检查:是 JavaScript 出错,资源请求失败,还是页面元素状态不对,再根据证据继续定位。

需要点击或填写表单时,它优先读取页面的可访问性结构,找到对应元素标识;导航或页面结构明显变化后,会重新读取,避免沿用已经失效的目标。截图则用于查看视觉结果。

如果问题是慢,它会记录加载过程并分析相关线索,例如主要内容出现得晚,或者页面发生布局移动。还可以改变窗口大小、模拟网络或 CPU 条件,帮助复现特定环境下的问题。

你需要提供能访问的页面和具体复现步骤,并在环境里配置好 Chrome DevTools MCP。拿到的应是操作结果和调试证据,而不只是根据源码猜一遍“可能哪里有性能问题”。

分类:自动化集成

来源仓库:github/awesome-copilot

适合用来做什么

  • 如何使用 Chrome DevTools 捕获网页的完整屏幕截图?
  • 请分析这个网站的性能瓶颈并给出优化建议。

安装 chrome-devtools

npx skills add https://www.iskills.cc/skills/github/awesome-copilot/chrome-devtools/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 chrome-devtools 的用途与原始说明

浏览全部 Skill 指南