場景：在調試web頁面時，我們想修改某處的js效果，但由于頁面引入的js文件較多，不知道該在哪個文件里去找，這時候可以利用Chrome瀏覽器來幫助我們調試。

如何使用

1.在Chrome瀏覽器中按F12打開開發者工具，切換到Sources（源碼）選項卡
2.在Sources（源碼）選項卡右側找到Event Listener Breakpoints（事件監聽斷點）,勾選你想監聽的事件
3.在all Stack（函數調用棧）中觀察

示例

例如本篇博客右側有一個“返回頂部”的按鈕，我們想找到這個按鈕綁定的點擊事件并做修改。

1.在Chrome瀏覽器中按F12打開開發者工具，切換到Sources（源碼）選項卡：

2.在Sources（源碼）選項卡右側找到Event Listener Breakpoints（事件監聽斷點）,勾選鼠標的點擊事件：

3.點擊“返回頂部”按鈕，然后在右側all Stack（函數調用棧）中觀察：

點擊調用棧中的斷點，左側將會定位到相應的js代碼處：

點擊圖中的按鈕或者按F11，將會進入到函數內部繼續查看：

也可以點擊圖中的按鈕或F10，跳過函數執行下一行代碼：

可以發現通過以上辦法可以迅速的找到相應的代碼，方便我們定位并修改。當然有的時候并不是那么快就可以找到，需要我們一步一步的點擊并查看。

上一篇：js中將兩個以上的一維數組轉成一個二維數組

下一篇：composer命令中create-project與require之間的區別