浏览器开发者工具控制面板介绍

目录

一、打开方式

1. 按 F12 或者 Control + Shift + i  （PC）/  Command + Option + i  （Mac）。

2. 浏览器菜单选择“工具/开发者工具”。

3. 在一个页面元素上，打开右键菜单，选择其中的“Inspect Element”。

二、控制面板简单介绍

---

一、打开方式

以 Chrome 浏览器的“开发者工具”（Developer Tools）为例，可以使用下面三种方法的打开它。

1. 按 F12 或者 Control + Shift + i  （PC）/  Command + Option + i  （Mac）。

2. 浏览器菜单选择“工具/开发者工具”。

3. 在一个页面元素上，打开右键菜单，选择其中的“Inspect Element”。

二、控制面板简单介绍

打开开发者工具以后，顶端有多个面板。

• Elements：查看网页的 HTML 源码和 CSS 代码。
• Resources：查看网页加载的各种资源文件（比如代码文件、字体文件 CSS 文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。
• Network：查看网页的 HTTP 通信情况。
• Sources：查看网页加载的脚本源码。
• Timeline：查看各种网页行为随时间变化的情况。
• Performance：查看网页的性能情况，比如 CPU 和内存消耗。
• Console：用来运行 JavaScript 命令。