引言
平常使用 Chrome 开发者工具的频率很高，但从来没有完整的了解过开发者工具中的面板。最近想深入学习一下前端的性能优化，发现使用开发者工具调试是必不可少的步骤，花了两天时间梳理一下面板的功能，觉得收获还挺多。
部分功能列表
日常的工作是做 H5 开发，看 官方文档 的时候，学习到了不少协助开发的功能，用脑图梳理了一下。
面板简单介绍
- 官方文档中，把
Elements、Network等菜单称作为面板，以后终于知道怎么称呼了； - 常用的面板有 设备模式（模拟移动设备的视口） 、元素面板（Elements） 、 控制台面板（Console） 、 源代码面板（Sources） 、 网络面板（Network） 、性能面板（Performance） 、 内存面板（Memory） 、 应用面板（Application） 、安全面板（Security） ;
- 设备模式面板，除了模拟移动设备的视口尺寸，还能模拟移动设备的网络情况、 CPU 性能、传感器，还可以使用 USB 链接安卓设备进行远程调试；
- 元素面板主要是查看 DOM 树和 CSS 样式，其中 DOM 断点调试 和 事件监听器 个人觉得在开发中对调试很有帮助；
- 控制台面板大家使用频率较高，有几个清空控制台的小技巧可以了解一下；如果页面中有嵌入
<iframe>，可以通过切换执行环境来进行调试； - 源代码面板中的断点调试很方便，其中在 Source 面板下面的 Filesystem 面板可以在控制台修改代码后保存，直接覆盖本地文件；
- 网络面板可以用来分析资源加载；
- 性能面板可以记录运行时的性能表现，还可以定位到影响性能的代码所在位置；
- 应用面板可以用来查看和管理存储，还可以管理数据库和缓存；
- 安全面板可以查看当前页面是否安全；
- 内存面板可以使用 CPU 分析器准确地记录调用了哪些函数和每个函数花费的时间；
总结
本文是个人在学习 官方文档 时的功能梳理，这里只简单介绍了各个面板的基础功能，建议系统的看一遍官方文档中的文章，对于开发与调试有很大的帮助。
