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

標籤：style   class   blog   http   com   使用   

原文:JS事件調試 - 尋找HTML元素繫結的事件以及綁定代碼所在位置

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

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