Question

我需要为某个事件设置一个断点，但我不知道，它在哪里被定义，因为我有很多最小化的JavaScript代码，所以我无法手动找到它。

是否有可能以某种方式设置断点，例如ID为registerButton的元素的click事件，或者找到哪个函数绑定到该事件？

我发现Firefox附加组件 Javascript Deobfuscator ，它显示了当前执行的JavaScript，这很好，但我需要调试的代码是使用 jQuery ，所以有即使在最简单的事件上也会调用函数调用，所以我也不能使用它。

是否有专门为 jQuery 制作的调试器？

是否有人知道某些工具可将缩小的JavaScript 重新转换为格式化的代码，例如将function(){alert("aaa");v=3;}转回

function() {
   alert("aaa");
   v = 3;
}

Answer 1

嗯，这可能比它的价值太麻烦，但看起来你有三件事要做：

缩小来源。我喜欢this online tool快速而肮脏。只需粘贴代码并单击按钮即可。从来没有让我失望，即使是最时髦的JavaScript。
所有 jQuery事件绑定器都被路由到"jQuery.event.add"（here's what it looks like in the unbuilt source），因此您需要找到该方法并在那里设置断点。
如果你已达到这个目的，你需要做的就是检查断点处的callstack以查看谁叫什么。请注意，由于您位于库中的内部位置，因此需要检查一些跳转（因为调用"jQuery.event.add"的代码很可能只是其他jQuery函数）。

请注意3）需要Firebug用于FF3。如果您像我一样并且更喜欢使用Firebug for FF2进行调试，则可以使用古老的arguments.callee.caller.toString()方法检查callstack，根据需要插入尽可能多的".caller。

修改：另请参阅"How to debug Javascript/jQuery event bindings with FireBug (or similar tool)"。

你可以逃脱：

// inspect    
var clickEvents = jQuery.data($('#foo').get(0), "events").click;
jQuery.each(clickEvents, function(key, value) {
    alert(value) // alerts function body
})

上面的技巧将让你看到你的事件处理代码，你可以开始在你的源代码中找到它，而不是试图在jQuery中设置断点。源。

Answer 2

首先替换缩小的jquery或您使用格式化的任何其他来源。我发现的另一个有用的技巧是在firebug中使用分析器。探查器显示正在执行的功能，您可以单击一个并转到那里设置断点。

Answer 3

只是更新：

Google Chrome（其中的 dev工具）支持各种断点，以及中断事件。

所有事件以及设备方向更改和计时器

您可以看到a video，其中包含 Google IO 的所有功能。

还有内置的 deminifier / unminimizer / 美化器，它可以帮助您在压缩的javascript文件上手动设置断点。

Answer 4

你能做的就是获得缩小的代码 - 你可以访问它。根据Crescent Fresh（1）选项或您喜欢的任何方法缩小代码。

然后下载并安装Fiddler - 所有Web开发人员都应该安装这个令人难以置信的工具。

然后使用Fiddler，您可以使用本地驱动器上的本地unminified.js拦截浏览器对minified.js文件的调用。

Fiddler基本上拦截了浏览器对特定文件的请求，并可以向浏览器提供不同的文件。因此，您现在可以查看未缩小的代码。

易。

另一个选择是使用Firefox并安装Venkman调试器 - 远比Firebug恕我直言 - 并且Venkman调试器有一个“漂亮的打印”选项，可以在运行时直观地缩小缩小的代码。坚持你现在想要的断点......

Answer 5

另一个更新：现在有一个firebug扩展来美化JavaScript：

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

在Firefox 12.0中它非常适合我。

感谢此answer发现它。

Answer 6

您可以在javascript文件中的任何位置使用debugger命令。当解释器达到该声明时，如果调试器可用（如Firebug）则会触发

Answer 7

找到该行并放置一个断点。然后重新加载站点/页面。然后当遇到断点时，firebug将自动暂停执行语句。

Answer 8

这将完成这项工作。 http://jsbeautifier.org/ 您还可以在Google上搜索javascript美化器。

使用Firebug调试JavaScript事件

8 个答案: