Console面板：
console.clear()
console.log(),warn(),info()
console.time(),timeEnd()
console.count()
console.trace()
console.table()
console.dir()
console.assert()
console.group(),groupEnd()
$选择器
keys(),values()
copy()
Element面板：
css调试
html调试
DOM断点
Network面板：
Controls，Filters区域
OverView区域
Requests Table 区域
Summary 区域
Sources 面板：
自定义代码片段 Snippets
设置断点
Performance 面板：
1.Controls - 开始记录，停止记录和配置记录期间捕获的信息
2.Overview - 页面性能的汇总
3.Flame Chart - [火焰图(线程面板)]。在火焰图上看到三条（绿色的有好几条）垂直的虚线：
蓝线代表 DOMContentLoaded 事件
绿线代表首次绘制的时间
红线代表 load 事件
4.Details - 在 Flame Chart 中，选择了某一事件后，这部分会展示与这个事件相关的更多信息；
Lighthouse(Audits) 面板：
-
Performance性能 -
accessibility无障碍使用 -
Best Practice用户体验 -
SEOSEO 优化 -
Progressive Web App页对于 PWA 的兼容性
Security 面板：
用于检测当面页面的安全性
参考：
脱离996，Chrome DevTools 面板全攻略！！！
前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
网站性能调优开发工具: Lighthouse, Puppeteer 以及进阶部分丨 Google 开发者大会 2018
前端神器—Google Chrome Devtools细节详解
