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

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

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

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

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

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

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

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

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

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

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

01、元素面板（Element）

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

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

• 樣式：選中元素的樣式，可編輯、添加CSS樣式，實時預覽。

• 已計算：選中元素計算的樣式值。

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

1.1、CSS可視化編輯器

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

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

• Grid、Flex布局編輯器：當使用彈性布局Grid、Flex時，支持可視化編輯布局對齊方式。

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

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

1.2、強制激活偽類

強制激活元素的偽類效果。

• 選擇Dom節(jié)點右鍵“強制狀態(tài)”。

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

1.3、DOM斷點

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

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

02、控制臺面板（Console）

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

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

• console輸出：代碼中的Console、異常錯誤都會在這里輸出。

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('出錯了！??！')

控制臺輸出效果，右側(cè)鏈接為對應JS代碼的鏈接。 

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

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

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

2.2、增強log：真實用！ 

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)常我們會輸出一些變量值，如果直接輸出值，則不知道值對應的變量。這時可以用字面量對象，輸出的可讀性立馬就提升了，再加上console.table就更完美了。 

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

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

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

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

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

一個不錯的小功能，點擊下圖中的眼睛圖標，相當于添加了一個動態(tài)表達式，然后實時監(jiān)控（顯示）該表達式的值。

03、源代碼面板（Sources）

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

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

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

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

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

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

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

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

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

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

• XHR/提取斷點：可以在這里添加對AJAX請求（XHR、Fetch）的斷點，添加URL地址即可。

• DOM斷點：在元素頁面添加的DOM斷點會在這里顯示。

3.1、斷點調(diào)試

如下圖，在源代碼行號位置添加斷點。

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

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

debugger // 會在這里斷點
console.log('debugger')

• 添加條件斷點（Add conditional breakpoint）：添加一個條件斷點，符合條件斷點才會生效，條件可使用當前代碼上下文中的變量。

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

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

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

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

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

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

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

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

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

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

• CSS、HTML、JavaScript都支持。

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

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

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

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

05、性能面板（Performance）

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

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

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

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

總結(jié)

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

最新評論