溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解

發(fā)布時間:2020-10-03 07:33:11 來源:腳本之家 閱讀:348 作者:jonlan 欄目:web開發(fā)

前言

大家有沒有遇到這樣的一個問題,我們在分析一些大型電子商務(wù)平臺的Web前端腳本時,想找到一個元素綁定的點擊事件,并不是那么容易,因為有些前端腳本封裝的比較隱蔽,甚至有些加密腳本,用傳統(tǒng)的查找元素ID、或者頁面源碼方法去找,可能最后徒勞無功。下面我來介紹利用chrome瀏覽器來查找元素綁定的事件。

Chrome開發(fā)工具中最有用的面板Sources。Sources面板幾乎是最常用到的Chrome功能面板,也是解決一般問題的主要功能面板。通常只要是開發(fā)遇到了js報錯或者其他代碼問題,在審視一遍代碼而一無所獲之后打開Sources進行js斷點調(diào)試,幾乎能解決8成的代碼問題。

本文主要給大家介紹了關(guān)于利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件的相關(guān)內(nèi)容,下面話不多說了,來一起看看詳細的介紹吧

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

1.Sources(源碼)

2.Event Listener Breakpoints(事件監(jiān)聽斷點)

3.Call Stack(函數(shù)調(diào)用棧)

舉個栗子:

1.打開某網(wǎng)站,點擊“規(guī)格”中的“100x100”選項,按F12,彈出前端調(diào)試窗口,切換到Sources標簽。

利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解

利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解

2.看右邊的窗口(Event Listener Breakpoints)欄,選擇click選項(監(jiān)聽點擊事件)。

利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解

3.展開Call Stack(函數(shù)調(diào)用棧)。

利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解

4.然后點擊如下圖標或按F11,觀察CallStack。

利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解

5.一路按如下圖標或按F11,直至發(fā)現(xiàn)事件是直接事件源。

利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解

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

利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解

到這里已經(jīng)發(fā)現(xiàn)找到了事件源?。?!

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI