利用chrome瀏覽器進行js調試並找出元素綁定的點擊事件詳解

你們有沒有遇到這樣的一個問題，咱們在分析一些大型電子商務平臺的Web前端腳本時，想找到一個元素綁定的點擊事件，並非那麼容易，由於有些前端腳本封裝的比較隱蔽，甚至有些加密腳本，用傳統的查找元素ID、或者頁面源碼方法去找，可能最後徒勞無功。下面我來介紹利用chrome瀏覽器來查找元素綁定的事件。

Chrome開發工具中最有用的面板Sources。Sources面板幾乎是最經常使用到的Chrome功能面板,也是解決通常問題的主要功能面板。一般只要是開發遇到了js報錯或者其餘代碼問題,在審視一遍代碼而一無所得以後打開Sources進行js斷點調試,幾乎能解決8成的代碼問題。

本文主要給你們介紹了關於利用chrome瀏覽器進行js調試並找出元素綁定的點擊事件的相關內容，下面話很少說了，來一塊兒看看詳細的介紹吧

只須要經過chrome瀏覽器如下三個功能就能夠輕鬆找到綁定事件了。

1.Sources（源碼）

2.Event Listener Breakpoints（事件監聽斷點）

3.Call Stack（函數調用棧）

舉個栗子：

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

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

前端全棧學習交流圈：866109386 面向1-3經驗年前端開發人員 幫助突破技術瓶頸，提高思惟能力

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

4.而後點擊以下圖標或按F11，觀察CallStack。

5.一路按以下圖標或按F11，直至發現事件是直接事件源。

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

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