Module 04 · Debugging and Troubleshooting调试与故障排除
Troubleshooting with Chrome DevToolsChrome DevTools 调试工具简介
学习目标
观看完本视频后，您将能够：
- 描述 Chrome DevTools 及其各个面板
- 确定 如何访问一些面板的功能
- 解释 如何使用 Chrome DevTools 来调试 HTML 和 CSS
什么是 Chrome DevTools?
Chrome DevTools 是谷歌 Chrome 浏览器内建的开发者工具，允许开发者直接在浏览器中编辑代码、添加断点来检测问题，并快速调试代码。
Chrome DevTools 提供了 11 个面板，帮助开发者全面分析网页的各个方面，提升开发和调试效率。以下是每个面板的功能简述：
| 面板名称 | 功能概述 |
|---|---|
| Elements | 检查和修改 DOM 节点与样式属性 |
| Console | 查看和执行 JavaScript 代码 |
| Sources | 调试 JavaScript，设置断点等 |
| Network | 监控和排查网络活动 |
| Performance | 评估页面的速度和优化情况 |
| Memory | 监控内存使用情况并解决相关问题 |
| Application | 检查本地存储、会话存储、Cookies、Index DB 等 |
| Security | 调试证书问题及其他安全相关问题 |
| Lighthouse | 检查应用的质量、性能、可访问性、SEO 等指标 |
| Recorder | 记录结账流程并定期测量其表现 |
| Performance Insights | 提供关于如何修复问题的可操作反馈 |
如何访问 Chrome DevTools?
要访问 Chrome DevTools：
- 右键点击 页面上的任何地方，选择 "Inspect"（检查），这时 DevTools 会打开 Elements 面板 并突出显示选中的 DOM 元素。
- 要打开 Console 面板，您可以使用快捷键：
- macOS：
CMD+Option+J - Windows：
CTRL+SHIFT+J
访问 Elements 面板
访问 Elements 面板 的步骤：
- 右键点击 页面上的任何元素，选择 "Inspect"（检查）。
- 或者直接点击 Chrome DevTools 中的 Elements 面板。
- 被选中的元素将在 DOM 树 中高亮显示。
要选择页面上的其他元素：
- 将鼠标悬停在页面上的元素上，然后 单击 高亮的区域，以选择您希望检查的元素。
如何编辑 HTML 和 CSS?
编辑 HTML
- 右键点击一个元素，选择 "Edit as HTML"（编辑 HTML），您将看到一个文本框，可以直接修改该元素的 HTML 内容。
- 这对于测试新的 HTML 结构非常有用，因为它无需修改源代码并且刷新页面后，您可以再次编辑相同的组件。
编辑 CSS
- Styles 面板 非常有用，用于调试和理解 CSS。
- 使用 Styles 面板 可以实时预览修改，而不会影响其他访客的浏览体验。修改会即时更新，无需刷新浏览器。
如何设置断点进行调试?
设置断点的步骤：
- 点击文件旁边的行号，设置断点。
- 运行代码，触发断点。当执行到该行时，代码暂停，您可以检查该行的数据状态。
- 此时，您可以悬停在变量上查看其值，以帮助定位问题。
另一种方式是，在 JavaScript 代码中添加 debugger;，当执行到该行时，调试器将被触发。
使用 console.log 进行日志记录
console.log() 是调试 JavaScript 代码时常用的函数之一。它可以输出变量或数据到控制台。
例如，输出从 0 到 4 的值：
// 打开控制台查看
for (let i = 0; i < 5; i++) {
console.log("value,", i);
}
要查看输出，可以打开 DevTools 中的 Console 面板，或按 Esc 键打开控制台。
如何查找对象中的属性
grep.js 片段用于在对象及其原型链中查找符合某些标准的属性。例如，以下指令将在 document 对象中查找所有匹配 get 的属性：
grep(document, 'get');
调试不同设备尺寸和版本
Chrome DevTools 允许您切换不同的移动设备屏幕类型和版本，并调整网页的屏幕尺寸：
- 首先，打开 Inspect 模式。
- 在 DevTools 左上角的下拉菜单中选择 Responsive。
- 选择您偏好的移动设备，页面将根据所选设备的屏幕尺寸进行渲染和调整。
使用 Lighthouse 测试网页性能
Lighthouse 是 Chrome DevTools 中的一个功能，用于评估网站在 移动设备 和 桌面设备 上的性能。使用步骤如下：
- 在 DevTools 中选择 Lighthouse。
- 选择您想测试的参数，如性能、可访问性、SEO 等。
- 选择 Mobile 或 Desktop，查看您的网站在不同平台上的表现。
总结
- Chrome DevTools 允许开发者直接在浏览器中编辑代码、设置断点并快速调试。
- Elements 面板 用于检查和修改 DOM 节点及样式属性。
- 通过 console.log() 输出日志，便于调试和查看变量值。
- Lighthouse 提供了性能测试功能，帮助评估网站的优化程度。
通过掌握这些技巧，您可以高效地调试代码，优化您的开发流程。