前端開發必備調試技巧

Chrome調試工具的使用

經常使用的面板

• Elements(元素面板)

• Console(控制檯面板)

• Sources(資源面板)

• NetWork(網絡面板)

1. Elements panel

定義：經過Elements 面板，不單單能夠查看和編輯頁面和樣式，並且所作的改變當即生效。

操做DOM

1. 查看DOM樹：打開Element面板，能夠查看全部DOM節點，包括CSS和JavaScript，通常左側查看DOM樹，右側查看CSS樣式。

2. 選區DOM節點：將鼠標移到網頁中的某元素上面，能夠選中DOM節點

3. 增長、刪除和修改DOM節點：在Element面板中，選擇DOM節點，在文本處右擊鼠標，會彈出一個菜單，

4. 爲節點添加屬性，查看盒模型

5. 查看CSS樣式，如更改CSS屬性，動態變化

6. 技巧：在CSS樣式的屬性值上，若是是數字的屬性值，則能夠經過按上下方向快捷鍵來給屬性值加一，經過按住shift鍵的同時按上下方向快捷鍵，能夠給屬性值遞增十
   

Element 譯爲「元素」，Element 面板可讓咱們動態查看和編輯DOM節點和CSS樣式表，而且當即生效，避免了頻繁切換瀏覽器和編輯器的麻煩。 咱們可使用Element面板來查看源代碼，它不但能夠很好的格式化DOM節點，清晰的展示HTML文檔，比在當前網頁中右擊鼠標選擇「查看網頁源代碼」強大不少。 總之，Element面板可讓咱們很透徹的瞭解DOM和CSS的底層結構。

碰到的問題

在查看某些僞類的屬性，如:hover時，沒法查看到具體的樣式，查閱了一些資料，是經過鼠標Hover在元素上，而後右鍵檢查，或者在面板選擇上:hover。

2. Console panel

定義：使用Console API向控制檯輸出信息，產生JavaScript文件和啓動調試會話

用途：

1. console.log(messgae)，用於調試JS，查看錯誤等。

2. 直接運行JS代碼

碰到的問題

console.log(),console.info(),console.error(),console.warn()須要區別一下，最好使用過濾工具，過濾一些無用信息

3. Network panel

查看HTTP請求，查看cookie，AJAX請求等信息，
例如，給按鈕綁定點擊事件，能夠經過網絡面板，來查看請求是否成功發出，和接收到的信息。

4. Sources panel

用途：能夠用來設置斷點調試JS

調試步驟

打斷點、單步執行、監聽變化

能夠查看做用域、變量、回調等的變化，此外還能夠監聽事件的變化。

設置斷點

選擇想要設置斷點的js具體行，點擊行號，就設置了斷點，再次點擊，就取消已設置的斷點。

一、調用棧（Call Stack）：當遇到斷點時，Call Stack 會顯示當前斷點所處的方法調用棧，調用棧中的每一層叫作一個 frame，點擊任意 frame 能夠跳到該 frame 的調用點上。在 frame 上反鍵能夠選擇 Restart Frame 能夠從新執行該函數，配合變量修改和編輯代碼等功能，能夠在當前 frame 中反覆進行調試。

二、做用域變量（Scope Variables）：在這裏能夠查看此時局部變量和全局變量的值。

三、斷點列表（Breakpoints）：這裏會列出你設置的全部斷點，點擊便可跳轉到對應斷點位置。

碰到的問題

單步執行，和進入到函數執行，是有差異的