JS事件調試 - 查找HTML元素綁定的事件以及綁定代碼所在位置

平常的網頁開發調試工做中，常常須要知道指定的某個網頁元素綁定了哪些事件以及綁定代碼的位置，下面介紹三種用來跟蹤頁面中的事件的方法。

一、使用firefox調試

咱們可使用firefox的debug工具，找到指定元素，而後查看事件面板

二、使用chrome調試

在要檢查的元素上單擊右鍵選擇查看元素，而後，右邊的面板中會顯示style標籤，切換到EventListenrs標籤，能夠看到相關的事件綁定信息。點擊最右邊的文件名稱還能夠跳轉到事件定義代碼在腳本文件中的位置。不過這種方法並不是老是可用，下面會提到。

三、使用 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