mcpField
B
browser-debugging

browser-debugging

github.com/aj-geddes开发373542 次安装34 周前更新
代码仓库

关于 browser-debugging

browser-debugging 是一项用于排查浏览器客户端问题的技能，涉及 JavaScript 错误、布局、性能、交互和网络请求。适合通过浏览器开发者工具分析并修复网页问题的开发者。

主要功能

  1. 01排查 JavaScript 错误
  2. 02检查和调整 HTML 与 CSS
  3. 03分析性能问题
  4. 04诊断网络请求失败
  5. 05检查用户交互问题

适用场景

  1. 01定位网页中的脚本错误
  2. 02排查布局或样式异常
  3. 03分析性能问题和网络请求故障

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill browser-debugging

安装后在 Claude Code 中输入/browser-debugging确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
browser-devtools-fundamentals.md
common-issues-solutions.md
debugging-techniques.md
performance-debugging.md
templates/
component-template.tsx

详细介绍

浏览器调试

目录

概述

浏览器调试工具有助于识别和修复客户端问题，包括 JavaScript 错误、布局问题和性能问题。

适用场景

  • JavaScript 错误
  • 布局/样式问题
  • 性能问题
  • 用户交互问题
  • 网络请求失败
  • 动画故障

快速开始

最小可运行示例：

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)

参考指南

references/ 目录中的详细实现：

指南内容
浏览器 DevTools 基础知识浏览器 DevTools 基础知识
调试技巧调试技巧
常见问题及解决方案常见问题及解决方案
性能调试性能调试

最佳实践

✅ 应该做
  • 遵循既定的模式和约定
  • 编写整洁、易于维护的代码
  • 添加适当的文档
  • 部署前进行全面测试
❌ 不应该做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown