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

如何使用

1.在Chrome瀏覽器中按F12打開開發(fā)者工具，切換到Sources（源碼）選項(xiàng)卡
2.在Sources（源碼）選項(xiàng)卡右側(cè)找到Event Listener Breakpoints（事件監(jiān)聽斷點(diǎn)）,勾選你想監(jiān)聽的事件
3.在all Stack（函數(shù)調(diào)用棧）中觀察

示例

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

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

2.在Sources（源碼）選項(xiàng)卡右側(cè)找到Event Listener Breakpoints（事件監(jiān)聽斷點(diǎn)）,勾選鼠標(biāo)的點(diǎn)擊事件：

3.點(diǎn)擊“返回頂部”按鈕，然后在右側(cè)all Stack（函數(shù)調(diào)用棧）中觀察：

點(diǎn)擊調(diào)用棧中的斷點(diǎn)，左側(cè)將會定位到相應(yīng)的js代碼處：

點(diǎn)擊圖中的按鈕或者按F11，將會進(jìn)入到函數(shù)內(nèi)部繼續(xù)查看：

也可以點(diǎn)擊圖中的按鈕或F10，跳過函數(shù)執(zhí)行下一行代碼：

可以發(fā)現(xiàn)通過以上辦法可以迅速的找到相應(yīng)的代碼，方便我們定位并修改。當(dāng)然有的時候并不是那么快就可以找到，需要我們一步一步的點(diǎn)擊并查看。

上一篇：js中將兩個以上的一維數(shù)組轉(zhuǎn)成一個二維數(shù)組

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