我如何找到神祕綁定的JavaScript事件

Question

我有一個非常複雜的HTML5應用程序（骨幹，牽線木偶，jquery，下劃線，把手，引導程序等等），並且在應用程序內部是一個模式彈出與它的形式。

當模態彈出窗口打開時，第一次單擊任何窗體域時，窗體域將自行取消選擇。之後，首先點擊你可以使用正常的形式。當應用程序最終加載到生產中的iFrame中時（不要問），第一次單擊任何表單域或將鼠標懸停在任何按鈕上時，整個頁面向下滾動，直到表單所在的div元素的頂部模式位於頁面的頂部，但是在它執行一次之後，它不會再次執行（困惑了嗎？是的，它很複雜並且是分層的）。

我不知道如何開始調試這個問題（數千行代碼，兩個庫）。

我嘗試這些：

console.log('bound events: ', $._data(this.$el.find('#RandomFieldID')[0], 'events')); 
console.dir($('#elmId').data('events')); 
console.log('bound events: ', $._data($('body')[0], 'events')); 

但是，這產生了什麼。

因爲這是庫上的庫框架上的框架我甚至不知道從哪裏開始試圖找到顯然已綁定到這些字段的東西，或者即使它是被綁定到的字段或其他東西完全...

因此，如何調試一個神祕綁定的JavaScript事件的良好策略的任何建議（與多個JS庫和框架，它不能只是註釋掉，直到問題解決，因爲它們依賴甚至可以讓HTML首先出現在頁面上）？

而且，不幸的是我不能做一個jsfiddle或者是因爲，正如我所說的，這是在應用程序內部深處，我基本上必須重新創建JSFiddle內部的應用程序（不可能）以鏈接到一個例子（而且，它不在外部的網站上，所以我不能直接鏈接到生產環境中）。

我很難過。謝謝你的幫助！

Answer 1

下面是我如何使用Chrome。

1. Ctrl-Shift-J打開Javascript控制檯。

2. 點擊左下角的小放大鏡，它可以讓你用鼠標選擇一個元素。

   

3. 點擊你的頁面上的元素（它會突出你去給它。）這將突出在底部的DOM，並顯示了一堆性質的右下角。

4. 右下角一路走過去的CSS屬性和東西到事件偵聽器：

   

5. 選擇事件監聽器你感興趣它會告訴你綁定。函數以及腳本將執行的確切代碼行。這應該告訴你什麼圖書館正在做你的瘋狂的東西。

   

我發現Chrome的調試器更加強大和快速（不滯後）相比，螢火蟲和IE開發者工具。這是強烈推薦:)