注：本文測(cè)試、截圖均為Edge瀏覽器（內(nèi)核是Chromium），瀏覽器內(nèi)核可了解《有哪些瀏覽器/內(nèi)核？[1]》

00、基礎(chǔ)操作匯總

??Store as global（存儲(chǔ)為全局變量）：類似copy方法，將一個(gè)對(duì)象保存為全局變量，變量命名依次為temp1、temp2。 

**??保存堆棧信息( Stack trace )**：錯(cuò)誤堆棧信息另存為文件，保存完整堆棧信息。 

??Command面板：同VSCode的命令面板，可以找到調(diào)試工具的所有的（隱藏）功能。Ctrl] + [Shift] + [P]（Mac： [?] + [Shift]+ [P]） 

• 設(shè)置主題：打開Command面板，搜索“主題”，可以切換多種主題

• 分析代碼的覆蓋率：打開Command面板，如下圖搜索“覆蓋”，分析首次頁面加載過程中哪些代碼執(zhí)行了，那些沒有執(zhí)行，輸出一個(gè)報(bào)告。

選擇文件可進(jìn)一步查看代碼的使用分析，紅色 = 尚未執(zhí)行，青藍(lán)色 = 至少執(zhí)行了一次。 

??元素截圖：輸出指定元素的截圖，包含隱藏滾動(dòng)的內(nèi)容，這個(gè)功能挺好用的。

• 通過Command面板：搜索“截圖”，全屏截圖、指定節(jié)點(diǎn)截圖。

• 元素面板中，選中元素》右鍵菜單》“捕獲節(jié)點(diǎn)屏幕截圖”。

01、元素面板（Element）

可以自由調(diào)試DOM、CSS樣式，使用評(píng)率級(jí)高：?????。

• DOM樹：左側(cè)為DOM元素樹，支持多種操作，如編輯、刪除、新增、復(fù)制DOM元素，更多可查看右鍵菜單。

• 樣式：選中元素的樣式，可編輯、添加CSS樣式，實(shí)時(shí)預(yù)覽。

• 已計(jì)算：選中元素計(jì)算的樣式值。

• 布局：grid布局、flex布局調(diào)試。

1.1、CSS可視化編輯器

可視化的顏色、貝塞爾曲線、陰影編輯器，所見即所得，挺好用！

• 顏色編輯器：只要是顏色屬性，都可以點(diǎn)擊色塊按鈕可視化編輯顏色，支持拖動(dòng)設(shè)置顏色、取色、設(shè)置對(duì)比度。

• Grid、Flex布局編輯器：當(dāng)使用彈性布局Grid、Flex時(shí)，支持可視化編輯布局對(duì)齊方式。

• 陰影編輯器：陰影shadow屬性上，會(huì)出現(xiàn)編輯器按鈕，可視化編輯陰影效果。

• 貝塞爾曲線編輯器：在動(dòng)畫transition、animation中會(huì)用到貝塞爾曲線函數(shù)（緩動(dòng)函數(shù)）。

1.2、強(qiáng)制激活偽類

強(qiáng)制激活元素的偽類效果。

• 選擇Dom節(jié)點(diǎn)右鍵“強(qiáng)制狀態(tài)”。

• 如下圖CSS樣式中“切換元素狀態(tài)”。

1.3、DOM斷點(diǎn)

選中DOM元素，右鍵設(shè)置中斷點(diǎn)，可以在元素更改（JS代碼修改DOM）時(shí)觸發(fā)斷點(diǎn)。

添加后可以在源代碼中查看到已添加的DOM斷點(diǎn)，或者元素面板中的“DOM斷點(diǎn)”。 

02、控制臺(tái)面板（Console）

主要功能就是調(diào)試JavaScript代碼，是比較常用的調(diào)試工具，使用評(píng)率很高：?????。

• 運(yùn)行代碼：可執(zhí)行任意JS代碼，包括調(diào)用頁面已有的JS對(duì)象、函數(shù)。

• console輸出：代碼中的Console、異常錯(cuò)誤都會(huì)在這里輸出。

2.1、console函數(shù)

用console函數(shù)輸出變量，是比較常用的調(diào)試技巧，console的常用函數(shù)：

console.log('log');
console.info('info');
console.warn('warn');
console.error('error');
console.table(["sam", "egan", "kettle"])
throw new Error('出錯(cuò)了?。?！')

控制臺(tái)輸出效果，右側(cè)鏈接為對(duì)應(yīng)JS代碼的鏈接。 

用console.time()來計(jì)算代碼的耗時(shí)，參數(shù)為計(jì)時(shí)器命名。 

function sum(n) {
    let sum = 0;
    for (i = 1; i <= n; i++) {
        let u = {name: 'sam', age: i}
        sum += i;
    }
    return sum
}

// 計(jì)算一個(gè)函數(shù)的耗時(shí)
console.time('sum') // 開始計(jì)時(shí)
const total = sum(100000);
console.timeLog('sum');  // 計(jì)時(shí)：sum: 4.43994140625 ms
const total2 = sum(1000);
console.timeEnd('sum');  // 計(jì)時(shí)：sum: 5.0419921875 ms
console.log({total});  //{total: 5000050000}

2.2、增強(qiáng)log：真實(shí)用！ 

const x = 100, y = 200;
console.log(x, y); // 100 200
console.log({x, y}); // {x: 100, y: 200}
console.table({x, y}); 

如上代碼，經(jīng)常我們會(huì)輸出一些變量值，如果直接輸出值，則不知道值對(duì)應(yīng)的變量。這時(shí)可以用字面量對(duì)象，輸出的可讀性立馬就提升了，再加上console.table就更完美了。 

2.3、自定義log樣式：占位符

console函數(shù)支持的占位符：

2.4、監(jiān)聽函數(shù)

通過如下（調(diào)試工具）的全局函數(shù)可監(jiān)聽一個(gè)函數(shù)、事件的執(zhí)行。

2.5、監(jiān)聽變量：活動(dòng)表達(dá)式

一個(gè)不錯(cuò)的小功能，點(diǎn)擊下圖中的眼睛圖標(biāo)，相當(dāng)于添加了一個(gè)動(dòng)態(tài)表達(dá)式，然后實(shí)時(shí)監(jiān)控（顯示）該表達(dá)式的值。

03、源代碼面板（Sources）

顧名思義，管理網(wǎng)頁所有的源代碼文件，包括JS、CSS、圖片等資源，經(jīng)常就是在這里斷點(diǎn)調(diào)試JS代碼，使用評(píng)率中：????。

在調(diào)試模式下可以查看（鼠標(biāo)懸浮在變量上）變量值、上下文作用域、函數(shù)調(diào)用堆棧信息。

• ① 頁面資源目錄：頁面涉及的所有資源（樹）。

• ② 源代碼：文件源代碼，可以在這里添加斷點(diǎn)調(diào)試JS代碼，如果想編輯在線JS代碼，也是可以的，詳見后文。

• ③ Debug工具欄：斷點(diǎn)調(diào)試的操作工具，可以控制暫停、繼續(xù)、單步...執(zhí)行代碼。

• ④ 斷點(diǎn)調(diào)試器：這里包含多個(gè)斷點(diǎn)調(diào)試器：

• 監(jiān)視（Watch）：可添加對(duì)變量的監(jiān)視。

• 斷點(diǎn)（Breakpoints）：所有添加的斷點(diǎn)，可在這里編輯、刪除管理。

• 作用域（Scope）：當(dāng)前代碼上下文的作用域，含閉包。

• 調(diào)用堆棧（Call Stack）：當(dāng)前函數(shù)的調(diào)用堆棧，推薦參考《JavaScript函數(shù)(2)原理{深入}執(zhí)行上下文[3]》。

• XHR/提取斷點(diǎn)：可以在這里添加對(duì)AJAX請(qǐng)求（XHR、Fetch）的斷點(diǎn)，添加URL地址即可。

• DOM斷點(diǎn)：在元素頁面添加的DOM斷點(diǎn)會(huì)在這里顯示。

3.1、斷點(diǎn)調(diào)試

如下圖，在源代碼行號(hào)位置添加斷點(diǎn)。

• 添加斷點(diǎn)（Add breakpoint）：添加一個(gè)普通斷點(diǎn)，最左側(cè)行號(hào)處，點(diǎn)擊添加斷點(diǎn)，或者右鍵菜單。

也可以在JS代碼中設(shè)置斷點(diǎn)，關(guān)鍵字：debugger

debugger // 會(huì)在這里斷點(diǎn)
console.log('debugger')

• 添加條件斷點(diǎn)（Add conditional breakpoint）：添加一個(gè)條件斷點(diǎn)，符合條件斷點(diǎn)才會(huì)生效，條件可使用當(dāng)前代碼上下文中的變量。

• 添加記錄點(diǎn)（Add logpoint）：添加一個(gè)日志打印，打印當(dāng)前代碼環(huán)境的變量，非常方便，不用在源碼下添加console了。

3.2、調(diào)試線上代碼：本地工作區(qū)

如果是線上的環(huán)境，能不能直接修改源代碼（JS、CSS）調(diào)試呢？—— 可以的。思路就是創(chuàng)建本地的JS副本，頁面加載本地的JS文件，就可以在本地JS文件上修改了。

① 創(chuàng)建本地工作目錄：

• 如下圖，源代碼下面找到“覆蓋（Override）”。

• 然后點(diǎn)擊“選擇替代文件夾”，添加一個(gè)本地空的文件夾，作為本地工作目錄。

• 添加后要注意要確認(rèn)授權(quán)。

② 創(chuàng)建源代碼的本地副本：選擇需要修改的源代碼右鍵“保存以備替代”，就會(huì)在本地目錄創(chuàng)建副本文件，網(wǎng)頁使用本地的JS文件。

• 創(chuàng)建的本地副本，可以在“覆蓋”下看到，也可以在本地文件夾下看到。

③ 編輯代碼：該JS文件就可以直接在源代碼中編輯修改了，實(shí)時(shí)生效。

• CSS、HTML、JavaScript都支持。

• 可以在瀏覽器的源代碼中修改，也可以本地其他工具中打開編輯。

04、網(wǎng)絡(luò)面板（Network）

工具欄中兩個(gè)比較實(shí)用的小功能：禁用緩存、模擬弱網(wǎng)環(huán)境。 

還可以編輯參數(shù)，重新發(fā)起請(qǐng)求 

05、性能面板（Performance）

先錄制，后分析，分析網(wǎng)絡(luò)、CPU、內(nèi)存、渲染FPS幀率，用于定位、解決頁面性能問題。

??特別提示：調(diào)試性能建議在無恒模式下進(jìn)行，盡量避瀏覽器插件的影響。包括其他異常Bug的調(diào)試，也要考慮瀏覽器插件問題，之前就遇到過類似問題，頁面上一個(gè)Bug怎么也復(fù)現(xiàn)不了，幾經(jīng)波折才發(fā)現(xiàn)是測(cè)試機(jī)上的油猴插件的影響。

??性能監(jiān)視器（Performance monitor）面板可以實(shí)時(shí)的監(jiān)控頁面性能參數(shù)。

??Lighthouse，這個(gè)就很厲害了，對(duì)頁面進(jìn)行綜合分析，包括性能、PWA（Progressive Web App，漸進(jìn)式Web應(yīng)用）、SEO、無障礙訪問等，分析完后產(chǎn)出報(bào)告，給出得分，還給出了頁面改進(jìn)建議。 

總結(jié)

到此這篇關(guān)于前端常用的Chrome調(diào)試技巧的文章就介紹到這了,更多相關(guān)前端Chrome調(diào)試技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論