跳到主要内容

初学者的JavaScript调试

  • 所需知识:基本的JavaScript
  • 要求:Web浏览器,其中之一:Google Chrome,Firefox(带Firebug)或Opera
  • 项目时间:30分钟

在过去的五年中,主要归功于jQuery和Prototype等框架的兴起,JavaScript的已经成为网络脚本的第一层语言。这种日益普及和易用性导致了Gmail等完全成熟的应用程序的创建,这些应用程序包含数千行JavaScript代码,需要有才华的开发人员团队创建。

然而,由于这种日益增加的复杂性,当出现问题时,开发人员需要强大的JavaScript调试工具,以便快速找出问题的原因并有效地修复它。一个简单的VAR通过转储警报()对话根本不会再削减它了。

在本教程中,我将概述现在可以使用的现代开发人员工具的一些功能,以帮助减轻JavaScript调试的痛苦。我们将主要关注Chrome开发人员工具和Firebug,但其中许多功能都可以在其他工具中使用,例如Opera Dragonfly。

  • 阅读我们所有的网页设计文章这里

01.控制台 - 概述

在大多数开发人员工具中,你最好的朋友是安慰;一个多用途面板,用于错误记录,DOM检查,JavaScript调试等等。根据您的浏览器,使用以下命令随时启动此面板很简单:

  • Chrome开发工具和Opera Dragonfly - Ctrl + Shift + I.
  • 萤火虫 - F12

为了帮助您调试脚本,控制台面板将自动显示代码中执行期间发生的任何错误。每个错误旁边都会提供一个文件和行号,单击该消息将跳转到该行以进行内联JavaScript调试 - 方便!

没有更多警报() - 将数据记录到控制台

然而,控制台不仅仅是被动地显示错误。它还响应您通过传递给它的命令控制台API命令行API。也许最着名和最有用的工具是.LOG()命令。

在编写任何形式的代码时,能够打印变量的值以便检查它是有帮助的。在开发人员过去的时间里可能已经使用了警报()对话提供视觉打印输出。

如今更好的解决方案是的console.log将传递给它的值打印到Console面板的方法如下:

dquo); //在控制台面板上打印“Captain's Log”

我们可以使用它来打印计算变量的值。例如:

Function CalcPhotos(){
total_photos_diff = total_photos - prev_total_photos;
//登录控制台
的console.log(total_photos_diff);
}

这种方法的好处超过了使用警报()对话是代码执行没有停止,因此我们可以多次打印变量的结果并观察它的变化而无需干预。

Var T = 3,
P = 1;


function calcPhotos(total_photos,prev_total_photos){
var total_photos_diff = total_photos - prev_total_photos;

//登录控制台
的console.log(total_photos_diff);

//更新值
T = T * 1.3;
P = P * 1.1;
}


SetInterval(function(){
CalcPhotos(T,P);
},100);

02.可区分的伐木

在上面的示例中,循环会将许多变量记录到控制台。如果倾倒大量变量,很容易看出它在多大程度上变得非常迅速。
许多人都知道标准日志功能,但知道还有其他Console API命令可以区分记录到控制台的不同类型的数据。也许最有用的是:

Console.info():提供可视“信息”图标和颜色编码(蓝色)以表示“信息”日志调用。用于表示重要事件何时发生

JavaScript debugging

Console.warn():提供可视“警告”图标和颜色编码(黄色)以表示“警告”日志调用。当某些东西超出可接受的范围时,可用于记录

JavaScript debugging

Console.error():提供可视“错误”图标和颜色编码(红色)以表示“错误”日志调用。用于表示某些事情导致您需要突出显示的错误情况

JavaScript debugging

注意:Chrome开发工具目前不提供不同类型的日志记录之间的任何视觉区别。

使用备用日志记录调用可以在打印到控制台中的信息之间进行语义和视觉区分,并且有助于提高可读性。我们可能仍希望通过将错误消息分组为相关调用块来进一步改进。我们可以这样做Console.group()

//开始第一次分组
Console.group(“照片计算”);
console.info(“总差异现在”+ total_photos_diff);
的console.log(total_photos_diff);
Console.groupEnd(); //结束组

//开始第二次分组
Console.group(“递增变量”);
Console.log(“现在总照片数:”+ T);
console.log(“Prev total photos is now:”+ p);
Console.groupEnd(); //结束组

这会在控制台中生成分组输出。视觉表示在不同的工具中是不同的。以下是Opera Dragonfly的外观:

JavaScript debugging

上面的例子只是描述了Console API的可能性。还有许多其他有用的命令可供您使用。我建议通读Firebug官方维基页面对于命令列表,尽管值得注意的是,不同工具之间的支持不一定是通用的。

04.暂停脚本执行

记录到控制台很有用,但是如果代码快速执行并且您正在尝试跟踪多个变量,那么事情很快就会失控。

为了简化生活,我们可以使用JavaScript调试工具暂停特定点的代码执行,让您可以在闲暇时评估当前的代码状态。在现代开发工具中暂停代码执行的最常用方法是使用断点

05.使用断点

要设置断点,请导航到“脚本”选项卡,然后从列表中选择要处理的脚本。现在找到您要暂停执行的行并单击边距以激活断点 - 应显示可视指示符。现在重新加载页面,执行将在指定的点停止:

JavaScript debugging

暂停执行后,您现在可以将光标悬停在任何变量上,调试器将显示一个工具提示,其中包含当前时间值的信息。

准备好之后,您可以选择使用其中一个继续执行代码执行控制按钮它们通常位于侧板的顶部。可用于逐步执行代码的选项包括:

  • “继续”:继续执行代码,直到遇到另一个断点。
  • “Step Over”:逐行逐步执行代码,以便您可以查看每行如何影响正在更新的变量。如果您的代码调用另一个函数,则JavaScript调试不会跳转到其代码中。相反,它将“跨过”并且焦点将保留在当前功能中。
  • “Step Into”:类似于Step over,除了在函数调用中单击“Step Into”时,调试器将其执行移动到函数定义中的第一行。
  • “Step Out”:如果您通过单击Step Into按钮进入函数定义,单击Step out按钮将导致执行函数定义的其余部分,并且调试器将其执行移至其父函数。

单步执行时,您可以使用侧面板来帮助您跟踪代码状态的变化,包括对本地,闭包和全局范围变量的更新。

06.条件断点

由于断点会停止代码执行,因此有时需要在满足某些条件时才触发它们。例如,如果您的代码使用每50ms触发一次的循环,您可能不希望调试器在每次迭代时停止。我们可以使用a避免这种情况
条件断点

JavaScript debugging

在上面的例子中,代码执行现在只会在Total_photos_diff变量大于200,在调试器中为我们节省了大量额外的点击。要激活条件断点,请右键单击边距中的断点,然后选择“编辑断点”以显示条件断点对话框。

07.从代码设置断点

使用开发工具界面设置断点并不总是方便甚至是不可取的。
有时,直接从代码启动调试器会更容易。这可以通过使用debugger关键字来完成。下面的示例显示了如何通过代码中的条件语句暂停代码执行:

if(total_photos_diff> 300){
调试器; //启动调试器并暂停执行
}

暂停执行的其他方法

除了手动设置断点之外,开发人员工具还为您提供了许多根据各种方案暂停代码执行的机会。

08.打破DOM突变

如果您想调试处理DOM突变的一段代码,那么开发人员工具提供了一种在DOM节点更改时暂停代码执行的方法。

使用Elements面板,右键单击正在修改的节点,您将获得一组Break on DOM更改选项。重新加载和下次元素更改时脚本执行将停止。

您可以使用DOM断点侧面板跟踪已设置的断点。

09.暂停所有/未捕获的异常

大多数开发工具允许您在遇到异常时暂停脚本执行。在Chrome开发工具中,可以使用界面底行的“暂停”图标切换此功能。

JavaScript debugging

您可以选择是中断所有异常,还是仅查看脚本未处理的异常。下面的示例显示了一个未捕获的异常和一个被“捕获”的异常(通过try / Catch处理)。

Var T = 3,
P = 1;


function calcPhotos(total_photos,prev_total_photos){
var total_photos_diff = total_photos - prev_total_photos;

//开始第一次分组

console.info(“总差异现在”+ total_photos_diff);


//更新值
T = T + 5;
P = P + 1;

//未捕获的异常 - 将暂停
if(total_photos_diff> 300){
扔0;
}

//通过try / Catch捕获异常
//只有在“所有预期暂停”激活时才会暂停
if(total_photos_diff> 200){
尝试{
。$$( '#不存在的元素')隐藏();
} Catch(e){
Console.error(E);
}
}

}


SetInterval(function(){
CalcPhotos(T,P);
},50);

10.调用栈的介绍

如果在脚本中遇到错误,则暂停异常将停止在代码中抛出错误的位置执行。但是,如果导致错误的原因并不明显呢?是什么导致了错误发生?我们如何发现这些信息?

当脚本执行停止时,您会注意到工具界面右侧的面板提供了大量有用的信息,其中最有价值的可能是调用堆栈。

调用堆栈显示完整的执行路径,该路径导致代码暂停,从而为您提供导致错误的代码流的鸟瞰视图。

在下面的例子中,我故意抛出一个错误IncrementValues()启动调试器的功能。开发人员工具显示导致错误的完整调用堆栈,这允许我退回代码流以确定任何潜在问题。

JavaScript debugging

11.进一步阅读和资源

希望上面的示例提供了一些有用的概述,您可以使用一些方法来简化JavaScript调试。

但是,本文仅概述了可以实现的内容。要了解更多信息,我建议您花一些时间使用以下资源,以便真正了解开发人员工具的真正功能:

  • Firebug Wiki:Firebug是最初的“开发人员工具”,它的Wiki在各种API和工具中提供了大量信息。
  • Chrome开发者工具文档:Chrome开发工具文档提供了大量有关如何充分利用其工具的信息。即便是最有经验的人也会在这里学到一些
  • 视频: ”Chrome Dev Tools重装上阵“:在2011年的谷歌I / O上拍摄,保罗爱尔兰和帕维尔费尔德曼提供了对Chrome开发工具强大功能的精彩概述。一定要看!
  • Opera Dragonfly调试器文档:即使您每天不使用Opera,其文档中描述的概念也适用于大多数开发人员工具。
  • Chrome开发工具cheatsheet:使用Chrome Dev工具进行简便打印。

喜欢这个?阅读这些!



翻译字数超限