Chorme Dev Tools 是前端都要打交道的一个工具，以前一直没有非常系统的研究过。
因此，主要是放一些使用要点。
Elements 面板
功能：
Elements 面板检查和实时编辑页面的 HTML 与 CSS。
- Elements 面中可以查看 html 元素，这个功能用得多。编辑 html 元素，双击选定的元素
- 实时编辑样式，在 Styles 窗格。样式的修改一般不是永久性的
- 查看和编辑当前元素的盒模型参数，在 Computed 窗格。盒模型中的所有值都可以进行修改，双击盒模型的值。
Console 面板
- 消息堆叠：如果一条消息连续重复，控制台会“堆叠”消息并在左侧显示一个表示重复次数的数字。(可以在 setting 中更改，
Show timestamps) - 有一个下拉菜单是 Execution Context Selector，通常是
top，可以选择其他环境。
如何打开抽屉式 console 面板
在其他面板中，右侧有一个 Customize and control DevTools，点击 Show console drawer
打开 Console 面板时，抽屉式 console 面板自动折叠。
Source 面板
Source 面板用来调试 JavaScript 代码。
除了在文件中自行加入断点，还有一种是利用右侧的 XHR/fetch、DOM Breakpoints、Event Listener Breakpoints 等设置。在这个面板中，还可调出 console drawer 面板对代码进行调试。参考这里在 Chrome DevTools 中调试 JavaScript 入门
Performance 面板
Performance 面板记录和分析应用在运行时的所有活动
- 火焰图有三条垂直的虚线，蓝线代表 DOMContentLoaded 事件；绿线代表首次绘制的时间；红线代表 load 事件
参考这里如何使用 Timeline 工具