dev-tools-skill
使用 Chrome DevTools 调试 Web 应用
仅凭代码往往很难复现前端 bug。此技能会指导 Claude、Codex 和 Claude Code 通过 Chrome DevTools MCP 收集证据。
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
Review the Skillstore skill "dev-tools-skill" from https://skillstore.io/skills/eccentric-jamaican-dev-tools-skill.md and its manifest at https://skillstore.io/api/skills/eccentric-jamaican-dev-tools-skill/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“dev-tools-skill”。 我的产品页面加载后是空白屏幕。
预期结果:
控制台显示加载期间的第一个应用错误。可能原因是在渲染前缺少数据。建议修复：保护组件状态，并通过重新加载进行验证。
正在使用“dev-tools-skill”。 落地页首次加载感觉很慢。
预期结果:
追踪结果指向大型 hero 图片导致的 LCP 缓慢。建议修复：提供响应式图片尺寸，并延迟加载非关键脚本。
正在使用“dev-tools-skill”。 仪表盘登录成功了，但没有显示任何数据。
预期结果:
失败的请求返回了授权错误。建议修复：验证 auth header 和 token refresh 路径，然后重新测试该流程。
安全审计
安全All static findings were false positives caused by Markdown inline code for DevTools MCP tool names or benign debugging guidance. No prompt injection, data exfiltration intent, or malicious automation instructions were found. The skill emphasizes evidence gathering, read-only inspection where possible, and confirmation before destructive actions.
风险因素
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/eccentric-jamaican-dev-tools-skill/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/eccentric-jamaican-dev-tools-skill?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/eccentric-jamaican-dev-tools-skill?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eccentric-jamaican-dev-tools-skill/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/eccentric-jamaican-dev-tools-skill.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
Eccentric-jamaican. (2026). dev-tools-skill security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eccentric-jamaican-dev-tools-skill/audits/8BibTeX 引用
@techreport{eccentric-jamaican-eccentric-jamaican-dev-tools-skill-2026,
author = {Eccentric-jamaican},
title = {dev-tools-skill security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/eccentric-jamaican-dev-tools-skill/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "dev-tools-skill security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Eccentric-jamaican"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/eccentric-jamaican-dev-tools-skill/audits/8"
identifiers:
- type: other
value: "skillstore:eccentric-jamaican-dev-tools-skill:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高你能构建什么
诊断 UI 交互 Bug
检查快照、截图、计算样式和浏览器交互，以找出布局或点击问题。
调查失败的浏览器流程
检查控制台错误和网络请求，以识别失败的端点、payload 问题或 CORS 问题。
分诊慢速 Web 页面
运行性能追踪，分析关键洞察，并将其关联到资源、脚本或布局瓶颈。
试试这些提示
使用 DevTools 技能检查此页面，并解释为什么按钮没有响应。请用通俗语言描述每个步骤。
使用 DevTools 技能查看此登录失败流程的控制台和网络证据。找出第一个失败的请求，并建议最小化修复方案。
使用 DevTools 技能在重新加载时运行性能追踪，识别最重要的洞察，并将其关联到网络或布局证据。
使用 DevTools 技能比较桌面端和移动端布局，检查计算样式，复现交互，并提出可回退的补丁计划。
最佳实践
- 在修改代码前，先从快照、控制台消息和网络请求开始。
- 除非用户批准受控修改，否则保持 DOM 脚本为只读。
- 总结证据、可能原因、最小修复方案和验证步骤。
避免
- 未获得用户明确确认就提交表单或触发破坏性操作。
- 在收集浏览器证据之前就直接修改代码。
- 当观察已经足够时，在诊断期间运行大范围 DOM 修改。
常见问题
此技能需要 Chrome DevTools MCP 吗？
它能修复后端 API bug 吗？
它会自动提交表单吗？
它会收集哪些证据？
初学者可以使用它吗？
支持哪些 AI 工具？
开发者详情
许可证
MIT
Skillstore 修订
r1
版本提示
作者未声明版本。
引用
30c73eac2afe762f6aa9c4553158769369d47351
维护新鲜度
2026/7/18
使用量
9 次下载 · 237 次浏览
文件结构