如何使用chrome瀏覽器進行js調試找出元素繫結的點擊事件

標籤：eve   http   源碼   cli   切換   函數調用   tac   com   sources   

大家有沒有遇到這樣的一個問題，我們在分析一些大型電子商務平台的Web前端指令碼時，想找到一個元素繫結的點擊事件，並不是那麼容易，因為有些前端指令碼封裝的比較隱蔽，甚至有些加密指令碼，用傳統的尋找元素ID、或者頁面源碼方法去找，可能最後徒勞無功。下面我來介紹利用chrome瀏覽器來尋找元素繫結的事件。

只需要通過chrome瀏覽器以下三個功能就可以輕鬆找到綁定事件了。

1.Sources（源碼）
2.Event Listener Breakpoints（事件監聽斷點）
3.Call Stack（函數調用棧）

舉個栗子：

1.開啟某網站，點擊“規格”中的“100x100”選項，按F12，彈出前端調試視窗，切換到Sources標籤。

 

 

2.看右邊的視窗（Event Listener Breakpoints）欄，選擇click選項（監聽點擊事件）。

 

 

3.展開Call Stack（函數調用棧）。

 

 

4.然後點擊如標或按F11，觀察CallStack。

 

 

 

5.一路按如標或按F11，直至發現事件是直接事件來源。

一路按下去，一定要有耐心。。。。。

到這裡已經發現找到了事件來源！！！

 

如何使用chrome瀏覽器進行js調試找出元素繫結的點擊事件