利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點(diǎn)擊事件詳解
前言
大家有沒(méi)有遇到這樣的一個(gè)問(wèn)題，我們?cè)诜治鲆恍┐笮碗娮由虅?wù)平臺(tái)的Web前端腳本時(shí)，想找到一個(gè)元素綁定的點(diǎn)擊事件，并不是那么容易，因?yàn)橛行┣岸四_本封裝的比較隱蔽，甚至有些加密腳本，用傳統(tǒng)的查找元素ID、或者頁(yè)面源碼方法去找，可能最后徒勞無(wú)功。下面我來(lái)介紹利用chrome瀏覽器來(lái)查找元素綁定的事件。
Chrome開(kāi)發(fā)工具中最有用的面板Sources。Sources面板幾乎是最常用到的Chrome功能面板,也是解決一般問(wèn)題的主要功能面板。通常只要是開(kāi)發(fā)遇到了js報(bào)錯(cuò)或者其他代碼問(wèn)題,在審視一遍代碼而一無(wú)所獲之后打開(kāi)Sources進(jìn)行js斷點(diǎn)調(diào)試,幾乎能解決8成的代碼問(wèn)題。
本文主要給大家介紹了關(guān)于利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點(diǎn)擊事件的相關(guān)內(nèi)容，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧
只需要通過(guò)chrome瀏覽器以下三個(gè)功能就可以輕松找到綁定事件了。
1.Sources（源碼）
2.Event Listener Breakpoints（事件監(jiān)聽(tīng)斷點(diǎn)）
3.Call Stack（函數(shù)調(diào)用棧）
舉個(gè)栗子：
1.打開(kāi)某網(wǎng)站，點(diǎn)擊“規(guī)格”中的“100x100”選項(xiàng)，按F12，彈出前端調(diào)試窗口，切換到Sources標(biāo)簽。
2.看右邊的窗口（Event Listener Breakpoints）欄，選擇click選項(xiàng)（監(jiān)聽(tīng)點(diǎn)擊事件）。
3.展開(kāi)Call Stack（函數(shù)調(diào)用棧）。
4.然后點(diǎn)擊如下圖標(biāo)或按F11，觀察CallStack。
5.一路按如下圖標(biāo)或按F11，直至發(fā)現(xiàn)事件是直接事件源。
一路按下去，一定要有耐心。。。。。
到這里已經(jīng)發(fā)現(xiàn)找到了事件源?。。?/p>
js 調(diào)試，chrome調(diào)試，找出點(diǎn)擊事件
前接觸過(guò)一個(gè)項(xiàng)目。點(diǎn)擊事件，需要找出點(diǎn)擊所觸發(fā)的js函數(shù)，進(jìn)行修改。js的封裝性很強(qiáng)，而且用了一些js框架，通過(guò)源代碼真的很難找到。所以只能借助強(qiáng)大的chrome瀏覽器了。
第一步：當(dāng)然是打開(kāi)調(diào)試頁(yè)面了。
第二步：選擇調(diào)試元素，找到該元素的監(jiān)聽(tīng)事件。
第三步：找到你所需要的監(jiān)聽(tīng)事件的類型，比如我需要的是點(diǎn)擊事件，就打開(kāi)點(diǎn)擊事件，找到對(duì)應(yīng)的js和方法，可能會(huì)有多個(gè)，可以選擇臨時(shí)移除，找到真正的那一個(gè)。
第四步：找到該段代碼，設(shè)置斷點(diǎn)。開(kāi)始調(diào)試執(zhí)行。
第五步：其他事件類似，按照此步驟即可。
常用調(diào)試快捷鍵
F8：運(yùn)行剩余程序
F9：運(yùn)行該程序，一步步運(yùn)行。
F10:調(diào)試跳過(guò)該方法，執(zhí)行下一步
F11:進(jìn)入函數(shù)內(nèi)部
shift +F11:跳出該函數(shù)，返回上一個(gè)函數(shù)
don't pause on exceptions :不要暫停異常（默認(rèn)，取消之后按F8可以直接運(yùn)行到異常處）
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
js純數(shù)字逐一停止顯示效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js純數(shù)字逐一停止顯示效果的實(shí)現(xiàn)代碼。小編覺(jué)得非常不錯(cuò)?，F(xiàn)在分享給大家。給大家一個(gè)參考2016-03-03
方便使用js的朋友，把下面的函數(shù)找到你想要的功能函數(shù)，復(fù)制部分判斷輸入文本是否為身份證號(hào)碼，如為不正確則提示2008-08-08
JS實(shí)現(xiàn)淘寶幻燈片效果的實(shí)現(xiàn)方法
淘寶幻燈片效果：能自動(dòng)播放，鼠標(biāo)指向或者點(diǎn)擊數(shù)字按鈕就能切換圖片。2013-03-03
20170918 前端開(kāi)發(fā)周報(bào)之JS前端開(kāi)發(fā)必看
本文給大家分享了最新版js 前端開(kāi)發(fā)周報(bào)，內(nèi)容非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
詳解小程序如何動(dòng)態(tài)綁定點(diǎn)擊的執(zhí)行方法
這篇文章主要介紹了詳解小程序如何動(dòng)態(tài)綁定點(diǎn)擊的執(zhí)行方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要給大家介紹了關(guān)于JS截取數(shù)組操作的相關(guān)資料,對(duì)數(shù)組的操作相信大家都不陌生,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
JS實(shí)現(xiàn)隨機(jī)生成10個(gè)手機(jī)號(hào)的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)生成10個(gè)手機(jī)號(hào)的方法,涉及javascript數(shù)值運(yùn)算與隨機(jī)數(shù)操作相關(guān)使用技巧,需要的朋友可以參考下2018-12-12
兩行代碼輕松搞定JavaScript日期驗(yàn)證,通過(guò)實(shí)例化Date對(duì)象來(lái)生成一個(gè)合法的日期，驗(yàn)證日期是否合法，感興趣的小伙伴們可以參考一下2016-08-08
我寫JavaScript代碼已經(jīng)很久了，都記不起是什么年代開(kāi)始的了。本文給大家分享javascript七大技巧(二)，對(duì)javascript技巧相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JS針對(duì)瀏覽器窗口關(guān)閉事件的監(jiān)聽(tīng)方法集錦
這篇文章主要介紹了JS針對(duì)瀏覽器窗口關(guān)閉事件的監(jiān)聽(tīng)方法,總結(jié)整理了幾種常用的瀏覽器關(guān)閉事件監(jiān)聽(tīng)方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-06-06