https://juejin.cn/post/7248118049584316472

00、基礎操作匯總

操作類型	快捷鍵/說明
切換瀏覽器標簽	?? Ctrl+1到8切換到對應序號的瀏覽器標簽 ?? Ctrl+PgUp/PgDn標簽頁左右切換
瀏覽器全屏	F11 (? + shift + F Mac)
打開調試模式	?? F12，Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac) ?? 頁面右鍵菜單“檢查”，瀏覽器菜單“開發(fā)者工具”
切換調試工具位置（下面、右邊）	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 )：錯誤堆棧信息另存為文件，保存完整堆棧信息。

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

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

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

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

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

• 通過Command面板：搜索“截圖”，全屏截圖、指定節(jié)點截圖。
• 元素面板中，選中元素》右鍵菜單》“捕獲節(jié)點屏幕截圖”。

---

01、元素面板（Element）

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

• DOM樹：左側為DOM元素樹，支持多種操作，如編輯、刪除、新增、復制DOM元素，更多可查看右鍵菜單。
• 樣式：選中元素的樣式，可編輯、添加CSS樣式，實時預覽。
• 已計算：選中元素計算的樣式值。
• 布局：grid布局、flex布局調試。

1.1、CSS可視化編輯器

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

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

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

1.2、強制激活偽類

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

• 選擇Dom節(jié)點右鍵“強制狀態(tài)”。
• 如下圖CSS樣式中“切換元素狀態(tài)”。

1.3、DOM斷點

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

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

---

02、控制臺面板（Console）

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

• 運行代碼：可執(zhí)行任意JS代碼，包括調用頁面已有的JS對象、函數。
• console輸出：代碼中的Console、異常錯誤都會在這里輸出。

2.1、console函數

用console函數輸出變量，是比較常用的調試技巧，console的常用函數：

console函數	說明
console.log(str)	控制臺輸出一條消息
console.error(str);	打印一條錯誤信息，類似的還有info、warn
console.table(data [, columns])	將數據以表格的形式顯示，很實用，data為數組或對象，第二個參數（數組）可指定輸出的列
console.dir(object)	樹形方式打印對象，特別是DOM對象非常實用
console.assert(false, 'false')	斷言輸出，為false才會輸出
console.trace()	輸出當前位置的執(zhí)行堆棧，用斷點會更實用一些。
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、監(jiān)聽函數

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

函數	說明
monitor( function )	監(jiān)聽一個函數，當被監(jiān)聽函數執(zhí)行的時候，會打印被調用信息
monitorEvents ( event )	監(jiān)聽一個事件，當事件被觸發(fā)時打印觸發(fā)事件日志

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

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

---

03、源代碼面板（Sources）

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

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

• ① 頁面資源目錄：頁面涉及的所有資源（樹）。
• ② 源代碼：文件源代碼，可以在這里添加斷點調試JS代碼，如果想編輯在線JS代碼，也是可以的，詳見后文。
• ③ Debug工具欄：斷點調試的操作工具，可以控制暫停、繼續(xù)、單步...執(zhí)行代碼。
• ④ 斷點調試器：這里包含多個斷點調試器：

• 監(jiān)視（Watch）：可添加對變量的監(jiān)視。
• 斷點（Breakpoints）：所有添加的斷點，可在這里編輯、刪除管理。
• 作用域（Scope）：當前代碼上下文的作用域，含閉包。
• 調用堆棧（Call Stack）：當前函數的調用堆棧，推薦參考《JavaScript函數(2)原理{深入}執(zhí)行上下文》。
• XHR/提取斷點：可以在這里添加對AJAX請求（XHR、Fetch）的斷點，添加URL地址即可。
• DOM斷點：在元素頁面添加的DOM斷點會在這里顯示。

3.1、斷點調試

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

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

也可以在JS代碼中設置斷點，關鍵字：debugger

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

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

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

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

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

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

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

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

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

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

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

• CSS、HTML、JavaScript都支持。
• 可以在瀏覽器的源代碼中修改，也可以本地其他工具中打開編輯。

---

04、網絡面板（Network）

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

點擊請求的資源項，可以查看詳細的請求、響應數據，常用于服務端接口的聯調。

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

---

05、性能面板（Performance）

先錄制，后分析，分析網絡、CPU、內存、渲染FPS幀率，用于定位、解決頁面性能問題。

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

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

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

作者：安木夕
鏈接：https://juejin.cn/post/7248118049584316472
來源：稀土掘金
著作權歸作者所有。商業(yè)轉載請聯系作者獲得授權，非商業(yè)轉載請注明出處。