JavaScript Eevent偵錯利器–Visual Event 2

開發網頁的朋友應該都有過類似經驗,網頁載入一堆JavaScript,一陣兵荒馬亂後,很難搞清楚最後在哪些元素的哪個動作掛了事件,尤其是JavaScript加掛事件的方式五花八門,可以透過jQuery、element.click = function() { }、element.addEventListener()…,很難由單一處找出所有事件。而理不清事件來龍去脈,要追蹤某個點擊動作背後的程式行為就變得有些困難。

發現一個神奇的JavaScript偵察工具 – Visual Event 2

Visual Event 2的神奇之處在於不需要在瀏覽器上加裝任何外掛,只需把一長串以"BLOCKED SCRIPT"為首的字串記為書籤或我的最愛,便可適用於各大瀏覽器。使用時,先開啟待偵察網頁,再按下書籤或我的最愛,網頁便會注入Visual Event程式,以視覺化方式呈現掛載事件的元素,如下圖所示:

Visual Event的運作原理,在於其熟知主要JavaScript程式庫(例如: jQuery、YUI、ExtJS)事件機制,可深入其中擷取事件資訊,並將其標註在對象元素上。目前支援的程式庫包括:

  • DOM 0 events
  • jQuery 1.2+
  • YUI 2
  • MooTools 1.2+
  • Prototype 1.6+
  • Glow
  • ExtJS 4.0.x

如前圖所示,在啟用Visual Event後,有掛事件元素將被標上藍色區塊,滑鼠停留時會顯示事件的細節。以上圖為例,該<a>元素掛載了click及mousedown兩個事件,其中mousedown是透過DOM方法直接掛上,其指向一個匿名函數,其中呼叫了sc_clickstat_call()。如此,追蹤事件就簡單多了。

歡迎推文分享:
Published 20 March 2013 10:04 PM 由 Jeffrey
Filed under: ,
Views: 13,521



意見

# drem said on 21 March, 2013 04:56 AM

chrome內建的開發者工具有類似功能:

dl.dropbox.com/.../chromeF12.png

有需要再配合 jsbeautifier

# 達Ming said on 26 March, 2013 10:42 PM

哈哈,兵荒馬亂. 這字用得非常貼切.

# 阿貴 said on 30 March, 2013 08:22 AM

好方便,顯示的非常友善

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<March 2013>
SunMonTueWedThuFriSat
242526272812
3456789
10111213141516
17181920212223
24252627282930
31123456
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication