刘亦菲视频,欧洲美女视频一级,性感美女风骚视频

Chrome - JavaScript調(diào)試技巧總結(jié)（瀏覽器調(diào)試JS）

2020.06.08

內(nèi)置了開發(fā)者工具（Windows 系統(tǒng)中按下 F12 即可開啟），可以讓我們方便地對 JavaScript 代碼進行調(diào)試。

為方便大家學習和使用，本文我對 Chrome 的調(diào)試技巧做個系統(tǒng)的總結(jié)。

1	`一、設(shè)置斷點`

有兩種方法可以給代碼添加斷點

方法1：在 Source 內(nèi)容區(qū)設(shè)置

（1）找到要調(diào)試的文件，然后在內(nèi)容源代碼左側(cè)的代碼標記行處點擊，即可打上一個斷點。

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

方法2：在 js 文件中設(shè)置

（1）我們在 js 源文件中需要執(zhí)行斷點操作的代碼前加上 debugger。

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

1	`二、設(shè)置斷點執(zhí)行條件`

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

（2）輸入執(zhí)行斷點的條件表達式，當表達式為 true 時斷點調(diào)試才會生效。有了條件斷點，我們在調(diào)試代碼的時候能夠更加精確地控制代碼斷點的時機

1	`三、Call Stack 調(diào)用棧`

1，界面介紹

（1）當斷點執(zhí)行到某一程序塊處停下來后，右側(cè)調(diào)試區(qū)的 Call Stack 會顯示當前斷點所處的方法調(diào)用棧，從上到下由最新調(diào)用處依次往下排列。

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

2，使用技巧

（1）調(diào)試時當前調(diào)用在哪里，Call Stack 列表里的箭頭便會指向哪里。同時當我們點擊調(diào)用棧列表上的任意一處，便會調(diào)到相應(yīng)的位置，方便我們再回頭去看看代碼。

（2）如果想重新從某個調(diào)用方法處執(zhí)行，可以右鍵選擇 Restart Frame。斷點就會跳到此處開頭重新執(zhí)行，同時 Scope 中的變量值也會依據(jù)代碼重新更改，這樣就可以方便地回退來重新調(diào)試，省得我們再重新刷新整個頁面。

1	`四、DOM 元素設(shè)置斷點`

1，DOM Breakpoints 介紹

除了可以給 js 代碼設(shè)置斷點，我們還可以給 DOM 元素設(shè)置斷點。因為我們有時候需要監(jiān)聽和查看某個元素的變化、賦值情況，但是并是不太關(guān)心哪一段代碼對它做的修改，只想看看它的變化情況，那么可以給它來個監(jiān)聽事件。

2，使用說明

（1）我們右鍵點擊需要監(jiān)聽的 DOM 節(jié)點，選擇“Break On...”菜單項，在出現(xiàn)的三個選擇項中任選一個便會添加斷點。

（2）這三個選擇項分別對應(yīng)如下三種修改情況：

suntree modifications：子節(jié)點修改
attribute modifications：自身屬性修改
node removal：自身節(jié)點被刪除

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

1	`五、統(tǒng)一管理所有斷點`

我們可能會在不同的文件、不同的位置添加許多斷點。這些都會顯示在 Source 頁面里的 Breakpoints、DOM Breakpoints 區(qū)域中：

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

點擊斷點前面的復選框可以暫時“去掉/加上”該斷點，點擊斷點可跳轉(zhuǎn)到相應(yīng)的程序代碼處

1

六、快捷鍵

1，快速定位文件

使用快捷鍵：ctrl + p

2，快速定位文件中成員函數(shù)

使用快捷鍵：ctrl + shif + o

1

七、格式化

1，js代碼格式化

為了減小體積，有時候我們發(fā)現(xiàn)一些 js 源碼都是壓縮之后的代碼，我們可以點擊下面的 {} 大括號按鈕將代碼轉(zhuǎn)成可讀格式。

2，格式化返回的 JSON 數(shù)據(jù)

（1）有時我們調(diào)試程序時需要查看服務(wù)端返回的數(shù)據(jù)內(nèi)容，這個在 Network 選項卡中就可看到。但如果后臺返回的是沒有格式化的 JSON 數(shù)據(jù)，查看起來會異常痛苦

（2）我們可以通過 chrome 控制臺的 copy 接口來實現(xiàn) JSON 數(shù)據(jù)的格式化。

（3）首先請求項的右鍵菜單中選擇 Copy Response 拷貝響應(yīng)內(nèi)容。

（4）命令行中先輸入 copy()，然后將拷貝的數(shù)據(jù)粘貼到括號中

（5）回車后 copy 接口便會自動將數(shù)據(jù)進行格式化，并保存到剪貼板中。我們將其粘貼到文本編輯器中就可以看到效果：

1	`八、使用 Snippets 編寫代碼片段`

1，Snippets 介紹

（1）在 Souces 頁面下的 Snippets 欄目中，我們可以隨時進行 JS 代碼的編寫，運行結(jié)果會打印到控制臺。

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

（3）Snippets 的方便之處在于，我們只需要打開 Chrome 就可以編寫一份任意頁面都可以運行的JS代碼

2，使用樣例

（1）點擊“New Snippet”按鈕，創(chuàng)建一個新的片段文件

（2）在代碼區(qū)域輸入 js 代碼

（3）按下“Ctrl + Enter”或者點擊右下方的按鈕執(zhí)行代碼，可以看到代碼執(zhí)行成功且反應(yīng)到當前頁面上了。

1	`九、Async 調(diào)試`

　　Chrome 調(diào)試器的 Async 模式是為調(diào)試異步函數(shù)所設(shè)計一個功能

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);});