Chrome 调试 一 认识面板

了解面板

1. 元素面板
2. 控制台面板
3. 源代码面板
4. 网络面板
5. 性能面板
6. 内存面板
7. 应用面板
8. 安全面板

1. 元素面板

使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面。

• 检查和调整页面
• 编辑样式
• 编辑 DOM

2.控制台面板

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript 交互。

• 使用控制台面板
• 命令行交互

3.源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器

• 断点调试
• 调试混淆的代码
• 使用开发者工具的 Workspaces（工作区）进行持久化保存

4.网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能。

• 网络面板基础
• 了解资源时间轴
• 网络带宽限制

5.性能面板

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

6.内存面板

如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。

• JavaScript CPU 分析器
• 内存堆区分析器

 

 7.应用面板

IndexedDB,Web SQL 数据库， 本地和会话存储，cookie，应用程序缓存，图像，字体和样式表

 

 

• 管理数据

8.安全面板

使用安全面板调试混合内容问题，证书问题等等。