本文主要講解針對chrome瀏覽器的調試方案，對於其他瀏覽器其實大同小異。

先來入門一點的

DOM元素調試

看上圖：

以上圖表明的1，2，3，4，5標記說明：

1，為移動設備模擬器，chorme現在是做的做好的，IE無法媲美，對於響應式開發來說，首選它。

2，屬性內容 一般為id class之類的，鼠標多點擊幾下，可以進行樣式的添加，修改。

3，看到加號圖標了嗎，點擊，可以進行樣式書寫添加。

4，css樣式查看，同樣可以更改，被劃掉的樣式表示不被作用。如果有color，background等涉及顏色屬性時我們可以點擊後面的顏色方塊，選擇自己喜歡的顏色，然後把顏色值復制到代碼中，而不必再糾結喜歡的顏色對應的顏色編號是多少，而且可以調節透明度.

5 對於勾選住的樣式，我們可以去掉勾選，那麽這條樣式將不被作用。

JS調試

單步調試

如下面代碼：

點擊相應行號，即可產生一個斷點，這時刷新瀏覽器，即可代碼運行到該位置暫停，也可以在代碼中相應位置加上debugger;打開調試面板，再刷新，效果是一樣的。

一般debugger打在一個函數體後面，可以檢驗代碼是否跑到這個函數內部，也可以檢查函數參數是否傳入

function(a,b){

　　debugger;

　　return a+b

};

依照下圖：

我們可以進行以下操作

點擊1，我們可以釋放掉暫停，程序繼續走，遇到下一個debugger處暫停，若沒有debugger則會加載頁面。

點擊2，我們可以要代碼執行下一行，如上圖中的let c=getnewValue(i);

再點擊一下，則跑到for(){}循環處；我們發現上一行有個函數getnewValue()可是代碼沒有跑到裏面，我們想要要它跑入函數體內，我們點擊3，如要退出函數體，請按4

5是什麽，點擊5我們可以移除所有斷點，若要移除制定位置的斷點，請看8，勾選了代表某處打了斷點，去掉勾選即可。

6是什麽，點擊一下，再運行代碼，代碼會自動跳轉到代碼出錯處，如某個變量未定義處，是不是很強大，其實我們代碼出錯了在console處就會顯示某處出錯了，這兩者作用是等價的。

7的作用是監看某個變量的實時值，我們可以選中代碼某個變量 鼠標右鍵 add selected text to watch,再運行代碼，可以實時查看某個值變化。

10是事件監聽，如 鼠標點擊時，click事件，我們找到mouse click勾選上，當頁面某按鈕點擊時: 代碼會調到事件觸發的代碼處

這個功能很實用，例如你想百度一下"chrome調試技巧"，當你點擊一下百度一下這個按鈕，你想了解點擊之後百度一下會執行什麽函數，執行的代碼，你可以使用這種方法

如果跳轉到一些代碼是壓縮過的，我們可以點擊9的位置，可以要代碼便於閱讀

Chrome瀏覽器調試技巧