‹ 首页

browser-debugging

@aj-geddes · 收录于 5 天前 · 上游提交 4 个月前

Debug client-side issues using browser developer tools. Identify JavaScript errors, styling issues, and performance problems in the browser.

场景页面报错样式异常性能卡顿

适合你，如果需要在浏览器中排查 JavaScript 错误、样式或性能问题

/ 下载安装
https://github.com/aj-geddes/useful-ai-prompts/tree/main/skills/browser-debugging ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add aj-geddes/useful-ai-prompts/browser-debugging
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- aj-geddes/useful-ai-prompts/browser-debugging
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify aj-geddes/useful-ai-prompts/browser-debugging
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
300GitHub stars
~348最小装载
~1.2K含声明引用
~1.3K文本包总量
索引托管

怎么用

商店整理自技能原文 · 版本 3f5182c · 表述以原文为准
它做什么

装上后，Claude能使用Chrome开发者工具的功能，比如检查网页元素、查看JavaScript错误、监控网络请求等，帮你诊断和修复浏览器端的问题。

什么时候触发

当你遇到网页上的JavaScript错误、样式问题、性能问题，或者要求调试浏览器端问题时触发。

装好后可以这样说
Claude会打开Console标签查看错误。
Claude会使用Network标签分析请求。
Claude会检查Elements标签中的样式。
技能原文 SKILL.md作者撰写 · MIT · 3f5182c

Browser Debugging

Table of Contents
  • [Overview](#overview)
  • [When to Use](#when-to-use)
  • [Quick Start](#quick-start)
  • [Reference Guides](#reference-guides)
  • [Best Practices](#best-practices)
Overview

Browser debugging tools help identify and fix client-side issues including JavaScript errors, layout problems, and performance issues.

When to Use
  • JavaScript errors
  • Layout/styling issues
  • Performance problems
  • User interaction issues
  • Network request failures
  • Animation glitches
Quick Start

Minimal working example:

Chrome DevTools Tabs:

Elements/Inspector:
  - Inspect HTML structure
  - Edit HTML/CSS in real-time
  - View computed styles
  - Check accessibility tree
  - Modify DOM

Console:
  - View JavaScript errors
  - Execute JavaScript
  - View console logs
  - Monitor messages
  - Clear errors

Sources/Debugger:
  - Set breakpoints
  - Step through code
  - Watch variables
  - Call stack view
  - Conditional breakpoints

Network:
  - View all requests
// ... (see reference guides for full implementation)
Reference Guides

Detailed implementations in the references/ directory:

| Guide | Contents | |---|---| | [Browser DevTools Fundamentals](references/browser-devtools-fundamentals.md) | Browser DevTools Fundamentals | | [Debugging Techniques](references/debugging-techniques.md) | Debugging Techniques | | [Common Issues & Solutions](references/common-issues-solutions.md) | Common Issues & Solutions | | [Performance Debugging](references/performance-debugging.md) | Performance Debugging |

Best Practices
✅ DO
  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying
❌ DON'T
  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…