Chrome - JavaScript調試技巧總結（瀏覽器調試JS）

 

 

 

Chrome 是 Google 出品的一款很是優秀的瀏覽器，其內置了開發者工具（Windows 系統中按下 F12 便可開啓），可讓咱們方便地對 JavaScript 代碼進行調試。

爲方便你們學習和使用，本文我對 Chrome 的調試技巧作個系統的總結。

 

1、設置斷點 

有兩種方法能夠給代碼添加斷點

方法1：在 Source 內容區設置

（1）找到要調試的文件，而後在內容源代碼左側的代碼標記行處點擊，便可打上一個斷點。

（2）刷新瀏覽器，當頁面代碼運行到斷點處便會暫停執行。

 

方法2：在 js 文件中設置

（1）咱們在 js 源文件中須要執行斷點操做的代碼前加上 debugger。

（2）刷新瀏覽器，當頁面代碼運行到斷點處會暫停執行

 

2、設置斷點執行條件 

（1）右鍵點擊設置的斷點，選擇 Edit breakpoint...

（2）輸入執行斷點的條件表達式，當表達式爲 true 時斷點調試纔會生效。有了條件斷點，咱們在調試代碼的時候可以更加精確地控制代碼斷點的時機

 

3、Call Stack 調用棧 

1，界面介紹

（1）當斷點執行到某一程序塊處停下來後，右側調試區的 Call Stack 會顯示當前斷點所處的方法調用棧，從上到下由最新調用處依次往下排列。

（2）Call Stack 列表的下方是 Scope Variables 列表，能夠查看此時局部變量和全局變量的值。

 

2，使用技巧

（1）調試時當前調用在哪裏，Call Stack 列表裏的箭頭便會指向哪裏。同時當咱們點擊調用棧列表上的任意一處，便會調到相應的位置，方便咱們再回頭去看看代碼。

（2）若是想從新從某個調用方法處執行，能夠右鍵選擇 Restart Frame。斷點就會跳到此處開頭從新執行，同時 Scope 中的變量值也會依據代碼從新更改，這樣就能夠方便地回退來從新調試，免得咱們再從新刷新整個頁面。

 

 

4、DOM 元素設置斷點　

1，DOM Breakpoints 介紹

除了能夠給 js 代碼設置斷點，咱們還能夠給 DOM 元素設置斷點。由於咱們有時候須要監聽和查看某個元素的變化、賦值狀況，可是並是不太關心哪一段代碼對它作的修改，只想看看它的變化狀況，那麼能夠給它來個監聽事件。

2，使用說明

（1）咱們右鍵點擊須要監聽的 DOM 節點，選擇「Break On...」菜單項，在出現的三個選擇項中任選一個便會添加斷點。

（2）這三個選擇項分別對應以下三種修改狀況：

• suntree modifications：子節點修改
• attribute modifications：自身屬性修改
• node removal：自身節點被刪除

（3）設置好斷點後，當 DOM 元素要被修改時，代碼就會在自動停留在修改處。

 

5、統一管理全部斷點 

 

咱們可能會在不一樣的文件、不一樣的位置添加許多斷點。這些都會顯示在 Source 頁面裏的 Breakpoints、DOM Breakpoints 區域中：

• Breakpoints：js 斷點
• DOM Breakpoints：DOM 元素斷點

點擊斷點前面的複選框能夠暫時「去掉/加上」該斷點，點擊斷點可跳轉到相應的程序代碼處

6、快捷鍵 

1，快速定位文件

使用快捷鍵：ctrl + p

2，快速定位文件中成員函數

使用快捷鍵：ctrl + shif + o

 

7、格式化 

1，js代碼格式化

爲了減少體積，有時候咱們發現一些 js 源碼都是壓縮以後的代碼，咱們能夠點擊下面的 {} 大括號按鈕將代碼轉成可讀格式。

2，格式化返回的 JSON 數據

（1）有時咱們調試程序時須要查看服務端返回的數據內容，這個在 Network 選項卡中就可看到。但若是後臺返回的是沒有格式化的 JSON 數據，查看起來會異常痛苦

 

（2）咱們能夠經過 chrome 控制檯的 copy 接口來實現 JSON 數據的格式化。

（3）首先請求項的右鍵菜單中選擇 Copy Response 拷貝響應內容。

（4）命令行中先輸入 copy()，而後將拷貝的數據粘貼到括號中

（5）回車後 copy 接口便會自動將數據進行格式化，並保存到剪貼板中。咱們將其粘貼到文本編輯器中就能夠看到效果：

8、使用 Snippets 編寫代碼片斷 

1，Snippets 介紹

（1）在 Souces 頁面下的 Snippets 欄目中，咱們能夠隨時進行 JS 代碼的編寫，運行結果會打印到控制檯。

（2）代碼是全局保存的，咱們在任何頁面，包括新建標籤頁，均可以查看或運行這些代碼。咱們再也不須要爲了運行一小段 JS 代碼而新建一個 HTML 頁面。

（3）Snippets 的方便之處在於，咱們只須要打開 Chrome 就能夠編寫一份任意頁面均可以運行的JS代碼

2，使用樣例

（1）點擊「New Snippet」按鈕，建立一個新的片斷文件

（2）在代碼區域輸入 js 代碼

（3）按下「Ctrl + Enter」或者點擊右下方的按鈕執行代碼，能夠看到代碼執行成功且反應到當前頁面上了。

9、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 模式後，異步函數以前的調用棧都會被記錄下來，並且調用棧中代碼執行狀態也獲得了保留。