前端入門技巧之瀏覽器除錯

前端除錯是用來測試前端開發程式碼BUG比較常用的方式，透過除錯我們可以把一些BUG提前扼殺在搖籃裡。今天小千就來教大家利用Chrome谷歌瀏覽器進行前端的除錯，web前端初學者一定要好好看一下啦。

為什麼要除錯？程式就是函式堆砌起來的，程式的執行就是函式的執行過程。而透過JS除錯，我們可以更為直觀的追蹤到在程式執行中，函式的執行順序，以及各個引數的變化。這樣我們就可以快速的定位到問題所在。

1 . 什麼是JS除錯？

在程式執行中，我們總會遇到各種bug，而透過程式碼的追蹤程式碼的執行順序從而定位到問題的過程就叫做JS除錯。首先我們需要知道如何進入除錯的介面，此處我們以谷歌為例，透過F12和右鍵檢查，找到Sources就可以進入除錯介面。具體介面顯示如下：

2．單步除錯

首先是普通除錯，又叫單步除錯。F12找到Sources後，在左側資料夾中找到你想執行的檔案，然後點選pause script execution按鈕再重新整理頁面（F5），就可以進入單步除錯。點選Step over next function call就是程式逐步除錯，每點選一次，就會按照程式碼執行順序，向下執行一句程式碼。

3．函式除錯

如果親手嘗試過單步除錯的小夥伴就會發現，單步除錯其實並不能滿足我們找bug的需求，因為單步除錯是不能進入函式體內，我們也就不能跟蹤函式體內變數的變化。所以我們接下來就來學習下第三個按鈕，step into next function call按鈕：使用Step into按鈕，我們就可以進入函式體內，在單步除錯過程中，當經過函式呼叫時，點選Step into就可以進入該函式體內。進入函式體內之後，繼續點選Step over按鈕，就可以進行函式體內的單步除錯。如圖所示，函式體內的變數變化就一目瞭然了。

但是在我們已經追蹤到想要的變數變化時，函式體內的內容又很多，單步除錯到函式結束就很浪費時間。這裡就可以使用我們今天學習的第四個按鈕，step out of current function call跳出當前函式體，跳出到之前進入函式體的程式碼位置。

4．斷點除錯

在實際專案程式碼量是很大的，使用單步除錯就過於的浪費時間。而且有時我們是想要定位某一處的程式碼是否有錯，所以就沒有必要除錯所有的程式碼。所以我們就可以使用斷點除錯，那麼什麼是斷點除錯呢？首先，在想要定位問題的程式碼處，打斷點，也就是程式碼停止執行的位置。如圖所示點選紅框處打該行的斷點。

然後重新整理頁面（F5），就可以進入斷點除錯頁面。點選Resume script execution按鈕就可以調到下一個斷點。

5．事件除錯

首先我們要來明確一個概念，就是同步與非同步，當程式碼執行時，自上而下執行的為同步程式碼，而非同步程式碼其中一類就是需要事件來觸發。所以在程式碼除錯中，事件體內的函式，需要在打斷點後，透過該事件的行為，才能進入函式體。

本文來自千鋒教育，轉載請註明出處。