使用Firebug調試JavaScript事件

Question

我需要為某個事件設置一個斷點，但我不知道，它在哪里定義，因為我有一大堆最小化的JavaScript代碼，所以我無法手動找到它。

是否有可能以某種方式設置斷點，例如具有ID registerButton的元素的click事件，或者找到哪個函數綁定到該事件？

我找到了Firefox附加的Javascript Deobfuscator ，它顯示了當前執行的JavaScript，這很好，但我需要調試的代碼是使用jQuery ，因此即使在最簡單的事件上也有大量的函數調用，所以我不能使用它無論是。

是否有專門為jQuery制作的調試器？

有沒有人知道一些工具將縮小的JavaScript重新轉換為格式化代碼，如turn function(){alert("aaa");v=3;}返回

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

Answer 1

那么它可能比它的價值太麻煩，但看起來你有三件事要做：

1. 減少來源。 我喜歡這個快速而骯臟的在線工具 。 只需粘貼代碼並單擊按鈕即可。 從來沒有讓我失望，即使是最時髦的JavaScript。

2. 所有 jQuery事件綁定器都被路由到"jQuery.event.add" （ 這是它在未構建的源代碼中的樣子 ），因此您需要找到該方法並在那里設置斷點。

3. 如果你已達到這個目的，你需要做的就是檢查斷點處的callstack，看看誰叫什么。 請注意，由於您位於庫中的內部位置，因此需要檢查一些跳轉（因為調用"jQuery.event.add"的代碼很可能只是其他jQuery函數）。

注意3）需要Firebug用於FF3。 如果您像我一樣並且更喜歡使用Firebug for FF2進行調試，則可以使用古老的arguments.callee.caller.toString()方法來檢查callstack，根據需要插入盡可能多的".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的來源。

Answer 2

首先替換縮小的jquery或您使用格式化的任何其他來源。 我發現的另一個有用的技巧是在firebug中使用分析器。 探查器顯示正在執行的功能，您可以單擊一個並轉到那里設置斷點。

Answer 3

只是一個更新：

谷歌瀏覽器 （其中的開發工具 ）支持各種斷點，以及突破事件 。

所有事件以及設備方向更改和計時器

您可以看到一個視頻，其中包含Google IO的所有功能。

還有內置deminifier / unminimizer / prettifier這將有助於你手動上壓縮JavaScript文件中設置斷點。

Answer 4

另一個更新：現在有一個firebug擴展來美化JavaScript：

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

它在Firefox 12.0中非常適合我。

相信這個答案可以發現它。

Answer 5

你能做的就是獲得縮小的代碼 - 你可以訪問它。 根據Crescent Fresh（1）選項或您喜歡的任何方法縮小代碼。

然后下載並安裝Fiddler - 所有Web開發人員都應該安裝這個令人難以置信的工具。

然后使用Fiddler，您可以使用本地驅動器上的本地unminified.js攔截瀏覽器對minified.js文件的調用。

Fiddler基本上攔截了瀏覽器對特定文件的請求，並可以向瀏覽器提供不同的文件。 所以你現在可以看一下未縮小的代碼。

簡單。

另一個選擇是使用Firefox並安裝Venkman調試器 - 遠比Firebug恕我直言 - 並且Venkman調試器有一個“漂亮的打印”選項，可以在運行時直觀地縮小縮小的代碼。 現在就把你的斷點貼在你想要的地方......

Answer 6

這將完成這項工作。 http://jsbeautifier.org/您還可以在Google上搜索javascript美化器。

Answer 7

您可以在javascript文件中的任何位置使用debugger命令。 當解釋器命中該語句時，如果調試器可用（如Firebug），則會觸發它

Answer 8

找到該行並放置一個斷點。 然后重新加載站點/頁面。 然后當遇到斷點時，firebug將自動暫停執行語句。