Chrome 是 Google 出品的一款非常優秀的瀏覽器，其內置了開發者工具（Windows 系統中按下 F12 即可開啟），可以讓我們方便地對 JavaScript 代碼進行調試。
為方便大家學習和使用，本文我對 Chrome 的調試技巧做個系統的總結。
一、設置斷點
有兩種方法可以給代碼添加斷點
方法1：在 Source 內容區設置
（1）找到要調試的文件，然后在內容源代碼左側的代碼標記行處點擊，即可打上一個斷點。
（2）刷新瀏覽器，當頁面代碼運行到斷點處便會暫停執行。
方法2：在 js 文件中設置
（1）我們在 js 源文件中需要執行斷點操作的代碼前加上 debugger。
（2）刷新瀏覽器，當頁面代碼運行到斷點處會暫停執行
二、設置斷點執行條件
（1）右鍵點擊設置的斷點，選擇 Edit breakpoint...
（2）輸入執行斷點的條件表達式，當表達式為 true 時斷點調試才會生效。有了條件斷點，我們在調試代碼的時候能夠更加精確地控制代碼斷點的時機
三、Call Stack 調用棧
1，界面介紹
（1）當斷點執行到某一程序塊處停下來后，右側調試區的 Call Stack 會顯示當前斷點所處的方法調用棧，從上到下由最新調用處依次往下排列。
（2）Call Stack 列表的下方是 Scope Variables 列表，可以查看此時局部變量和全局變量的值。
2，使用技巧
（1）調試時當前調用在哪里，Call Stack 列表里的箭頭便會指向哪里。同時當我們點擊調用棧列表上的任意一處，便會調到相應的位置，方便我們再回頭去看看代碼。
（2）如果想重新從某個調用方法處執行，可以右鍵選擇 Restart Frame。斷點就會跳到此處開頭重新執行，同時 Scope 中的變量值也會依據代碼重新更改，這樣就可以方便地回退來重新調試，省得我們再重新刷新整個頁面。
四、DOM 元素設置斷點
1，DOM Breakpoints 介紹
除了可以給 js 代碼設置斷點，我們還可以給 DOM 元素設置斷點。因為我們有時候需要監聽和查看某個元素的變化、賦值情況，但是並是不太關心哪一段代碼對它做的修改，只想看看它的變化情況，那么可以給它來個監聽事件。
2，使用說明
（1）我們右鍵點擊需要監聽的 DOM 節點，選擇“Break On...”菜單項，在出現的三個選擇項中任選一個便會添加斷點。
（2）這三個選擇項分別對應如下三種修改情況：
- suntree modifications：子節點修改
- attribute modifications：自身屬性修改
- node removal：自身節點被刪除
（3）設置好斷點后，當 DOM 元素要被修改時，代碼就會在自動停留在修改處。
五、統一管理所有斷點
我們可能會在不同的文件、不同的位置添加許多斷點。這些都會顯示在 Source 頁面里的 Breakpoints、DOM Breakpoints 區域中：
- Breakpoints：js 斷點
- DOM Breakpoints：DOM 元素斷點
點擊斷點前面的復選框可以暫時“去掉/加上”該斷點，點擊斷點可跳轉到相應的程序代碼處
六、快捷鍵
1，快速定位文件
使用快捷鍵：ctrl + p
2，快速定位文件中成員函數
使用快捷鍵：ctrl + shif + o
七、格式化
1，js代碼格式化
為了減小體積，有時候我們發現一些 js 源碼都是壓縮之后的代碼，我們可以點擊下面的 {} 大括號按鈕將代碼轉成可讀格式。
2，格式化返回的 JSON 數據
（1）有時我們調試程序時需要查看服務端返回的數據內容，這個在 Network 選項卡中就可看到。但如果后台返回的是沒有格式化的 JSON 數據，查看起來會異常痛苦
（2）我們可以通過 chrome 控制台的 copy 接口來實現 JSON 數據的格式化。
（3）首先請求項的右鍵菜單中選擇 Copy Response 拷貝響應內容。
（4）命令行中先輸入 copy()，然后將拷貝的數據粘貼到括號中
（5）回車后 copy 接口便會自動將數據進行格式化，並保存到剪貼板中。我們將其粘貼到文本編輯器中就可以看到效果：
八、使用 Snippets 編寫代碼片段
1，Snippets 介紹
（1）在 Souces 頁面下的 Snippets 欄目中，我們可以隨時進行 JS 代碼的編寫，運行結果會打印到控制台。
（2）代碼是全局保存的，我們在任何頁面，包括新建標簽頁，都可以查看或運行這些代碼。我們不再需要為了運行一小段 JS 代碼而新建一個 HTML 頁面。
（3）Snippets 的方便之處在於，我們只需要打開 Chrome 就可以編寫一份任意頁面都可以運行的JS代碼
2，使用樣例
（1）點擊“New Snippet”按鈕，創建一個新的片段文件
（2）在代碼區域輸入 js 代碼
（3）按下“Ctrl + Enter”或者點擊右下方的按鈕執行代碼，可以看到代碼執行成功且反應到當前頁面上了。
九、Async 調試
Chrome 調試器的 Async 模式是為調試異步函數所設計一個功能
1，測試代碼
下面是一段使用 Promise 的代碼：
//做飯 function cook(){ console.log('開始做飯。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('做飯完畢！'); resolve('雞蛋炒飯'); }, 1000); }); return p; } //吃飯 function eat(data){ console.log('開始吃飯：' + data); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('吃飯完畢!'); resolve('用過的碗和筷子'); }, 2000); }); return p; } cook() .then(eat) .then(function(data){ console.log(data); });
2，代碼調試
（1）我們都知道 Promise 的回調是異步執行的，默認情況下調用棧只記錄到回調函數本身，我們無法找到代碼執行的順序，這給我們調試帶來巨大的困難。
（2）開啟 Async 模式后，異步函數之前的調用棧都會被記錄下來，而且調用棧中代碼執行狀態也得到了保留。
