浏览器调试指南：使用Chrome DevTools解决JavaScript错误、布局和性能问题

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

201 周安装量

157 GitHub Stars

GitHub

安装命令

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

Web应用调试前端架构

🇨🇳中文介绍

浏览器调试

概述

浏览器调试工具帮助识别和修复客户端问题，包括 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/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
浏览器开发者工具基础	浏览器开发者工具基础
调试技巧	调试技巧
常见问题与解决方案	常见问题与解决方案
性能调试	性能调试

🇺🇸English

Browser Debugging

Overview
When to Use
Quick Start
Reference Guides
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	Browser DevTools Fundamentals
Debugging Techniques	Debugging Techniques
Common Issues & Solutions	Common Issues & Solutions
Performance Debugging	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

Weekly Installs

139

Repository

aj-geddes/usefu…-prompts

GitHub Stars

116

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode121

gemini-cli115

claude-code113

codex111

cursor107

github-copilot97