前端調(diào)試是所有前端開發(fā)者繞不過去的一個(gè)環(huán)節(jié)，很多初學(xué)者卻不知道該如何去做，今天小千就來以Chrome谷歌瀏覽器為例，教大家如何去調(diào)試前端JS代碼。

      為什么要調(diào)試？

      程序就是函數(shù)堆砌起來的，程序的運(yùn)行就是函數(shù)的執(zhí)行過程。而通過JS調(diào)試，我們可以更為直觀的追蹤到在程序運(yùn)行中，函數(shù)的執(zhí)行順序，以及各個(gè)參數(shù)的變化。這樣我們就可以快速的定位到問題所在。

      1. 什么是JS調(diào)試？

      在程序運(yùn)行中，我們總會(huì)遇到各種bug，而通過代碼的追蹤代碼的運(yùn)行順序從而定位到問題的過程就叫做JS調(diào)試。

      首先我們需要知道如何進(jìn)入調(diào)試的界面，此處我們以谷歌為例，通過F12和右鍵檢查，找到Sources就可以進(jìn)入調(diào)試界面。具體界面顯示如下：

      紅框所標(biāo)示的就是我們調(diào)試常用的按鍵。下面我們會(huì)在實(shí)際應(yīng)用場景中詳細(xì)講述每一個(gè)按鍵的作用。

      2．單步調(diào)試

      首先是普通調(diào)試，又叫單步調(diào)試。F12找到Sources后，在左側(cè)文件夾中找到你想運(yùn)行的文件，然后點(diǎn)擊pause script execution按鈕再刷新頁面（F5），就可以進(jìn)入單步調(diào)試

      點(diǎn)擊Step over next function call就是程序逐步調(diào)試，每點(diǎn)擊一次，就會(huì)按照代碼執(zhí)行順序，向下執(zhí)行一句代碼。

      3． 函數(shù)調(diào)試

      如果親手嘗試過單步調(diào)試的小伙伴就會(huì)發(fā)現(xiàn)，單步調(diào)試其實(shí)并不能滿足我們找bug的需求，因?yàn)閱尾秸{(diào)試是不能進(jìn)入函數(shù)體內(nèi)，我們也就不能跟蹤函數(shù)體內(nèi)變量的變化。

      所以我們接下來就來學(xué)習(xí)下第三個(gè)按鈕，step into next function call按鈕

      使用Step into按鈕，我們就可以進(jìn)入函數(shù)體內(nèi)，在單步調(diào)試過程中，當(dāng)經(jīng)過函數(shù)調(diào)用時(shí)，點(diǎn)擊Step into就可以進(jìn)入該函數(shù)體內(nèi)。

      進(jìn)入函數(shù)體內(nèi)之后，繼續(xù)點(diǎn)擊Step over按鈕，就可以進(jìn)行函數(shù)體內(nèi)的單步調(diào)試。如圖所示，函數(shù)體內(nèi)的變量變化就一目了然了。

      但是在我們已經(jīng)追蹤到想要的變量變化時(shí)，函數(shù)體內(nèi)的內(nèi)容又很多，單步調(diào)試到函數(shù)結(jié)束就很浪費(fèi)時(shí)間。這里就可以使用我們今天學(xué)習(xí)的第四個(gè)按鈕，step out of current function call跳出當(dāng)前函數(shù)體，跳出到之前進(jìn)入函數(shù)體的代碼位置。

      4． 斷點(diǎn)調(diào)試

      在實(shí)際項(xiàng)目代碼量是很大的，使用單步調(diào)試就過于的浪費(fèi)時(shí)間。而且有時(shí)我們是想要定位某一處的代碼是否有錯(cuò)，所以就沒有必要調(diào)試所有的代碼。所以我們就可以使用斷點(diǎn)調(diào)試，那么什么是斷點(diǎn)調(diào)試呢？

      首先，在想要定位問題的代碼處，打斷點(diǎn)，也就是代碼停止執(zhí)行的位置。如圖所示點(diǎn)擊紅框處打該行的斷點(diǎn)。（由于谷歌版本的不同，斷點(diǎn)圖標(biāo)略有不同）

      然后刷新頁面（F5），就可以進(jìn)入斷點(diǎn)調(diào)試頁面。點(diǎn)擊Resume script execution按鈕就可以調(diào)到下一個(gè)斷點(diǎn)。（注意：當(dāng)調(diào)到斷點(diǎn)處時(shí)，此行代碼為藍(lán)色背景，表示此行代碼即將執(zhí)行但并未執(zhí)行）

      5． 事件調(diào)試

      首先我們要來明確一個(gè)概念，就是同步與異步，當(dāng)代碼執(zhí)行時(shí)，自上而下運(yùn)行的為同步代碼，而異步代碼其中一類就是需要事件來觸發(fā)。所以在代碼調(diào)試中，事件體內(nèi)的函數(shù)，需要在打斷點(diǎn)后，通過該事件的行為，才能進(jìn)入函數(shù)體。

      如以下代碼：打斷點(diǎn)后在刷新，其實(shí)沒有效果

      必須動(dòng)過事件才能觸發(fā)調(diào)試

      學(xué)習(xí)web前端，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開發(fā)工程師，web前端高級(jí)開發(fā)工程師，后面的web前端大神級(jí)開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開發(fā)需要掌握的知識(shí)有個(gè)清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~