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

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

Visual Event 2的神奇之處在於不需要在瀏覽器上加裝任何外掛,只需把一長串以"javascript:"為首的字串記為書籤或我的最愛,便可適用於各大瀏覽器。使用時,先開啟待偵察網頁,再按下書籤或我的最愛,網頁便會注入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()。如此,追蹤事件就簡單多了。


Comments

# by drem

chrome內建的開發者工具有類似功能: https://dl.dropbox.com/u/11130998/chromeF12.png 有需要再配合 jsbeautifier

# by 達Ming

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

# by 阿貴

好方便,顯示的非常友善

Post a comment