Browser Debugging

aj-geddes/useful-ai-prompts/skills/browser-debugging

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

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

仅含说明Software Development
AI 生成的概览

指导使用浏览器开发者工具调试客户端问题，如 JavaScript 错误、样式问题和性能问题。

功能
该技能提供在浏览器中使用开发者工具诊断和修复客户端问题的指导。内容涵盖 JavaScript 错误、布局与样式问题、性能问题、用户交互问题、网络请求失败以及动画异常。它指向关于开发者工具基础、调试技巧、常见问题与解决方案以及性能调试的参考指南。
适用场景
当网页或客户端应用出现异常、需要在浏览器中排查时使用。适用于 JavaScript 错误、布局或样式问题、性能变慢、交互缺陷、网络请求失败和动画异常。
运行要求
不附带脚本，仅为说明文档和参考文档。需要能够使用浏览器开发者工具，例如 Chrome DevTools。

Browser Debugging

Table of Contents

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:

yaml
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:

GuideContents
Browser DevTools Fundamentals [blocked]Browser DevTools Fundamentals
Debugging Techniques [blocked]Debugging Techniques
Common Issues & Solutions [blocked]Common Issues & Solutions
Performance Debugging [blocked]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

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/browser-debugging提交3f5182c

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

待分类3557个月前更新

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

待分类3557个月前更新

Web Performance Optimization

aj-geddes

通过代码分割、懒加载、缓存、压缩和监控来指导 Web 性能优化。

Software Development3557个月前更新

Vue Application Structure

aj-geddes

指导使用组合式 API、组件组织与 TypeScript 来构建 Vue 3 应用结构。

Software Development3557个月前更新

Visual Regression Testing

aj-geddes

通过跨版本比较截图来检测 UI 中非预期的视觉变化，指导视觉回归测试。

Software Development3557个月前更新

User Persona Creation

aj-geddes

基于研究创建详细的用户画像，用于指导产品设计、优先级排序与信息传达。

Research & Analysis3557个月前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新