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. Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools
4. 20個Chrome DevTools調試技巧
5. [Chrome DevTools: Edit production websites with Network Overrides](Chrome DevTools: Edit production websites with Network Overrides)