Chrome devTools筆記

命令概述

1. 調起命令菜單：
   Ctrl+ Shift+P

2. 基本命令類型：
   panel（面板）、Drawer、Appearance、console、Debugger、Elements、Global、Mobile、Navigation、Network、Performance、Rendering、ScreenShoot、Settings、Sources；

3. 快速打開DevTools:
   Ctrl+ Shift+ C 審查元素模式
   Ctrl+ Shift+ J 控制檯模式

4. 不同的Pannel切換
   Ctrl+ [ 及 Ctrl+ ]

常用命令

1. Panel：展示一些功能面板，包括show elements、show layers、show lighthouse-性能分析等；
2. Drawer：展示下方的功能面板，包括show console、show rendering、show coverage-代碼覆蓋率、show changes、toggle drawer等；drawer可以理解爲抽屜工具，一般可以控制顯示隱藏，配合panel食用味更可~
3. Appearance：可以用於設置devtools的主題色（亮/暗），可以用於切換顏色格式（rgb/hls/用戶書寫默認）以及panel佈局爲橫板或豎版（element點擊後的styles佈局）
4. Console：最常用之一，包括clear console history 、show/hide timestamps等
5. Mobile：show rulers-展示標尺、capture full size screenshot屏幕自動截取、
6. Navigation：
   Ctrl+ Shift+ R Hard reload
   Ctrl+ R reload
7. Network：Block ads on this site、Go online/Go offline、Disable Cache等；
8. Performance：Collect garbage、Instrument coverage-測量覆蓋率、
9. Rendering：show/hide layer borders-展示佈局邊界；
10. Sources：Add folder to workspace、create new snippet、Disable css/javascript source map、go to line、save 、show page、show snippet、show filesystem；

格式化打印

1. 打印普通變量：可以外層加{}，這樣可以同時打印變量名和值，不需要你手動爲變量拼接一些字符串作爲區分；
   
2. 打印元素爲對象的數組 —— console.table
3. 爲log添加顏色區分
4. $及$$代替document.querySelector及document.querySelectorAll；
   
5. $0至$4，$0表示當前選中的DOM元素，$1表示上一次選中的元素；$_表示最後一次console的計算值
6. getEventListeners(ele)獲取ele上註冊的所有事件

Debugging in source panel

1. 金絲雀版本開啓代碼自動美化
   settings -> experiments -> automatically pretty print in the sources panel或者使用命令show Experiments

2. 添加條件斷點或者日誌斷點避免頻繁操作導致不斷觸發斷點，然後還需要我們手動運行；
   

3. 僞元素的元素審查
   鼠標觸發對應僞元素，同時使用快捷鍵暫停ui，（window通常F8或者ctrl+\）

4. 使用snippets爲應用或頁面添加代碼片段用於調試，如lodash、jquery等；

5. network overrides：使用 network overrides可以調試生產環境的頁面，具體可以參考文獻6

Coverage - 代碼覆蓋率分析

可以用於分析打包js中的死代碼並將其移除；

---

參考文獻

1. Chrome DevTools 概覽
2. Chrome DevTools中的這些騷操作，你都知道嗎？
3. Chrome DevTools 代碼覆蓋率功能詳解
4. Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools
5. 20個Chrome DevTools調試技巧
6. [Chrome DevTools: Edit production websites with Network Overrides](Chrome DevTools: Edit production websites with Network Overrides)