Elements 元素面板
使用元素面板可以自由操作 DOM 和 CSS 来迭代布局和设计页面
- 操作 DOM：复制，隐藏，展示，调整位置，设置断点，hover展示，shadowDOM
- 编辑样式：增删改，hoveractive，computed快速定位，颜色选择器。
- 检查和调整页面等
Console 控制台面板
用来记录诊断信息、操作 DOM 或者与 javaScript 交互
- 操作 DOM，复制，表哥
- 控制台常用操作 及与javaScript交互 monitorEvents函数，watch 小眼睛监听
Sources 源代码面板
主要用来设置断点调试 JavaScript，或者通过Workspaces（工作区）连接本地文件夹来使用开发者工具的实时编辑器
- 快速定位文件
- 断点调试，条件断点，网络断点
- 监听功能 watch
- 使用开发者工具的Workspaces（工作区）进行实时编辑
- 其他，远程本地关联
Networks 网络面板
可以查看网络请求和下载的资源文件，利用它优化网页加载性能
- 网络面板基础使用
- 网络带宽限制和资源时间轴
Performance 性能面板
使用时间轴面板记录和查看网站生命周期内发生的各种事件，从而提高页面运行时性能
- 查看性能
- 分析运行时性能
- frames和main
Memory 内存面板
可以提供比时间轴面板更多信息，例如跟踪内存泄漏
- JavaScript CPU分析器
- 内存堆区分析器
Application 应用面板
可用来检查加载的所有资源，包括IndexedDB 与 Web SQL数据库，本地和绘画存储，Cookie，应用程序缓存，图像，字体和样式表
Security 安全面板
使用安全面板调试混合内容问题，证书问题等