Answers:
Firebug是用于此目的的最受欢迎的工具之一。
所有现代浏览器都带有某种形式的内置JavaScript调试应用程序。这些的详细信息将在相关技术网页上介绍。我个人对调试JavaScript的偏好是Firebug Firefox中的。我并不是说Firebug比其他任何一个都要好。这取决于您的个人喜好,无论如何您都应该在所有浏览器中测试您的网站(我个人的首选始终是Firebug)。
我将以Firebug为例介绍以下一些高级解决方案:
Firefox带有自己的内置JavaScript调试工具,但是我建议您安装Firebug插件。这提供了一些方便的基于基本版本的附加功能。我只在这里谈论Firebug。
安装Firebug后,您可以按以下方式进行访问:
首先,如果您右键单击任何元素,则可以使用Firebug检查元素:
单击此按钮将在浏览器底部打开Firebug窗格:
Firebug提供了多种功能,但我们感兴趣的功能是脚本选项卡。单击脚本选项卡将打开以下窗口:
显然,要调试,您需要单击reload:
现在,您可以添加断点通过单击行至一块要断点添加到JavaScript代码的左边:
当您的断点被击中时,它将如下所示:
您还可以添加监视变量,并通常执行现代调试工具中期望的所有操作。
有关Firebug中提供的各种选项的更多信息,请查看Firebug FAQ。
Chrome还具有自己的内置JavaScript调试选项,该选项的工作方式非常相似,例如右键单击,检查元素等。看看Chrome开发者工具。通常,我发现Chrome中的堆栈跟踪要比Firebug好。
如果您是在.NET中进行开发并在Web开发环境中使用Visual Studio,则可以通过放置断点等直接调试JavaScript代码。您的JavaScript代码看起来与调试C#或VB.NET代码完全相同。
如果您没有此功能,Internet Explorer还将提供上面显示的所有工具。烦人的是,您没有按右键检查 Chrome或Firefox的元素功能,而是通过按F12来访问开发人员工具。这个问题涵盖了大多数要点。
JavaScript中有一个debugger关键字,用于调试JavaScript代码。放调试器;您的JavaScript代码中的代码段。此时它将自动开始调试JavaScript代码。
例如:
假设这是您的test.js文件
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();
我使用的是旧的好printf
方法(一种古老的技术,可以随时使用)。
看魔术%o
:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
%o
转储JS对象的可单击和可深浏览的漂亮打印内容。%s
被显示只是为了记录。
还有这个:
console.log("%s", new Error().stack);
为您提供类似于Java的堆栈跟踪到new Error()
调用点(包括文件路径和行号 !!)。
双方%o
并new Error().stack
在Chrome和Firefox提供。
使用如此强大的工具,您可以假设JS出了什么问题,调试输出(不要忘记包装if
语句以减少数据量)并验证您的假设。解决问题或做出新的假设,或将更多调试输出转换为位问题。
也可用于堆栈跟踪:
console.trace();
如控制台
骇客骇客!
尽管alert(msg);
可以在“我只想了解发生了什么”的情况下工作,但是 每个开发人员都遇到过这样的情况,即您陷入了一个无法打破的(非常大或无尽)的循环中。
我建议在开发过程中,如果您需要一个非常直观的调试选项,请使用允许您中断的调试选项。(PS Opera,Safari和Chrome?在其本机对话框中都可以使用此功能)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}
通过上面的内容,您可以进入弹出式调试的大循环,按Enter/ Ok可使您跳过每条消息,而按Escape/ Cancel可使您分好。
我使用一些工具:Fiddler,Firebug和Visual Studio。我听说Internet Explorer 8有一个很好的内置调试器。
我曾经使用Firebug,直到Internet Explorer 8出现。我不是Internet Explorer的忠实拥护者,但是在花了一些时间使用内置的开发人员工具(包括一个非常不错的调试器)之后,使用其他任何东西似乎毫无意义。我不得不向微软表示敬意,他们在此工具上做得非常出色。
除了Firebug和浏览器本地开发人员扩展之外,JetBrains WebStorm IDE还内置了对Firefox和Chrome的远程调试支持(需要扩展)。
还支持:
免费试用的选项是30试用版或使用抢先体验版。
如果您使用的是Visual Studio,只需将debugger;
要调试的代码放在上面。在执行期间,控件将在该位置暂停,您可以从此处逐步进行调试。
与大多数答案一样,它实际上取决于:您想通过调试实现什么?基本开发,解决性能问题?对于基础开发,所有先前的答案都绰绰有余。
对于性能测试,我建议使用Firebug。对于我从事的许多项目而言,能够确定哪种方法在时间上最昂贵是非常宝贵的。随着客户端库变得越来越健壮,并且一般来说,将更多的责任放在客户端上,这种类型的调试和性能分析将变得更加有用。
Firebug控制台API:http: //getfirebug.com/console.html
通过按F12 Web,开发人员可以快速调试JavaScript代码,而无需离开浏览器。它内置于Windows的每个安装中。
在Internet Explorer 11中,F12工具提供了调试工具(例如断点,监视和局部变量查看)以及用于消息和立即执行代码的控制台。