如何用浏览器调试器代替console.log()？

作者｜Parag Zaveri

译者｜奚甜甜

对于初级开发人员来说，代码调试是一个不小的挑战。本文通过案例实战介绍使用浏览器自带的调试工具替代 console.log() 打印来定位 bug 的方法。

自从成为一名开发人员，我遇到了很多的困难。对于一名初级开发人员来说，最常见的一个挑战就是代码调试。最开始，当我发现可以在 chrome 的控制台中通过 console.log() 打印值来定位 bug 的时候，我以为我找到了代码调试的圣杯，结果却证明这种方法非常低效。以下是一些经典的案例供大家调侃：

console.log(‘Total Price:’, total) // 确认该值是否已储存；

console.log(‘Here’) // 确认某个函数是否执行。

我想大部分开发人员应该已经意识到这并不是最理想的调试方法，肯定有更好的方法。

非常令人开心的是，浏览器自带的调试工具就是一个更好的方法。以下将以 Chrome 开发者工具为例具体分析。

在这篇文章中，我将会介绍如何打断点，单步执行代码，监听表达式以及在 Chrome 开发者工具中修改代码。

为了更好的理解这篇文章，您需要使用以下案例所需要的代码块。（点击这里：https://chromedevtoolsdemo.herokuapp.com/）

第一步：重现 bug

首先需要做的是重现 bug：

1. 示例是一个简单的小费计算器。如果您还没有打开示例代码，请点击这里（https://chromedevtoolsdemo.herokuapp.com/）
2. 在 Entree 1 框中输入 12
3. 在 Entree 2 框中输入 8
4. 在 Entree 3 框中输入 10
5. 在 Tax 框中输入 10
6. 选择 20% 的小费比值
7. 点击 Calculate