Chrome DevTools（Chrome 开发者工具）介绍

Chrome DevTools（Chrome 开发者工具）介绍

Chrome DevTools （Chrome 开发者工具）是一套内置于Google Chrome（Google开发的免费网页浏览器）中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

Chrome DevTools （Chrome 开发者工具）官方文档（左下角有语言选择）：

https://developers.google.com/web/tools/chrome-devtools/

 

上面网址一般打不开，若打不开，可用下列代替：

https://developers.google.cn/web/tools/chrome-devtools/

 

如何打开Chrome 开发者工具？

在Chrome菜单中选择 更多工具 > 开发者工具

在页面元素上右键点击，选择 “检查”

使用 快捷键 Ctrl+Shift+I (或用功能键F12，Windows) 或 Cmd+Opt+I (Mac)

【Ctrl + Shift + J （Windows) / Cmd + Opt + J（Mac），打开 DevTools，并且定位到控制台面板】

打开chrome浏览器，按F12，打开Chrome 开发者工具，参见下图

 

DevTools 是很多功能的集合，而在窗口顶部的工具栏是对这些功能的分组。目前最新的 Chrome 主要有 9 个功能组，分别对应了 9 个面板：

☆Elements：在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑

☆Console：一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互

☆Sources：Sources 面板主要用来调试页面中的 JavaScript

☆Network：在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时。

☆Performance：在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。这个跟上面的 Network 有什么区别呢？在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。

☆Memory：Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况。

☆Application：记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息。

☆Security：用于检测当面页面的安全性。

☆Lighthouse：谷歌网页性能分析工具。