chrome浏览器开发者工具介绍

怎么打开开发工具了？

按 F12 键

按 Ctrl + Shift + I 组合键

右击页面的任意位置，选择快捷菜单中的“检查”命令

单击 Chrome 浏览器右上角的自定义图标，展开菜单，选择“更多工具”→“开发者工具”命令

都有什么功能？

1、Elements：可以查看和编辑网页的 HTML 和 CSS 代码，以及检查网页元素的属性和样式。

2、Console：可以在控制台中运行 JavaScript 代码，以及查看网页的错误和警告信息。

3、Sources：可以查看和编辑网页的源代码，以及设置断点和单步调试。

4、Network：可以查看网页加载过程中的网络请求和响应，以及分析网页的性能和资源使用情况。

5、Performance：可以录制和分析网页的运行时性能，以及查看网页的帧率、内存占用和 CPU 使用情况。

6、Memory：可以查看和分析网页的内存使用情况，以及检测内存泄漏和垃圾回收问题。

7、Application：可以查看和管理网页使用的本地存储、缓存、Cookie、服务工作线程等应用数据。

8、Security：可以查看网页的安全状态，以及检查网页使用的证书、协议和加密算法等安全信息。

9、Lighthouse：可以运行 Lighthouse 工具对网页进行全面的质量评估，包括性能、可访问性、**实践等方面。