如何使用 Google Chrome developer tools 轻松调试 JavaScript 代码

1. 一、了解 Sources 面板
2. 二、设置断点
• 1. 在代码行设置断点
• 2. 设置条件断点
• 3. 在事件监听器上设置断点
• 4. 在 DOM 节点中设置断点
3. 三、逐步调试
• 1. 下一步（快捷键：F9）
• 2. 跳过（快捷键：F10）
• 3. 进入（快捷键：F11）
• 4. 跳出（快捷键：Shift+F11）
• 5. 跳转（快捷键：F8）
4. 四、检查范围、调用堆栈和值
• 1. 范围（Scope）
• 2. 调用堆栈
• 3. 值
• 4. Watch
5. 五、禁用和删除断点
6. 六、使用 VS Code 调试 JavaScript

作为前端开发，我们会经常使用 console.log() 来调试程序中的问题。虽然这种方式也能解决一部分问题，但是它的效率不如能执行逐步调试的工具。本文就来学习一下如何使用 Google Chrome developer tools 轻松调试 JavaScript 代码。

多数浏览器都提供了 DevTools 供我们调试 JavaScript 应用程序，并且它们的使用方式类似，只要我们学会了如何在一个浏览器上使用调试工具，就很容易在其他浏览器上使用它。

以下就以 Greet Me 程序为例，这个程序非常简单，只需输入名字和愿望，最后会输出一句话：

最后，回到最开始的问题，这里不再一步步调试，通过上述的调试方法判定，只需要在 wish 变量前面加一个 + 即可：

const message = 'Hello ' 
                        + name 
                        + ', Your wish `' 
                        + + wish 
                        + '` may come true!';

作者：Tapas Adhikary

原文链接：点击这里