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)