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

前言

創(chuàng)新互聯(lián)是一家專業(yè)提供東營區(qū)企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、H5場景定制、小程序制作等業(yè)務(wù)。10年已為東營區(qū)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

大家有沒有遇到這樣的一個(gè)問題，我們?cè)诜治鲆恍┐笮碗娮由虅?wù)平臺(tái)的Web前端腳本時(shí)，想找到一個(gè)元素綁定的點(diǎn)擊事件，并不是那么容易，因?yàn)橛行┣岸四_本封裝的比較隱蔽，甚至有些加密腳本，用傳統(tǒng)的查找元素ID、或者頁面源碼方法去找，可能最后徒勞無功。下面我來介紹利用chrome瀏覽器來查找元素綁定的事件。

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

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

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

1.Sources（源碼）

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

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

舉個(gè)栗子：

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