- 检查 html 元素的结构和内容，包括属性、样式和事件监听器。
- 使用元素选择器快速定位特定元素。
- 修改 DOM 节点，实时查看更改。
Console 面板
- 输出日志消息、错误和警告。
- 运行 javascript 代码，调试问题。
- 访问全局变量和函数，进行交互式调试。
Sources 面板
- 查看和编辑 JavaScript 源代码。
- 设置断点，在特定行暂停脚本执行。
- 使用单步执行、按步执行和跳转到函数等调试工具。
Network 面板
- 分析 Http 和 websocket 请求和响应。
- 监视网络流量，了解页面加载时间、资源大小和服务器响应。
- 模拟不同网络连接条件，进行性能测试。
Performance 面板
- 记录页面加载时间线，显示关键指标。
- 分析 DOM 构建、JavaScript 执行和渲染时间。
- 识别性能瓶颈，例如未压缩的资产或过多的重新绘制。
Memory 面板
- 查看 JavaScript 堆内存分配情况。
- 识别内存泄漏，防止应用程序崩溃。
- 跟踪特定对象的引用计数，了解其生命周期。
Application 面板
- 访问 WEB 应用程序的缓存、服务工作者和存储。
- 管理本地存储和会话存储中的数据。
- 调试 WebSockets 和 IndexedDB 数据库。
Security 面板
- 检查证书和连接状态，确保网站安全。
- 识别潜在的漏洞，例如跨站点脚本攻击 (XSS)。
- 分析第三方脚本和域，了解其对隐私和安全的影响。
Accessibility 面板
- 评估网站的可访问性，确保所有用户都可以使用。
- 检查图像的替代文本、表单控件的标签和颜色对比度。
- 获取针对可访问性问题的建议和提示。
Lighthouse 面板
- 运行全面的页面性能和可访问性审计。
- 生成报告，包含改进建议和得分。
- 比较不同配置下的页面性能，了解优化效果。
高级技巧
- 使用扩展：安装扩展程序，例如 React Developer Tools 和 Redux DevTools，以增强针对特定库的调试功能。
- 编写断点条件：设置条件断点，仅在特定条件满足时才暂停执行。
- 使用源映射：启用源映射，轻松在源代码和压缩代码之间导航。
- 分析堆栈跟踪：检查堆栈跟踪，快速识别错误的根源。
- 记录和重播网络请求：捕获和重播网络请求，用于离线调试和性能测试。
