chrome的調試技巧

前言

開發最重要的環節之一就是調試，web端的開發和調試工具沒有比chrome更優秀的了，下面就講講怎麼經過chrome的開發者工具對網站進行迭代、調試和分析。

注意：如下例子均爲Chrome版本 70.0.3538.102（正式版本） （64 位）
參考chrome開發者工具官方文檔

一、打開Chrome 開發者工具

有如下3種方式：

一、快捷鍵：Ctrl+Shift+I/F12 (Windows) 或 Cmd+Opt+I (Mac)
二、在頁面元素上右鍵點擊，選擇 「檢查」
三、在Chrome菜單中選擇 更多工具 > 開發者工具

二、一圖搞定debug

2.1 文件區

在文件區選擇要調試的文件index.js，這裏展現的就是完整的項目目錄

能夠經過快捷鍵ctrl+p快速查找文件

2.2 代碼區

在代碼區找到要調試的代碼行打上斷點，按F5進入debug，能夠看到代碼停在斷點（第4行）處

能夠在devtools直接修改當前debug斷點後的代碼，ctrl+s保存文件後能夠看到修改的代碼效果，達到理想的效果能夠**右鍵>save as...**保存修改後的debug文件

2.3 調試按鈕

從左往右依次是：

Pause/Resume script execution：暫停/恢復腳本執行（程序執行到下一個斷點中止）
Step over next function call：執行到下一步的函數調用（執行但不進入）
Step into next function call：進入當前函數（一步一步執行每一行代碼）
Step out of current function：跳出當前執行函數
step：與Step into next function call同樣
Deactive/Active all breakpoints：關閉/開啓全部斷點（不會取消）
Pause on exceptions：異常狀況自動斷點設置（Exception 斷點）

2.4 參數區watch

在參數區能夠添加想要監聽的參數或表達式的變化

也能夠直接在文件裏經過鼠標懸停、選中表達式的方式查看它們的變化

2.5 例子

調試的原理很簡單，找到想要調試的文件，打上斷點，一路step+分析直到找到本身想要的。它的難點在於調試哪一個文件、監聽哪些參數，找到合適的切入點，調試真沒什麼。

如上圖，加法器計算兩個數字的和，1 + 2 = 12，這很明顯不是咱們想要的結果。

面對複雜項目或組件時，新手每每不知道從何debug起，其實只要找準你想了解什麼功能，複雜的一個一個拆分就能分析了。好比加法器的debug。

一、在第4行打下斷點
二、同時在watch裏監聽x、y兩個參數
三、F5刷新進入debug調試
四、經過Step into next function call一步步調試代碼，同時能夠看到watch裏兩個參數的變化

4.一、由於使用了jquery，Step into會進入到jquery內部，不要慌，Step out of current function跳出jquery，返回本身的函數
4.二、這裏四、5行代碼都用了jquery的val()方法，因此也可使用Step over next function call跳過第4行直接進入第5行

五、經過分析watch裏的x、y參數發現，經過val()方法獲取到的x、y是字符串，致使+變成字符串拼接了
六、parseInt將x、y轉換類型就能夠獲得想要的結果了

三、資源面板(Sources)

開發過程當中沒法避免錯誤，新手最喜歡用的就是console.log來查找和修正代碼中的錯誤，效率過低，只適合明確地只想看到極少數結果的狀況。下面就講講怎麼使用chrom devTools精準、高效的定位並解決問題。

斷點有如下7種類型：

斷點類型	描述
Line-of-code	在確切的代碼區域
Conditional line-of-code	在確切的代碼區域，但僅在某些其餘條件爲真時
DOM	在更改或刪除特定DOM節點或其子節點的代碼上
XHR	當XHR URL包含字符串模式時
Event listener	在觸發事件（例如click）以後運行的代碼上
Exception	在拋出捕獲或未捕獲異常的代碼行上
Function	每當調用特定函數時

3.一、Line-of-code 斷點

明確地知道本身想要調試的代碼位置

一、打開Chrome開發者工具的Sources tab頁
二、找到須要打斷點的文件
三、在文件左側的行號列（左鍵單擊或者右鍵>Add breakpoint）打上斷點

與line-of-code等效的還有debugger，二者的效果都是代碼運行到斷點前中止。debugger的缺點很明顯，由於是寫在代碼裏面的，須要刪除斷點的時候，要進去一個一個文件的刪，實在太太低效，不建議使用debugger。 Chrome開發者工具提供了Breakpoints pane 管理斷點，稍後會講到。

3.二、Conditional line-of-code 斷點

與line-of-code相似，須要明確地知道本身想要調試的代碼位置，可是能夠提供條件使代碼進入斷點

一、打開Chrome開發者工具的Sources tab頁
二、找到須要打斷點的文件
三、在行號列右鍵>Add conditional breakpoint
四、在彈框裏輸入斷點條件，回車肯定，能夠看到一個橙色的斷點造成

嘗試改變斷點的條件，能夠發如今不知足條件時不會進入斷點

管理 line-of-code 斷點

在 Breakpoints pane右鍵操做，能夠禁用 或 移除 line-of-code 斷點

在 Breakpoints pane能夠查看、管理全部的斷點，好比暫時禁用斷點，下次再激活，方便程度遠勝debugger。 針對debugger，Breakpoints pane提供了Deactivate breakpoints來禁用:

console.log(1);
debugger;
console.log(2);
debugger;
複製代碼

Deactivate breakpoints會禁用代碼裏全部的debugger以及（Conditional）line-of-code 斷點，而Disable all breakpoints只會禁用掉（Conditional）line-of-code 斷點

3.三、DOM斷點

監聽dom節點或其子節點變化時用到的斷點

一、打開Elements tab頁
二、找到須要打斷點的element位置
三、右鍵點擊選中的element，在彈出的菜單選擇**Break on **，有3種屬性可供選擇

3.3.一、Break on三選一之Subtree modifications

在當前節點添加、刪除、改變子節點時觸發

<div id="div1"> // 在這裏斷點Subtree modifications
    <p id="p1">文本1</p>
    <p id="p2">文本2</p>
  </div>
......

// 經過jquery改變#div1下的p2的文本內容
$(function () {
  var div1 = $('#div1')
  setTimeout(function () { 
    div1.find('#p2').text('文本2變了')
  }, 1000)
})
......

// Remove any remaining nodes
while ( elem.firstChild ) {
  elem.removeChild( elem.firstChild ); // 1秒後斷點會跳轉到jquery代碼這裏
}

// 跳出斷點後，#p2的文本改變爲"文本2變了"
複製代碼

3.3.二、Break on三選一之Attributes modifications

在當前選定的節點上添加或刪除屬性時或屬性值更改時觸發

與Subtree modifications類似，經過jquery改變當前節點屬性時，斷點會跳轉到對應的jquery代碼處

3.3.三、Break on三選一之Node Removal

刪除當前選定的節點時觸發

與Subtree modifications類似，經過jquery刪除當前節點屬性時，斷點會跳轉到對應的jquery代碼處

注意：Break on的3種屬性有延遲性，即須要在頁面初始化完成後再修改選定節點的時候觸發，斷點跳轉到改變當前節點的js代碼處

3.四、XHR 斷點

在XHR的請求URL包含指定字符串時中斷，devTools在XHR調用send（）的代碼行上暫停。用於快速定位頁面發起請求的url不正確的代碼位置。

一、打開Sources tab
二、進入XHR Breakpoints pane（通常就在Breakpoints pane下面）
三、點擊面板空白處或者右上角的「＋」添加須要監聽的url字符串，回車肯定

建立一個請求連接中包含org的XHR請求（好比用$.ajax）

如上圖，可在ajax的xhr.send處看到options裏的url中包含了org

3.五、Event listener 斷點

暫停事件觸發後運行的事件偵聽器代碼，例如單擊、鼠標事件等。

一、打開Sources tab
二、進入Event listener pane（通常就在Breakpoints pane下面幾個）
三、任選一個Event listener

如上圖，能夠看到，在沒有打斷點的狀況下，勾選了Event listener Breakpoints下的click，當點擊div1時，代碼會在div1.addEventListener觸發click事件的代碼行中斷。

**注意：**若是使用的不是原生的addEventListener，而是使用了庫，好比jquery，Event listener 斷點會在jquery內部監聽click事件的代碼行中斷。

3.六、Exception 斷點

在拋出捕獲或未捕獲的異常的代碼行上暫停。

一、打開Sources tab
二、點擊Pause on exceptions（「播放中」的樣子）
三、勾選Pause On Caught Exceptions能夠在未捕獲的異常（Uncaught DOMException）代碼行暫停

如上圖，Exception 斷點會在throw "whoops"處暫停，若是勾選了Pause On Caught Exceptions，以jquery爲例，一路debug下去，會看到一個個的DOMException，相似下面這樣的：

3.七、Function 斷點

這是一個在chrome devtools控制檯使用的斷點方式，在chrome devtools控制檯運行以下代碼：

function add(a, b) {
  let result = a + b; // DevTools會暫停這行代碼
  return result;
}
debug(add); // 暫停sum函數，不能用字符串
add();
複製代碼

上面這段代碼等效於 line-of-code 斷點。通常咱們在chrome devtools控制檯運行代碼是不能debug的，能夠經過這種方式進入「VM1124」之類的文件調試咱們在控制檯運行的代碼

四、網絡面板(Network)

網絡面板記錄頁面上每一個網絡操做的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie等等。

一、 使用 Network 面板記錄和分析網絡活動
二、總體或單獨查看資源的加載信息
三、過濾和排序資源的顯示方式
四、保存、複製和清除網絡記錄
五、根據需求自定義 Network 面板

4.一、 網絡面板概覽

網絡由五個窗格組成

一、Controls：使用這些選項能夠控制Network面板的外觀和功能
二、Filters： 使用這些選項能夠控制在 Requests Table 中顯示哪些資源。按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點擊過濾器能夠同時選擇多個過濾器
三、Overview： 此圖表顯示了資源檢索時間的時間線。若是看到多條豎線堆疊在一塊兒，則說明這些資源被同時檢索。
四、Requests Table：此表格列出了檢索的每個資源。默認狀況下，此表格按時間順序排序，最先的資源在頂部。點擊資源的名稱能夠顯示更多信息。 右鍵點擊任何一個表格標題能夠添加或移除信息列。
五、Summary： 此窗格能夠一目瞭然地顯示請求總數、傳輸的數據量和加載時間。

提示：

一、啓用Filters窗格的 Preserve log 複選框能夠保留網絡日誌
二、在Overview窗格能夠經過雙擊左鍵把選擇範圍放到最大

4.二、 捕捉屏幕截圖

網絡面板能夠在頁面加載期間捕捉屏幕截圖，此功能稱爲幻燈片。
在Controls窗格點擊攝影機圖標能夠啓用/關閉幻燈片功能。從新加載頁面能夠捕捉屏幕截圖。

一、能夠經過屏幕截圖分析頁面渲染順序
二、捕捉屏幕截圖還沒有結束時，切記不要切換到當前chrome窗口的其餘標籤頁，這會致使捕捉失敗

屏幕截圖顯示在概覽（Overview）上方。雙擊屏幕截圖可查看放大版本。

4.三、DOMContentLoaded 和 load 事件信息

網絡面板突出顯示兩種事件：DOMContentLoaded 和 load。
解析頁面的初始標記時會觸發 DOMContentLoaded（dom內容加載完成）。 此事件將在 Network 面板上的兩個地方顯示：

一、Overview 窗格中的藍色豎線
二、Summary 窗格中的藍色文字處

頁面徹底加載時將觸發load（頁面上全部資源，包括圖片、音頻、視頻等加載完成，在DOMContentLoaded被觸發以後才觸發）。此事件顯示在三個地方：

一、Overview 窗格中的紅色豎線
二、Requests Table 中的紅色豎線
三、Summary 窗格中的紅色文字處

點擊資源名稱能夠查看與該資源有關的更多信息，好比大小、加載時間等。
點擊任意資源，在右側打開的窗格>Timing，在此能夠查看文件的加載時間分析

4.四、模擬網絡鏈接

能夠經過 Network 面板開啓網絡調節。從下拉菜單中選擇要應用網絡節流和延遲時間操控的鏈接。

點擊 Add... 選項能夠自定義網絡

其餘

工做中經常使用的chrome調試就到這裏了，關於chrome開發者工具還有性能優化、內存管理等，這些比較複雜，就不一一介紹了，有時間在弄。