日常的網頁開發調試工作中，經常需要知道指定的某個網頁元素綁定了哪些事件以及綁定代碼的位置，下面介紹三種用來跟蹤頁面中的事件的方法。
1、使用firefox調試
我們可以使用firefox的debug工具，找到指定元素，然後檢視事件面闆
2、使用chrome調試
在要檢查的元素上單擊右鍵選擇檢視元素，然後，右邊的面闆中會顯示style标簽，切換到EventListenrs标簽，可以看到相關的事件綁定資訊。點選最右邊的檔案名稱還可以跳轉到事件定義代碼在腳本檔案中的位置。不過這種方法并非總是可用，下面會提到。
3、使用 Chrome Web Store 中 Visual Event 檢查事件綁定資訊
上面的兩種方法，當我們定位定義事件的代碼位置時，如果我們使用了JS庫（比如jquery）的話調試工作又會變得複雜，程式往往會把我們引導到jquery庫中，這樣的話仍然是不友善找到在哪個檔案的那個行中addEventListener了事件。這個時候就需要 Visual Event 閃亮登場了……
安裝完 Visual Event 後，工具條上會有 Visual Event 的圖示。然後打開我們要調試的頁面，在工具欄上點選他那個火眼金睛一樣的眼睛圖示，網頁上所有綁定了事件的 HTML 元素都會由一個半透明的藍色遮罩層覆寫，滑鼠移動到相應的元素上即可看到事件綁定資訊。
剛才說了，在使用了Js 庫的時候，visual event 依然很好用，下面列出它支援的幾個庫的名字及版本資訊：
DOM 0 events
jQuery 1.2.x +
YUI 2.6.x (2.x might work!)
MooTools 1.2.x
Prototype 1.6.x
JAK (Events 2.2)
Glow
擷取 Visual Event
VisualEvent 在GitHub上的位置 ：https://github.com/DataTables/VisualEvent
VisualEvent 在Chrome webstore 上的位置：https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim
本文參考資料
http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/
http://www.sprymedia.co.uk/article/Visual+Event