chrome 调试 JavaScript 入门

官方文档

概述

本交互式教程循序渐进地教您在 Chrome DevTools 中调试 JavaScript 的基本工作流程。 虽然教程介绍的是如何调试一种具体问题，但您学到的一般工作流程对调试各种类型的 JavaScript 错误均有帮助。
如果您使用 console.log() 来查找和修正代码中的错误，可以考虑改用本教程介绍的工作流程。 其速度快得多，也更有效。

第 1 步：重现错误

重现错误始终是调试的第一步。“重现错误”是指找到一系列总是能导致错误出现的操作。
您可能需要多次重现错误，因此要尽量避免任何多余的步骤。
请按照以下说明重现您要在本教程中修正的错误。

1. 点击 Open Demo。演示页面在新标签中打开。
2. 在演示页面上，输入 5 作为 Number 1。
3. 输入 1 作为 Number 2。
4. 点击 Add Number 1 and Number 2。
5. 查看输入和按钮下方的标签。上面显示的是 5 + 1 = 51。

啊呜。这个结果是错误的。正确结果应为 6。这就是您要修正的错误。

第 2 步：使用断点暂停代码

DevTools 让您可以暂停执行中的代码，并对暂停时刻的所有变量值进行检查。 用于暂停代码的工具称为断点。 立即试一试：

1. 按 Command+Option+I (Mac) 或 Ctrl+Shift+I（Windows、Linux）在演示页面上打开 DevTools。
2. 点击 Sources 标签。
3. 点击 Event Listener Breakpoints 将该部分展开。DevTools 显示一个包含 Animation 和 Clipboard 等可展开事件类别的列表。
4. 在 Mouse 事件类别旁，点击 Expand Expand 图标。DevTools 显示一个包含 click 等 Mouse 事件的列表，事件旁有相应的复选框。
5. 选中 click 复选框。