前言
開發最重要的環節之一就是除錯，web端的開發和除錯工具沒有比chrome更優秀的了，下面就講講怎麼通過chrome的開發者工具對網站進行迭代、除錯和分析。
注意：以下例子均為Chrome版本 70.0.3538.102（正式版本） （64 位）
參考chrome開發者工具官方文件
1、開啟Chrome 開發者工具
有以下3種方式：
1、快捷鍵：Ctrl+Shift+I/F12 (Windows) 或 Cmd+Opt+I (Mac)
2、在頁面元素上右鍵點選，選擇 “檢查”
3、在Chrome選單中選擇 更多工具 > 開發者工具
2、一圖搞定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。
1、在第4行打下斷點
2、同時在watch裡監聽x、y兩個引數
3、F5重新整理進入debug除錯
4、通過Step into next function call一步步除錯程式碼，同時可以看到watch裡兩個引數的變化4.1、因為使用了jquery，Step into會進入到jquery內部，不要慌，Step out of current function跳出jquery，返回自己的函式
4.2、這裡4、5行程式碼都用了jquery的val()方法，所以也可以使用Step over next function call跳過第4行直接進入第5行5、通過分析watch裡的x、y引數發現，通過val()方法獲取到的x、y是字串，導致+變成字串拼接了
6、parseInt將x、y轉換型別就可以得到想要的結果了
3、資源皮膚(Sources)
開發過程中無法避免錯誤，新手最喜歡用的就是console.log來查詢和修正程式碼中的錯誤，效率太低，只適合明確地只想看到極少數結果的情況。下面就講講怎麼使用chrom devTools精準、高效的定位並解決問題。
斷點有以下7種型別：
| 斷點型別 | 描述 |
|---|---|
| Line-of-code | 在確切的程式碼區域 |
| Conditional line-of-code | 在確切的程式碼區域，但僅在某些其他條件為真時 |
| DOM | 在更改或刪除特定DOM節點或其子節點的程式碼上 |
| XHR | 當XHR URL包含字串模式時 |
| Event listener | 在觸發事件（例如click）之後執行的程式碼上 |
| Exception | 在丟擲捕獲或未捕獲異常的程式碼行上 |
| Function | 每當呼叫特定函式時 |
3.1、Line-of-code 斷點
明確地知道自己想要除錯的程式碼位置
1、開啟Chrome開發者工具的Sources tab頁
2、找到需要打斷點的檔案
3、在檔案左側的行號列（左鍵單擊或者右鍵>Add breakpoint）打上斷點
與line-of-code等效的還有debugger，兩者的效果都是程式碼執行到斷點前停止。debugger的缺點很明顯，因為是寫在程式碼裡面的，需要刪除斷點的時候，要進去一個一個檔案的刪，實在太過低效，不建議使用debugger。 Chrome開發者工具提供了Breakpoints pane 管理斷點，稍後會講到。
3.2、Conditional line-of-code 斷點
與line-of-code類似，需要明確地知道自己想要除錯的程式碼位置，但是可以提供條件使程式碼進入斷點
1、開啟Chrome開發者工具的Sources tab頁
2、找到需要打斷點的檔案
3、在行號列右鍵>Add conditional breakpoint
4、在彈框裡輸入斷點條件，回車確定，可以看到一個橙色的斷點形成
管理 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.3、DOM斷點
監聽dom節點或其子節點變化時用到的斷點
1、開啟Elements tab頁
2、找到需要打斷點的element位置
3、右鍵點選選中的element，在彈出的選單選擇**Break on **，有3種屬性可供選擇
3.3.1、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.2、Break on三選一之Attributes modifications
在當前選定的節點上新增或刪除屬性時或屬性值更改時觸發
與Subtree modifications相似，通過jquery改變當前節點屬性時，斷點會跳轉到對應的jquery程式碼處
3.3.3、Break on三選一之Node Removal
刪除當前選定的節點時觸發
與Subtree modifications相似，通過jquery刪除當前節點屬性時，斷點會跳轉到對應的jquery程式碼處
注意：Break on的3種屬性有延遲性，即需要在頁面初始化完成後再修改選定節點的時候觸發，斷點跳轉到改變當前節點的js程式碼處
3.4、XHR 斷點
在XHR的請求URL包含指定字串時中斷，devTools在XHR呼叫send（）的程式碼行上暫停。用於快速定位頁面發起請求的url不正確的程式碼位置。
1、開啟Sources tab
2、進入XHR Breakpoints pane（一般就在Breakpoints pane下面）
3、點選皮膚空白處或者右上角的“＋”新增需要監聽的url字串，回車確定
建立一個請求連結中包含org的XHR請求（比如用$.ajax）
3.5、Event listener 斷點
暫停事件觸發後執行的事件偵聽器程式碼，例如單擊、滑鼠事件等。
1、開啟Sources tab
2、進入Event listener pane（一般就在Breakpoints pane下面幾個）
3、任選一個Event listener
如上圖，可以看到，在沒有打斷點的情況下，勾選了Event listener Breakpoints下的click，當點選div1時，程式碼會在div1.addEventListener觸發click事件的程式碼行中斷。
**注意：**如果使用的不是原生的addEventListener，而是使用了庫，比如jquery，Event listener 斷點會在jquery內部監聽click事件的程式碼行中斷。
3.6、Exception 斷點
在丟擲捕獲或未捕獲的異常的程式碼行上暫停。
1、開啟Sources tab
2、點選Pause on exceptions（“播放中”的樣子）
3、勾選Pause On Caught Exceptions可以在未捕獲的異常（Uncaught DOMException）程式碼行暫停
如上圖，Exception 斷點會在throw "whoops"處暫停，如果勾選了Pause On Caught Exceptions，以jquery為例，一路debug下去，會看到一個個的DOMException，類似下面這樣的：
3.7、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”之類的檔案除錯我們在控制檯執行的程式碼
4、網路皮膚(Network)
網路皮膚記錄頁面上每個網路操作的相關資訊，包括詳細的耗時資料、HTTP 請求與響應標頭和 Cookie等等。
1、 使用 Network 皮膚記錄和分析網路活動
2、整體或單獨檢視資源的載入資訊
3、過濾和排序資源的顯示方式
4、儲存、複製和清除網路記錄
5、根據需求自定義 Network 皮膚
4.1、 網路皮膚概覽
網路由五個窗格組成
1、Controls：使用這些選項可以控制Network皮膚的外觀和功能
2、Filters： 使用這些選項可以控制在 Requests Table 中顯示哪些資源。按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 並點選過濾器可以同時選擇多個過濾器
3、Overview： 此圖表顯示了資源檢索時間的時間線。如果看到多條豎線堆疊在一起，則說明這些資源被同時檢索。
4、Requests Table：此表格列出了檢索的每一個資源。預設情況下，此表格按時間順序排序，最早的資源在頂部。點選資源的名稱可以顯示更多資訊。 右鍵點選任何一個表格標題可以新增或移除資訊列。
5、Summary： 此窗格可以一目瞭然地顯示請求總數、傳輸的資料量和載入時間。
提示：
1、啟用Filters窗格的 Preserve log 核取方塊可以保留網路日誌
2、在Overview窗格可以通過雙擊左鍵把選擇範圍放到最大
4.2、 捕捉螢幕截圖
網路皮膚可以在頁面載入期間捕捉螢幕截圖，此功能稱為幻燈片。
在Controls窗格點選攝影機圖示可以啟用/關閉幻燈片功能。重新載入頁面可以捕捉螢幕截圖。
1、可以通過螢幕截圖分析頁面渲染順序
2、捕捉螢幕截圖尚未結束時，切記不要切換到當前chrome視窗的其他標籤頁，這會導致捕捉失敗
螢幕截圖顯示在概覽（Overview）上方。雙擊螢幕截圖可檢視放大版本。
4.3、DOMContentLoaded 和 load 事件資訊
網路皮膚突出顯示兩種事件：DOMContentLoaded 和 load。
解析頁面的初始標記時會觸發 DOMContentLoaded（dom內容載入完成）。 此事件將在 Network 皮膚上的兩個地方顯示：
1、Overview 窗格中的藍色豎線
2、Summary 窗格中的藍色文字處
頁面完全載入時將觸發load（頁面上所有資源，包括圖片、音訊、視訊等載入完成，在DOMContentLoaded被觸發之後才觸發）。此事件顯示在三個地方：
1、Overview 窗格中的紅色豎線
2、Requests Table 中的紅色豎線
3、Summary 窗格中的紅色文字處
點選資源名稱可以檢視與該資源有關的更多資訊，比如大小、載入時間等。
點選任意資源，在右側開啟的窗格>Timing，在此可以檢視檔案的載入時間分析
4.4、模擬網路連線
可以通過 Network 皮膚開啟網路調節。從下拉選單中選擇要應用網路節流和延遲時間操控的連線。
點選 Add... 選項可以自定義網路
其他
工作中常用的chrome除錯就到這裡了，關於chrome開發者工具還有效能優化、記憶體管理等，這些比較複雜，就不一一介紹了，有時間在弄。