前言

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

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

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

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

1.Sources（源碼）

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

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

舉個栗子：

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

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

3.展開Call Stack（函數(shù)調用棧）。

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

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

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

到這里已經發(fā)現(xiàn)找到了事件源?。。?/p>

js 調試，chrome調試，找出點擊事件

前接觸過一個項目。點擊事件，需要找出點擊所觸發(fā)的js函數(shù)，進行修改。js的封裝性很強，而且用了一些js框架，通過源代碼真的很難找到。所以只能借助強大的chrome瀏覽器了。

第一步：當然是打開調試頁面了。

第二步：選擇調試元素，找到該元素的監(jiān)聽事件。

第三步：找到你所需要的監(jiān)聽事件的類型，比如我需要的是點擊事件，就打開點擊事件，找到對應的js和方法，可能會有多個，可以選擇臨時移除，找到真正的那一個。

第四步：找到該段代碼，設置斷點。開始調試執(zhí)行。

第五步：其他事件類似，按照此步驟即可。

常用調試快捷鍵

F8：運行剩余程序

F9：運行該程序，一步步運行。

F10:調試跳過該方法，執(zhí)行下一步

F11:進入函數(shù)內部

shift +F11:跳出該函數(shù)，返回上一個函數(shù)

don't pause on exceptions :不要暫停異常（默認，取消之后按F8可以直接運行到異常處）

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論