调试JavaScript的权威指南

了解如何使用浏览器DevTools调试器调试JavaScript

调试是程序员活动的核心技能之一。

有时我们会尽力而为,但是程序无法正常运行,例如,它崩溃了,速度很慢或正在打印错误的信息。

当您编写的程序表现不理想时,您会怎么做?

您开始调试它。

找出错误可能在哪里

第一步始终是查看正在发生的事情,并尝试确定问题的根源。在环境中有问题吗?您提供给程序的输入是否有问题?是否由于内存使用过多而导致一次崩溃?还是每次您运行它时都会发生?

这些都是解决问题时开始朝正确方向发展的关键信息。

一旦弄清了错误的出处,就可以开始检查代码的特定部分。

阅读代码

至少在工具方面,最简单的调试方法是阅读您编写的代码。大声从我们自己的声音中听到的声音有些不可思议的事情,而您在静默地阅读时却不会发生。

我经常以这种方式发现问题。

使用控制台

如果阅读该代码对您没有任何帮助,那么下一个逻辑步骤是开始向您的代码中添加几行代码,以使您有所了解。

在JavaScript前端代码中,您经常要做的是使用alert()console.log(及其酷友)。

考虑这一行:

const a = calculateA()
const b = calculateB()
const result = a + b

不知何故无法正确计算结果,因此您可以先添加alert(a)alert(b)在计算结果之前,浏览器在执行代码时将打开两个警报面板。

const a = calculateA()
const b = calculateB()
alert(a)
alert(b)
const result = a + b

如果您要传递给它,这会很好alert()是字符串或数字。一旦有了数组或对象,事情就变得太复杂了alert(),您可以使用控制台API。从...开始console.log()

const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

该值显示在浏览器开发人员工具的JavaScript控制台中。为了方便起见,我在此处解释如何在Chrome DevTools中进行调试,但是一般概念适用于所有浏览器,但在支持的功能方面有所不同。

Chrome DevTools的详细概述

Chrome开发工具

结果console.log()调用将打印到JavaScript控制台。这是每个浏览器或多或少通用的工具:

Browser console

该工具非常强大,可让您打印复杂的对象或数组,并可以检查它们的每个属性。

在里面控制台API发布后,您将看到使用它的所有选项和详细信息,因此在此我不解释所有详细信息。

调试器

调试器是浏览器开发人员工具中功能最强大的工具,可以在资料来源控制板:

The debugger

屏幕的顶部显示文件导航器。

您可以选择任何文件并在右侧检查它。这对于设置断点非常重要,我们将在后面看到。

底部是实际的调试器。

断点

当浏览器加载页面时,将执行JavaScript代码,直到遇到断点为止。

此时,执行被暂停,您可以检查所有有关正在运行的程序。

您可以检查变量值,然后一次只恢复一行程序的执行。

但是首先,什么是断点?简单来说,断点就是breakpoint指令放在您的代码中。当浏览器遇到它时,它停止。

这是开发时的好选择。另一个选项是在“源”面板中打开文件,然后单击要添加断点的行上的数字:

Added breakpoint

再次单击断点将其删除。

添加断点后,您可以重新加载页面,并且代码在找到断点时将在该执行点停止。

添加断点时,您可以在断点面板form.js在线的7有断点。您可以在那里查看所有断点,并暂时禁用它们。

还有其他类型的断点:

  • XHR /获取断点:在发送任何网络请求时触发
  • DOM断点:在DOM元素更改时触发
  • 事件侦听器断点:在发生某些事件(如鼠标单击)时触发

Breakpoints

范围

在此示例中,我在事件监听器中设置了一个断点,因此我必须提交一个表单来触发它:

Triggered breakpoint

现在,将打印范围内的所有变量及其各自的值。您可以通过双击来编辑这些变量。

观察变量和表达式

权利范围面板上有手表控制板。

它有一个+您可以用来添加任何表达式的按钮。例如添加name将打印name在示例中为可变值Flavio。你可以加name.toUpperCase()它会打印FLAVIO

Watch expressions

恢复执行

现在,自断点停止执行以来,脚本均已暂停。

在“在断点处暂停”标语上方有一组按钮,可让您更改此状态。

第一个是蓝色。单击它可恢复正常脚本执行。

第二个按钮是跨过,它将继续执行直到下一行,然后再次停止。

下一个按钮执行步入操作:进入正在执行的功能,让您了解其详细信息。

走出去相反:返回到调用此函数的外部函数。

这些是调试期间控制流的主要方法。

编辑脚本

在此devtools屏幕上,您可以编辑任何脚本,也可以在脚本停止执行时进行编辑。只需编辑文件,然后在Mac上按cmd-S或在Windows / Linux上按ctrl-S。

当然,除非您在本地工作并在devtools(一个更高级的主题)中设置工作区,否则所做的更改不会持久保存到磁盘上。

检查调用堆栈

调用堆栈很高兴看到您深入到JavaScript代码中有多少个功能级别。通过单击每个函数名称,它也可以使您在堆栈中向上移动:

Call stack

黑盒脚本

例如,通常您在不想“涉足”的库中工作时,您会信任它们,并且不想在调用堆栈中看到它们的代码。就像上面的情况一样validator.min.js,用于电子邮件验证。

我相信它做得很好,所以我可以在调用堆栈中右键单击它,然后按黑盒脚本。从那时起,就不可能进入此脚本代码,而您可以快乐地处理自己的应用程序代码。

使用浏览器devtools调试Node.js

由于Node.js基于Chrome的同一引擎构建,v8,您可以链接2并使用Chrome DevTools来检查Node.js应用程序的执行情况。

打开你的终端并运行

node --inspect

node-inspect

然后在Chrome中输入以下网址:about://inspect

node-link-browser

单击“节点”目标旁边的“打开用于节点的专用DevTools”链接,您将可以在浏览器DevTools中访问Node.js:

node-console

确保单击该按钮,而不单击下面的检查链接,因为它在我们重新启动时会自动重新连接到Node.js实例-非常方便!

免费下载我的JavaScript初学者手册


更多js教程: