ES 6 调试

开发人员在编写代码时偶尔会犯错误。程序或脚本中的错误称为bug。

发现和修复bug的过程称为调试,是开发过程的正常部分。本章将介绍帮助您调试任务的工具和技术。

IE中的错误消息

追踪错误的最基本方法是打开浏览器中的错误信息。默认情况下,当页面上发生错误时,Internet Explorer会在状态栏中显示错误图标。

a84787f88a2d5537834e0ee5645f664.jpg

双击此图标将转到一个对话框,显示有关已发生的特定错误的信息。

由于此图标很容易被忽略,因此Internet Explorer为您提供了在发生错误时自动显示“错误”对话框的选项。

要启用此选项,请选择工具→Internet选项→高级选项卡,然后最后选中“ 显示NotificationaboutEvery脚本错误 ”框选项,如以下屏幕截图所示。

c95f36cec69b0d7916ab4b28f1d6092.jpg

Firefox或Mozilla中的错误消息

其他浏览器(如Firefox,Netscape和Mozilla)会将错误消息发送到名为JavaScript控制台或错误控制台的特殊窗口。要查看控制台,请选择工具→错误控制台或Web开发。

不幸的是,由于这些浏览器在发生错误时不提供可视指示,因此您必须保持控制台处于打开状态,并在脚本执行时注意错误。

17c421ed8fde7d2a912a0bb2e0bf42e.jpg

错误通知

在控制台或Internet Explorer对话框中显示的错误通知是语法和运行时错误的结果。这些错误通知包括发生错误的行号。

如果您使用的是Firefox,则可以单击错误控制台中的错误,转到出现错误的脚本中的确切行。

调试脚本

有多种方法可以调试JavaScript。以下是一些方法。

使用JavaScript验证器

检查JavaScript代码是否有奇怪bug的一种方法是通过一个程序来运行它,该程序会检查代码,以确保它是有效的,并且遵循该语言的官方语法规则。这些程序被称为验证解析器或简称为验证器,通常带有商业HTML和JavaScript编辑器。

JavaScript最方便的验证器是Douglas Crockford的JavaScript Lint,它可以在Douglas Crockford的JavaScript Lint上免费获得。

只需访问web页面,将JavaScript(仅JavaScript)代码粘贴到提供的文本区域中,然后单击jslint按钮。这个程序将解析JavaScript代码,确保所有变量和函数定义都遵循正确的语法。它还将检查JavaScript语句,例如if和while,以确保它们也遵循正确的格式。

将调试代码添加到您的程序

您可以使用程序中的alert()或document.write()方法来调试代码。例如,您可以编写如下内容 -

var debugging = true; var whichImage = "widget"; 
if( debugging )  
   alert( "Calls swapImage() with argument: " + whichImage ); 
   var swapStatus = swapImage( whichImage ); 
if( debugging )  
alert( "Exits swapImage() with swapStatus=" + swapStatus );

通过检查alert()出现的内容和顺序,您可以非常轻松地检查程序的运行状况。

使用JavaScript调试器

调试器是一个应用程序,它将脚本执行的所有方面置于程序员的控制之下。调试器通过一个接口提供对脚本状态的细粒度控制,该接口允许您检查和设置值,并控制执行流。

一旦将脚本加载到调试器中,就可以一次运行一行,或者指示脚本在某些断点处停止。一旦停止执行,程序员就可以检查脚本的状态及其变量,以确定是否出了什么问题。您还可以观察变量的值的变化。

最新版本的Mozilla JavaScript调试器(代号为Venkman)适用于Mozilla和Netscape浏览器,可以从?www.hacksrus.com/~ginda/ Venkman下载。

对开发人员有用的提示

您可以记住以下提示,以减少脚本中的错误数量,并简化调试过程

● 使用大量的评论。注释使您能够解释为什么以这种方式编写脚本,并解释代码中特别困难的部分。

● 始终使用缩进使代码易于阅读。缩进语句还使您更容易匹配开始和结束标记、大括号和其他HTML和脚本元素。

● 编写模块代码。只要可能,将语句分组到函数中。函数允许您对相关语句进行分组,并以最小的工作量测试和重用代码的某些部分。

● 在命名变量和函数时保持一致。尝试使用足够长、有意义、描述变量内容或函数用途的名称。

● 在命名变量和函数时使用一致的语法。换句话说,保持它们都是小写或大写;如果您更喜欢驼峰符号,请始终如一地使用它。

● 以模块化的方式测试长脚本。换句话说,在测试脚本的任何部分之前,不要尝试编写整个脚本。在添加代码的下一部分之前,先编写一段代码并让它开始工作。

● 使用描述性变量和函数名,避免使用单个字符名。

● 注意你的引号。请记住,引号是成对地围绕字符串使用的,而且两个引号必须具有相同的样式(单引号或双引号)。

● 注意等号。您不应该使用单个=来进行比较。

● 使用var关键字显式声明变量。

使用Node.js进行调试

Node.js包括一个功能齐全的调试实用程序。要使用它,可以使用debug参数启动Node.js,后面跟着调试脚本的路径。

node debug test.js

将启动一个提示符,指示调试器已成功启动。

要在指定位置应用断点,请在源代码中调用调试器,如下面的代码所示。

// myscript.js 
x = 5; 
setTimeout(() => { 
   debugger; 
   console.log('world'); 
}, 1000); 
console.log('hello');

下面是一组可以与Node一起使用的单步执行命令。

Sr.No单步执行命令和描述
1

cont,c

继续

2

next,n

下一个

3

step,s

介入、涉足

4

out,o

退出

5

pause

暂停代码。类似于在开发人员工具中暂停

可以在此处找到Node的调试命令的完整列表 - https://nodejs.org/api/debugger.html。


Visual Studio Code和调试

Visual Studio Code的一个关键特性是它对Node.js Runtime的内置调试支持。为了调试其他语言的代码,它提供了调试器扩展。

1.jpg

调试器提供了大量功能,允许我们启动配置文件,应用/删除/禁用和启用断点,变量或启用数据检查等。

有关使用VS Code进行调试的详细指南,请访问此处 - https://code.visualstudio.com/docs/editor/debugging。