22

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

是否可以以某种方式将断点设置为例如具有 ID 的元素的单击事件registerButton，或者在某处找到绑定到该事件的函数？

我找到了 Firefox 插件Javascript Deobfuscator，它显示了当前执行的 JavaScript，这很好，但是我需要调试的代码是使用jQuery，所以即使是最简单的事件也会有大量的函数调用，所以我不能使用它任何一个。

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

有谁知道一些工具可以将缩小的 JavaScript转换回格式化的代码，比如function(){alert("aaa");v=3;}转回

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

8 回答 8

16

好吧，这可能比它的价值麻烦多了，但看起来你有三件事要做：

  1. 消除源。我喜欢这个快速而肮脏的在线工具。只需粘贴您的代码并单击按钮。从来没有让我失望过，即使是最时髦的 JavaScript。

  2. 所有jQuery 事件绑定器都被路由到"jQuery.event.add"（这是未构建的源代码中的样子），因此您需要找到该方法并在那里设置断点。

  3. 如果你已经走到这一步，你需要做的就是在断点处检查调用堆栈，看看谁调用了什么。请注意，由于您位于库的内部位置，因此您需要检查一些跳转（因为代码调用"jQuery.event.add"很可能只是其他 jQuery 函数）。

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

编辑：另外，请参阅“如何使用 FireBug（或类似工具）调试 Javascript/jQuery 事件绑定”。

您也许可以摆脱：

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

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

于 2009-04-05T13:22:25.527 回答
4

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

于 2009-04-05T11:43:29.290 回答
3

只是一个更新：

Google Chrome（其中的开发工具）支持各种断点，以及Event 上的 break。

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

您可以观看一段视频，其中展示了Google IO的所有功能。

还有内置的deminifier / unminimizer / prettifier将帮助您在压缩的 javascript 文件上手动设置断点。

于 2011-07-31T11:20:51.037 回答
1

您可以做的是获得缩小的代码 - 您将可以访问它。根据 Crescent Fresh 的 (1) 选项或您喜欢的任何方法对代码进行分解。

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

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

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

简单的。

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

于 2011-06-14T11:36:08.913 回答
1

另一个更新：现在有一个可以美化 JavaScript 的 firebug 扩展：

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

它在 Firefox 12.0 中非常适合我。

感谢这个答案发现它。

于 2012-05-29T10:03:57.277 回答
0

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

于 2009-04-05T11:37:57.073 回答
0

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

于 2009-04-05T11:56:38.840 回答
0

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

于 2013-01-15T10:07:29.380 回答