前端Chrome除錯技巧最全彙總

刘家小生發表於2024-07-18
前端Chrome除錯


00、基礎操作彙總

操作型別快捷鍵/說明
切換瀏覽器標籤 🔸 Ctrl+1到8切換到對應序號的瀏覽器標籤 🔸 Ctrl+PgUp/PgDn標籤頁左右切換
瀏覽器全屏 F11 (⌘ + shift + F Mac)
開啟除錯模式 🔸 F12，Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac) 🔸 頁面右鍵選單“檢查”，瀏覽器選單“開發者工具”
切換除錯工具位置（下面、右邊） ctrl + shift + D (⌘ + shift + D Mac)
切換 DevTools 的皮膚標籤 ctrl + [ 和 ctrl + ]左右切換除錯工具皮膚
內容搜尋查詢 Ctrl+F：元素、控制檯、原始碼、網路都支援搜尋查詢
使用命令Command皮膚 Ctrl] + [Shift] + [P] （Mac： [⌘] + [Shift]+ [P]） 類似VSCode的命令皮膚，有大量的隱藏功能，可以在這裡搜尋使用
複製元素 🔸 元素皮膚：選中元素》Ctrl+C 🔸 元素皮膚：選中元素》右鍵選單》複製元素 🔸 copy($0) 控制檯中程式碼複製當前選中元素
控制檯：快速訪問當前元素'$0' $0代表在元素皮膚中選中元素，$1是上一個，支援到$4
控制檯：全域性copy方法 複製任何物件到剪下板，copy(window.location)
控制檯：queryObjects(Type) 查詢指定型別（構造器）的物件例項有哪些
控制檯：儲存堆疊資訊( Stack trace ) 報錯資訊可以右鍵另存為檔案，儲存完整堆疊資訊
控制檯：$、$$查詢Dom元素 - $ = document.querySelector - $$ = document.querySelectorAll
Store as global（儲存為全域性變數） 🔸 控制檯（右鍵）：把一個物件設定為全域性變數，自動命名為temp* 🔸 元素皮膚（右鍵）：把一個元素設定全域性變數，同上
元素：h快速隱藏、顯示該元素 選中元素，按下h快速隱藏、顯示該元素。
元素：移動元素 🔸 滑鼠拖動到任意位置 🔸 上下移動，[ctrl] + [⬆] / [ctrl] + [⬇] （[⌘] + [⬆] / [⌘] + [⬇]on Mac）

🔸Store as global（儲存為全域性變數）：類似copy方法，將一個物件儲存為全域性變數，變數命名依次為temp1、temp2。

**🔸儲存堆疊資訊( Stack trace )**：錯誤堆疊資訊另存為檔案，儲存完整堆疊資訊。

選擇檔案可進一步檢視程式碼的使用分析，紅色 = 尚未執行，青藍色 = 至少執行了一次。

01、元素皮膚（Element）

可以自由除錯DOM、CSS樣式，使用評率級高：⭐⭐⭐⭐⭐。

  • DOM樹：左側為DOM元素樹，支援多種操作，如編輯、刪除、新增、複製DOM元素，更多可檢視右鍵選單。
  • 樣式：選中元素的樣式，可編輯、新增CSS樣式，實時預覽。
  • 已計算：選中元素計算的樣式值。
  • 佈局：grid佈局、flex佈局除錯。

1.1、CSS視覺化編輯器

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

  • 顏色編輯器：只要是顏色屬性，都可以點選色塊按鈕視覺化編輯顏色，支援拖動設定顏色、取色、設定對比度。
  • Grid、Flex佈局編輯器：當使用彈性佈局Grid、Flex時，支援視覺化編輯佈局對齊方式。
  • 陰影編輯器：陰影shadow屬性上，會出現編輯器按鈕，視覺化編輯陰影效果。

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

1.2、強制啟用偽類

強制啟用元素的偽類效果。

  • 選擇Dom節點右鍵“強制狀態”。
  • 如下圖CSS樣式中“切換元素狀態”。

1.3、DOM斷點

選中DOM元素，右鍵設定中斷點，可以在元素更改（JS程式碼修改DOM）時觸發斷點。

新增後可以在原始碼中檢視到已新增的DOM斷點，或者元素皮膚中的“DOM斷點”。

02、控制檯皮膚（Console）

主要功能就是除錯JavaScript程式碼，是比較常用的除錯工具，使用評率很高：⭐⭐⭐⭐⭐。

  • 執行程式碼：可執行任意JS程式碼，包括呼叫頁面已有的JS物件、函式。
  • console輸出：程式碼中的Console、異常錯誤都會在這裡輸出。

2.1、console函式

用console函式輸出變數，是比較常用的除錯技巧，console的常用函式：

**console**[2]函式說明
console.log(str) 控制檯輸出一條訊息
console.error(str); 列印一條錯誤資訊，類似的還有info、warn
console.table(data [, columns]) 將資料以表格的形式顯示，很實用，data為陣列或物件，第二個引數（陣列）可指定輸出的列
console.dir(object) 樹形方式列印物件，特別是DOM物件非常實用
console.assert(false, 'false') 斷言輸出，為false才會輸出
console.trace() 輸出當前位置的執行堆疊，用斷點會更實用一些。
console.time(label) 計時器，可用來計算耗時（毫秒），三個函式配合使用：time(開始計時) > timeLog(計時) > timeEnd(結束)
console.clear() 清空控制檯，並輸出 Console was cleared。 
console.log('log');
console.info('info');
console.warn('warn');
console.error('error');
console.table(["sam", "egan", "kettle"])
throw new Error('出錯了！！！')

控制檯輸出效果，右側連結為對應JS程式碼的連結。

用console.time()來計算程式碼的耗時，引數為計時器命名。

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

// 計算一個函式的耗時
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});

如上程式碼，經常我們會輸出一些變數值，如果直接輸出值，則不知道值對應的變數。這時可以用字面量物件，輸出的可讀性立馬就提升了，再加上console.table就更完美了。

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

console函式支援的佔位符：

佔位符描述
%c CSS樣式佔位符，值就是CSS樣式，如下示例，可用來自定義log的樣式
%o or %O 列印 JavaScript 物件。在審閱器點選物件名字可展開更多物件的資訊。
%d or %i 列印整數。支援數字格式化。例如，console.log("Foo %.2d", 1.1) 會輸出有先導 0 的兩位有效數字：Foo 01。
%s 列印字串。
%f 列印浮點數。支援格式化，比如 console.log("Foo %.2f", 1.1) 會輸出兩位小數：Foo 1.10

2.4、監聽函式

透過如下（除錯工具）的全域性函式可監聽一個函式、事件的執行。

函式說明
monitor( function ) 監聽一個函式，當被監聽函式執行的時候，會列印被呼叫資訊
monitorEvents ( event ) 監聽一個事件，當事件被觸發時列印觸發事件日誌

2.5、監聽變數：活動表示式

一個不錯的小功能，點選下圖中的眼睛圖示，相當於新增了一個動態表示式，然後實時監控（顯示）該表示式的值。

03、原始碼皮膚（Sources）

顧名思義，管理網頁所有的原始碼檔案，包括JS、CSS、圖片等資源，經常就是在這裡斷點除錯JS程式碼，使用評率中：⭐⭐⭐⭐。

在除錯模式下可以檢視（滑鼠懸浮在變數上）變數值、上下文作用域、函式呼叫堆疊資訊。

  • ① 頁面資源目錄：頁面涉及的所有資源（樹）。
  • ② 原始碼：檔案原始碼，可以在這裡新增斷點除錯JS程式碼，如果想編輯線上JS程式碼，也是可以的，詳見後文。
  • ③ Debug工具欄：斷點除錯的操作工具，可以控制暫停、繼續、單步...執行程式碼。
  • ④ 斷點偵錯程式：這裡包含多個斷點偵錯程式：
  • 監視（Watch）：可新增對變數的監視。
  • 斷點（Breakpoints）：所有新增的斷點，可在這裡編輯、刪除管理。
  • 作用域（Scope）：當前程式碼上下文的作用域，含閉包。
  • 呼叫堆疊（Call Stack）：當前函式的呼叫堆疊，推薦參考《JavaScript函式(2)原理{深入}執行上下文[3]》。
  • XHR/提取斷點：可以在這裡新增對AJAX請求（XHR、Fetch）的斷點，新增URL地址即可。
  • DOM斷點：在元素頁面新增的DOM斷點會在這裡顯示。

3.1、斷點除錯

如下圖，在原始碼行號位置新增斷點。

  • 新增斷點（Add breakpoint）：新增一個普通斷點，最左側行號處，點選新增斷點，或者右鍵選單。

也可以在JS程式碼中設定斷點，關鍵字：debugger

debugger // 會在這裡斷點
console.log('debugger')
  • 新增條件斷點（Add conditional breakpoint）：新增一個條件斷點，符合條件斷點才會生效，條件可使用當前程式碼上下文中的變數。

  • 新增記錄點（Add logpoint）：新增一個日誌列印，列印當前程式碼環境的變數，非常方便，不用在原始碼下新增console了。

3.2、除錯線上程式碼：本地工作區

如果是線上的環境，能不能直接修改原始碼（JS、CSS）除錯呢？—— 可以的。思路就是建立本地的JS副本，頁面載入本地的JS檔案，就可以在本地JS檔案上修改了。

① 建立本地工作目錄：

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

  • 然後點選“選擇替代資料夾”，新增一個本地空的資料夾，作為本地工作目錄。
  • 新增後要注意要確認授權。

② 建立原始碼的本地副本：選擇需要修改的原始碼右鍵“儲存以備替代”，就會在本地目錄建立副本檔案，網頁使用本地的JS檔案。

  • 建立的本地副本，可以在“覆蓋”下看到，也可以在本地資料夾下看到。

③ 編輯程式碼：該JS檔案就可以直接在原始碼中編輯修改了，實時生效。

  • CSS、HTML、JavaScript都支援。
  • 可以在瀏覽器的原始碼中修改，也可以本地其他工具中開啟編輯。

04、網路皮膚（Network）

工具欄中兩個比較實用的小功能：禁用快取、模擬弱網環境。

點選請求的資源項，可以檢視詳細的請求、響應資料，常用於服務端介面的聯調。

還可以編輯引數，重新發起請求

05、效能皮膚（Performance）

先錄製，後分析，分析網路、CPU、記憶體、渲染FPS幀率，用於定位、解決頁面效能問題。

🚩特別提示：除錯效能建議在無恆模式下進行，儘量避瀏覽器外掛的影響。包括其他異常Bug的除錯，也要考慮瀏覽器外掛問題，之前就遇到過類似問題，頁面上一個Bug怎麼也復現不了，幾經波折才發現是測試機上的油猴外掛的影響。

🔸效能監視器（Performance monitor）皮膚可以實時的監控頁面效能引數。

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

相關文章