利用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,直至發現事件是直接事件源。

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章