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 安全面板
使用安全面板调试混合内容问题,证书问题等