如何调试javascript代码?[关闭]

Firebug 是最流行的工具之一。

所有现代浏览器都带有某种形式的内置javascript调试应用程序。这些细节将在相关技术的网页上介绍。我个人对调试javascript的偏好是 Firebug 在Firefox中。我并不是说firebug比任何其他浏览器都好,这取决于你的个人喜好,你可能应该在所有浏览器中测试你的站点,但是我的第一个,个人的,第一个选择总是firebug。

我将介绍下面的一些高级解决方案,使用 以萤火虫为例 :

火狐

Firefox自带了内置的JavaScript调试工具,但我建议您安装 Firebug 加上。这提供了一些基于基本版本的附加功能,这些功能非常方便。我只想谈谈萤火虫。

安装firebug后,您可以按如下方式访问它:

首先,如果您右键单击任何元素,您可以 用firebug检查元素 :

单击此项将打开浏览器底部的firebug窗格:

firebug提供了几个特性,但其中一个感兴趣的是脚本选项卡。单击“脚本”选项卡将打开以下窗口:

显然,要调试,需要单击 再装填 :

现在可以添加 breakpoints 单击要将断点添加到的javascript代码段左侧的行:

当您的断点被击中时,它将如下所示:

您还可以添加 watch variables 一般来说,在一个现代化的调试工具中,你可以做任何你想做的事情。

有关firebug中提供的各种选项的更多信息,请查看 Firebug FAQ .

铬

chrome也有自己的内置javascript调试选项,其工作方式非常类似, 右键单击、检查元素等。 . 看一看 Chrome Developer Tools . 我通常发现 stack traces 比萤火虫好。

Internet资源管理器

如果你的发展 .NET 并且使用visual studio使用web开发环境,您可以通过放置断点等方式直接调试javascript代码。 VB.NET 代码。

如果没有,Internet Explorer还提供上面显示的所有工具。令人恼火的是,而不是 在“检查元素”上单击鼠标右键 chrome或firefox的特性,您可以通过按 F12 . This question 涵盖了大部分要点。

• Internet资源管理器8(开发人员工具- F12 )在国际探险界,其他的都是二流的
• 火狐和 Firebug . 击中 F12 显示。
• Safari(显示菜单栏, 偏好 -gt; 先进的 -gt; 显影 菜单栏)
• google chrome javascript控制台( F12 或(或) Ctrl键 + 换档 + J )大部分浏览器与safari相同,但safari更适合imho。
• 歌剧( 工具 -gt; 先进的 -gt; 开发人员工具 )

有一个 调试器 在javascript中调试javascript代码的关键字。放 调试器; javascript代码中的片段。它将自动开始调试javascript代码。

例如:

假设这是你的 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();

如说 Console

快乐黑客!

从firebug和ie调试器开始。

不过,要小心javascript中的调试器。每隔一段时间,它们都会影响环境,足以导致您试图调试的某些错误。

实例:

对于internet explorer来说,这通常是一个逐渐放缓的过程,是一种内存泄漏类型的交易。大约半小时后我需要重新开始。似乎很正常。

对于firebug来说,可能已经一年多了,所以它可能是一个旧版本。结果,我不记得细节,但基本上代码没有正确运行,在尝试调试一段时间后,我禁用了firebug,代码运行良好。

虽然 alert(msg); 在那些“我只想知道发生了什么”的场景中工作… 每一个 开发人员遇到过这样的情况:您最终进入了一个(非常大或无止境的)循环,而您无法脱离这个循环。

我建议在开发过程中,如果您想要一个非常直观的调试选项,请使用一个可以让您中断的调试选项。(PS歌剧,狩猎?和铬?所有这些都在它们的本地对话框中可用)

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

使用上面的方法,您可以进入一个弹出式调试的大循环,在这个循环中按 进入 / 好啊 允许您跳过每个消息,但按 逃逸 / 取消 让你很好的爆发。

我用 WebKit's 开发人员菜单/控制台(Safari 4)。它几乎和萤火虫一样。

console.log() 新的黑色——比 alert() .

我的第一步总是验证html并检查 JSLint . 如果您有干净的标记和有效的javascript代码,那么是时候使用firebug或其他调试器了。

visual studio 2008有一些非常好的javascript调试工具。您可以在客户端javascript代码中放置断点,并使用与服务器端代码完全相同的工具单步执行。不需要附加到进程或执行任何复杂的操作来启用它。

我使用了一些工具: Fiddler ,firebug和visual studio。我听说internet explorer有一个很好的内置调试器。

我以前用过 Firebug ,直到InternetExplorer8问世。我不是internetexplorer的超级粉丝,但是在花了一些时间使用内置的开发工具(其中包括一个非常好的调试器)之后,使用其他工具似乎毫无意义。我不得不向微软致敬他们在这个工具上做得非常出色。

你也可以退房 YUI Logger . 使用它所要做的就是在html中包含几个标记。它是firebug的有益补充,firebug或多或少是必须的。

我找到了新版本的InternetExplorer8(按 F12 )非常适合调试javascript代码。

当然, Firebug 如果你用火狐的话很好。

除了使用visual studio的javascript调试器之外,我还编写了自己的简单面板,包括在页面中。就像 Immediate window 在visual studio中。我可以更改变量的值,调用函数,并查看变量的值。它只计算在文本字段中编写的代码。

我在用 Venkman ,的javascript调试器 XUL 应用。

除了firebug和浏览器本机开发扩展之外 喷气式飞机网风暴 IDE附带 remote debug support for Firefox and Chrome (需要扩展)内置。

还支持:

• 棺材: how to debug coffeescript in node.js with webstorm 6 source maps
• node.js

免费测试的选项是30个试用版或使用 Early Access Version .

如果你正在使用 Visual Studio 只要放 debugger; 在您要调试的代码之上。在执行期间,控件将在该位置暂停,您可以从此处开始逐步调试。

与大多数答案一样,这实际上取决于:您试图通过调试实现什么?基本开发,解决性能问题?对于基本发展,前面的回答都是充分的。

对于性能测试,我建议使用firebug。对于我所从事的许多项目来说,能够描述哪些方法在时间上最昂贵是非常宝贵的。随着客户端库变得越来越健壮,并且客户端通常承担更多的责任,这种调试和分析只会变得更加有用。

Firebug控制台API: http://getfirebug.com/console.html

按压 F12 web开发人员可以在不离开浏览器的情况下快速调试javascript代码。它内置在每一个windows安装中。

在 Internet Explorer 11 , F12工具 提供调试工具,如断点、监视和本地变量查看以及控制台 用于消息和即时代码执行。