命令概述
-
调起命令菜单:
Ctrl+ Shift+P -
基本命令类型:
panel(面板)
、Drawer
、Appearance
、console
、Debugger
、Elements
、Global
、Mobile
、Navigation
、Network
、Performance
、Rendering
、ScreenShoot
、Settings
、Sources
; -
快速打开DevTools:
Ctrl+ Shift+ C 审查元素模式
Ctrl+ Shift+ J 控制台模式 -
不同的Pannel切换
Ctrl+ [ 及 Ctrl+ ]
常用命令
Panel
:展示一些功能面板,包括show elements
、show layers
、show lighthouse
-性能分析等;Drawer
:展示下方的功能面板,包括show console
、show rendering
、show coverage
-代码覆盖率、show changes
、toggle drawer
等;drawer可以理解为抽屉工具,一般可以控制显示隐藏,配合panel
食用味更可~Appearance
:可以用于设置devtools的主题色(亮/暗),可以用于切换颜色格式(rgb/hls/用户书写默认)以及panel
布局为横板或竖版(element点击后的styles布局)Console
:最常用之一,包括clear console history
、show/hide timestamps
等Mobile
:show rulers
-展示标尺、capture full size screenshot
屏幕自动截取、Navigation
:
Ctrl+ Shift+ R Hard reload
Ctrl+ R reloadNetwork
:Block ads on this site
、Go online/Go offline
、Disable Cache
等;Performance
:Collect garbage
、Instrument coverage
-测量覆盖率、Rendering
:show/hide layer borders
-展示布局边界;Sources
:Add folder to workspace
、create new snippet
、Disable css/javascript source map
、go to line
、save
、show page
、show snippet
、show filesystem
;
格式化打印
- 打印普通变量:可以外层加
{}
,这样可以同时打印变量名和值,不需要你手动为变量拼接一些字符串作为区分;
- 打印元素为对象的数组 ——
console.table
- 为log添加颜色区分
$
及$$
代替document.querySelector
及document.querySelectorAll
;
$0
至$4
,$0
表示当前选中的DOM元素,$1
表示上一次选中的元素;$_
表示最后一次console的计算值getEventListeners(ele)
获取ele上注册的所有事件
Debugging in source panel
-
金丝雀版本开启代码自动美化
settings -> experiments -> automatically pretty print in the sources panel
或者使用命令show Experiments
-
添加条件断点或者日志断点避免频繁操作导致不断触发断点,然后还需要我们手动运行;
-
伪元素的元素审查
鼠标触发对应伪元素,同时使用快捷键暂停ui,(window通常F8或者ctrl
+\
) -
使用
snippets
为应用或页面添加代码片段用于调试,如lodash
、jquery
等; -
network overrides
:使用network overrides
可以调试生产环境的页面,具体可以参考文献6
Coverage - 代码覆盖率分析
可以用于分析打包js中的死代码并将其移除;
参考文献
- Chrome DevTools 概览
- Chrome DevTools中的这些骚操作,你都知道吗?
- Chrome DevTools 代码覆盖率功能详解
- Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools
- 20个Chrome DevTools调试技巧
- [Chrome DevTools: Edit production websites with Network Overrides](Chrome DevTools: Edit production websites with Network Overrides)