浏览器开发者工具的使用技巧

开发者工具的使用：

1、进入方式

1.1、F12快捷进入，部分笔记本需要Fn按键配合。

1.2、右键-》检查 进入。

2、面板介绍

2.1、元素面板

可以自由的操作DOM和CSS来迭代布局和设计页。检查和调整页面。编辑样式。编辑DOM。

2.2、控制台面板

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

2.3、Audits面板

对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

2.4、源代码面板

设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。断点调试。调试混淆的代码。 使用开发者工具的Workspaces（工作区）进行持久化保存。

2.5、网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能。网络面板基础。了解资源时间轴。网络带宽限制。

2.6、内存面板

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

2.7、性能面板

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。如何查看性能。分析运行时性能。诊断强制的同步布局。

2.8、应用面板

使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。 管理数据。

2.9、安全面板

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

3、具体应用：

开发者工具的应用范围很广泛，需要不断的挖掘，具体使用可以更具当前认知去网络获取使用技巧。

转载于:https://www.cnblogs.com/muzhang/articles/9233120.html