使用Firebug调试JavaScript事件 [英] Debugging JavaScript events with Firebug

问题描述

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

有可能以某种方式设置断点，例如ID为$ code> registerButton 的元素的点击事件，或者找到某个功能的位置绑定到该事件？

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

<有没有特别为 jQuery 进行调试？

有没有人知道一些工具，将简化的JavaScript 转换为格式的代码，如转动 function（）{alert（aaa）; v = 3;} 回到

  function（）{
警报（aaa）; 
 v = 3; 
} 
  

解决方案

麻烦很多，但是看起来你有三件事要做：

1. 我喜欢这个在线工具，快速而肮脏。只需粘贴你的代码，然后点击按钮。没有让我失望，即使是最时髦的JavaScript。




2. 所有 jQuery事件绑定器路由到jQuery.event.add（这里是未完成的源代码），因此您需要找到该方法并在其中设置断点。




3. 如果您有到目前为止，你需要做的就是在断点处检查callstack，看看谁叫什么。请注意，由于您在图书馆的内部位置，您需要检查几个跳出（因为代码调用jQuery.event.add最有可能只是其他的jQuery函数）。

请注意，3）需要Firebug for FF3。如果您喜欢我，并且喜欢使用Firebug for FF2调试，可以使用古老的 arguments.callee.caller.toString（）方法来检查callstack，插入根据需要调用。

---

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

您可能可以获得离开：

  //检查
 var clickEvents = jQuery.data（$（'＃foo'）。get （0），事件）点击; 
 jQuery.each（clickEvents，function（key，value）{
 alert（value）// alert function body 
}）
  

上述技巧将让您看到您的事件处理代码，您可以在 中开始搜索>源代码，而不是在jQuery的源代码中设置断点。

I need to set a breakpoint to certain event, but I don't know, where is it defined, because I've got giant bunch of minimized JavaScript code, so I can't find it manually.

Is it possible to somehow set a breakpoint to for example the click event of an element with ID registerButton, or find somewhere which function is bound to that event?

I found the Firefox add-on Javascript Deobfuscator, which shows currently executed JavaScript, which is nice, but the code I need to debug is using jQuery, so there's loads of function calls even on the simplest event, so I can't use that either.

Is there any debugger made especially for jQuery?

Does anybody know some tool that turns minified JavaScript back into formatted code like turn function(){alert("aaa");v=3;} back into

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

解决方案

Well it might all be too much trouble than it's worth, but it looks like you have three things to do:

1. De-minify the source. I like this online tool for a quick and dirty. Just paste your code and click the button. Has never let me down, even on the most funky of JavaScript.

2. All jQuery event binders get routed to "jQuery.event.add" (here's what it looks like in the unbuilt source), so you need to find that method and set a breakpoint there.

3. If you have reached this far, all you need to do is inspect the callstack at the breakpoint to see who called what. Note that since you're at an internal spot in the library you will need to check a few jumps out (since the code calling "jQuery.event.add" was most likely just other jQuery functions).

Note that 3) requires Firebug for FF3. If you are like me and prefer to debug with Firebug for FF2, you can use the age-old arguments.callee.caller.toString() method for inspecting the callstack, inserting as many ".caller"s as needed.

---

Edit: Also, see "How to debug Javascript/jQuery event bindings with FireBug (or similar tool)".

You may be able to get away with:

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

The above trick will let you see your event handling code, and you can just start hunting it down in your source, as opposed to trying to set breakpoint in jQuery's source.

这篇关于使用Firebug调试JavaScript事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！