学习如何使用Chrome DevTools来进行JavaScript调试

桃扇骨 2024-04-17 06:01 61阅读 0赞

作为一个新的开发者，查找和修复`BUG`是很困难的。你可能会在你的代码中任意使用`console.log()`方法来使得你的代码正确的运行。**不再!**

这是一篇关于正确调试的方法的文章！您将学习如何使用`Chrome`开发者工具设置断点并逐步执行代码。此工作流通常是查找和修复代码中的错误的更有效方法。

本教程向您展示如何调试一个具体的问题，但您学习的一般工作流程有助于调试所有类型的`JavaScript`错误。

### 1.重现BUG ###

调试的第一步一般都是重现这个`BUG`。“重现`BUG`”意味着找到一系列一致导致`BUG`出现的操作。  
您可能需要多次重现该错误，因此请尝试消除任何不必要的步骤。

按照下面的说明重现您将在本教程中修复的错误。

*  这是我们将在本教程中使用的网页。确保在新标签页中打开此页面：[OPEN DEMO][]。
 *  在`Number1`中输入5
 *  在`Number2`中输入1
 *  点击`Add Number1 and Number2`
 *  查看输入和按钮下方的标签。显示5 + 1 = 51。

### 2.使用断点来进行调试 ###

`DevTools`允许您在执行过程中暂停代码，并在那个时刻检查所有变量的值。暂停代码的工具称为断点。现在就试试：

*  返回`Demo`并按下`Command + Option + I（Mac）`或`Control + Shift + I（Windows，Linux）`打开DevTools。
 *  单击`Sources`选项卡。
 *  单击“事件侦听器断点”以展开该部分。 `DevTools`显示了可扩展事件类别的列表，例如动画和剪贴板。
 *  在“鼠标”事件类别旁边，单击“展开”
 *  选中单击复选框。
 *  返回`DEMO`，再次单击`Add Number1 and Number2`按钮。`DevTools`暂停`Demo`并在`Sources`面板中突出显示一行代码。 `DevTools`强调了这一行代码：

function onClick() { }

### 为什么 ###

选择“单击”时，可以在所有单击事件上设置基于事件的断点。单击任何节点，并且该节点具有单击处理程序时，`DevTools`会自动暂停该节点的单击处理程序的第一行。

### 3.逐步完成代码 ###

错误的一个常见原因是脚本以错误的顺序执行。单步执行代码使您可以一次一行地执行代码的执行，并以与预期不同的顺序确定其执行的确切位置。现在就试试：

*  在`DevTools`的`Sources`面板上，单击`Step into next function call`

使用此按钮可以逐步执行`onClick()`函数，一行一行。当`DevTools`突出显示以下代码行时停止：

if (inputsAreEmpty()) { }

*  现在单击`Step over next`函数调用按钮：

这告诉`DevTools`执行`inputsAreEmpty()`而不进入它。请注意`DevTools`如何跳过几行代码。  
这是因为`inputsAreEmpty()`计算为`false`，因此if语句的代码块没有执行。

这是逐步执行代码的基本思想。如果你看一下`get-started.js`中的代码，你会发现`bug`可能在`updateLabel()`函数中的某个地方。您可以使用其他类型的断点来暂停代码，使其更接近错误的位置，而不是单步执行每行代码。

### 4.设置另一个断点 ###

代码行断点是最常见的断点类型。当您有一行要暂停的特定代码行时，请使用代码行断点。现在就试试：

*  查看`updateLabel()`中的最后一行代码，如下所示：

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

在此代码的左侧，您可以看到此特定代码行的行号：32。单击32. `DevTools`在32的顶部放置一个蓝色图标。这意味着在此处有一行代码断点线。 `DevTools`现在总是在执行这行代码之前暂停。

*  单击**Resume script execution** 按钮:脚本继续执行，直到它到达您放置断点的代码行。
 *  查看`updateLabel()`中已执行的代码行。`DevTools`打印出`addend1`，`addend2`和`sum`的值。

`sum`的值看起来很可疑。当它应该是一个数字时，看起来它被评估为一个字符串。这可能是导致`bug`的原因。

### 5.检查变量的值 ###

`bug`的另一个常见原因是变量或函数产生的值与预期值不同。许多开发人员使用`console.log()`来查看值随时间的变化情况，但是`console.log()`由于两个原因可能很乏味且无效。其一，您可能需要通过调用`console.log()`来手动编辑代码。二，您可能不确切知道哪个变量与错误相关，因此您可能需要注销许多变量。

一个`DevTools`替代`console.log()`是`Watch Expressions`。使用`Watch Expressions`监控变量的值随时间的变化。顾名思义，`Watch Expressions`不仅限于变量。您可以在`Watch Expression`中存储任何有效的`JavaScript`表达式。现在就试试：

*  在`DevTools`的`Sources`面板上，单击`Watch`。该部分扩大。
 *  点击`Add Expression`
 *  类型`typeof sum`
 *  按`Enter`键。 `DevTools`显示了`sumof：“string”`。冒号右侧的值是您的`Watch Expression`的结果。

正如所怀疑的那样，当它应该是一个数字时，`sum`被评估为一个字符串。这是演示错误的原因。

第二个`DevTools`替代`console.log()`是控制台。使用控制台评估任意`JavaScript`语句。开发人员通常在调试时使用`Console`来覆盖变量值。在您的情况下，控制台可以帮助您测试刚刚发现的错误的潜在修复程序。现在就试试：

*  如果您没有打开控制台画板，请按`Escape`将其打开。它在`DevTools`窗口的底部打开。
 *  在控制台中，键入`parseInt（addend1）`\+ `parseInt（addend2）`。
 *  按`Enter`键。 `DevTools`评估语句并输出6，这是您期望`demo`生成的结果。

### 6.应用修复程序 ###

您已经确定了该`bug`的潜在修复方法。剩下的就是通过编辑代码并重新运行`demo`来尝试修复。  
您无需离开`DevTools`即可应用此修复程序。您可以直接在`DevTools UI`中编辑`JavaScript`代码。  
立即尝试：

1.  在`DevTools`的`Sources`面板上的代码编辑器中，将`var sum = addend1 + addend2`替换为`var sum = parseInt（addend1）+ parseInt（addend2）`;这是您目前暂停的一行。
2.  按`Command + S（Mac）`或`Control + S（Windows，Linux）`以保存更改。代码的背景变为红色，表示脚本已在`DevTools`中更改。
3.  单击“停用断点”

尝试使用不同值的`demo`。该`demo`现在应该正确计算总和。

此页面的部分内容是基于\[ [shared by Google][]的工作进行的修改\]()，并根据Creative Commons 3.0 Attribution License中描述的条款使用。  
本文改编自：Kayce Basques[Get Started with Debugging JavaScript in Chrome DevTools][]。

想要更多`JavaScript`吗？看看我最近的教程/文章：

*  [August JavaScript Recap: 17 Articles and Tutorials I wrote this month!][August JavaScript Recap_ 17 Articles and Tutorials I wrote this month]
 *  [JavaScript — WTF is ES6, ES8, ES 2017, ECMAScript… ?][JavaScript _ WTF is ES6_ ES8_ ES 2017_ ECMAScript_]
 *  [Learn JavaScript ES6 — Array.find & Array.findIndex][Learn JavaScript ES6 _ Array.find _ Array.findIndex]

如果这篇文章有帮助，请点击下面的拍手?按钮几次以显示您的支持！

> 作者:Brandon Morelli

> 原文链接：https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]

[OPEN DEMO]: https://googlechrome.github.io/devtools-samples/debug-js/get-started
[shared by Google]: https://developers.google.com/readme/policies/
[Get Started with Debugging JavaScript in Chrome DevTools]: https://developers.google.com/web/tools/chrome-devtools/javascript/
[August JavaScript Recap_ 17 Articles and Tutorials I wrote this month]: https://codeburst.io/august-javascript-recap-17-articles-and-tutorials-i-wrote-this-month-17fad9fbd63c
[JavaScript _ WTF is ES6_ ES8_ ES 2017_ ECMAScript_]: https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c
[Learn JavaScript ES6 _ Array.find _ Array.findIndex]: https://codeburst.io/learn-javascript-es6-array-find-array-findindex-7fe4f63c6974
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/83c118c2038b4b10accf4d9fde135ace.png