F12开发者工具

__Black_Opium__

于 2024-09-16 09:00:33 发布

阅读量852

点赞数 25

文章标签：笔记

本文链接：https://blog.csdn.net/2404_87410060/article/details/142298499

版权

按下 F12 键可以打开浏览器的 开发者工具（Developer Tools），这是现代浏览器（如 Google Chrome、Firefox、Microsoft Edge 等）提供的一种功能，用于帮助开发者调试和检查 Web 页面。开发者工具包括多个面板，每个面板有不同的功能，能让开发者更深入地了解页面的结构、行为、网络请求、性能等。

开发者工具的几个主要功能和面板：

1. Elements 面板

作用：查看和修改 HTML 和 CSS 代码

这个面板展示了当前页面的 HTML 结构 和 CSS 样式。你可以直接查看页面的 DOM（Document Object Model，文档对象模型），也就是页面的 HTML 元素的层次结构，以及与每个元素关联的 CSS 样式。

实时查看页面结构：通过 Elements 面板，你可以看到浏览器是如何解析和展示 HTML 元素的。每个元素都可以展开以查看其子元素。
修改页面样式：你可以在这个面板中临时修改 HTML 或 CSS 来查看效果变化。比如，右键单击某个元素，选择 “检查”（Inspect），可以查看并实时编辑该元素的样式。这些修改只会在本地生效，不会影响服务器上的页面。
调试布局问题：如果页面布局有问题，比如元素显示错位，或是某个元素不可见，你可以使用 Elements 面板检查该元素的样式、布局盒模型（Box Model），看看是否有 CSS 样式问题。

使用示例：

按下 F12，打开 Elements 面板。
移动鼠标到页面上的元素，浏览器会高亮显示该元素的 HTML 代码和样式。
你可以临时修改 HTML 或 CSS，看看页面会如何变化。

2. Console 面板

作用：查看日志信息、调试 JavaScript

Console 面板是用于执行和调试 JavaScript 代码 的区域。它有两个主要功能：

输出日志：开发者可以通过 JavaScript 中的 console.log() 方法将调试信息输出到控制台。这对于查看程序运行过程中的变量状态、错误信息等非常有用。
执行 JavaScript 代码：你可以直接在控制台中输入和执行 JavaScript 代码。比如，输入 document.querySelector('h1')，可以获取页面上的第一个 <h1> 元素。

另外，当 JavaScript 代码抛出错误时，错误信息也会显示在 Console 面板中，帮助你定位问题。

使用示例：

按下 F12，打开 Console 面板。
输入 alert('Hello!') 并按下回车，浏览器会弹出一个提示框显示 “Hello!”。

3. Network 面板

作用：监控网络请求，分析页面加载性能

Network 面板显示了页面加载时发起的所有网络请求，包括：

HTML、CSS、JavaScript 文件的请求。
图片、视频、音频等媒体资源的加载。
AJAX 请求，即前端与服务器之间的动态数据交换。

你可以使用这个面板来分析页面加载的速度，查看哪些资源占用了较多时间，并可以检查每个请求的响应内容、状态码等。开发者通常用这个面板来调试 API 调用，确保请求的数据正确返回，以及分析页面性能瓶颈。

Network面板的概述：时间轴

当你打开 Network 面板时，你会看到一个时间轴，它显示了页面加载过程中发出的所有请求，按顺序排列，通常包括：

HTML 页面：页面的主 HTML 文件。
CSS 文件：用于页面样式的 CSS 文件。
JavaScript 文件：前端逻辑的 JavaScript 文件。
图片、字体、媒体资源：如图片、字体、视频等。
Ajax 请求或 Fetch 请求：与服务器进行的异步数据交换。
其他资源：如 WebSocket 连接、manifest 文件等。

1. 文件名称（Name）

Name 列显示了每个请求的文件名称或请求的 URL。你可以点击这些名称查看每个资源的详细信息。

2. 请求状态（Status）

Status 列显示了 HTTP 状态码，指示请求的成功或失败情况。常见的状态码有：
- 200 OK：请求成功，服务器返回了所请求的资源。
- 301/302 Redirect：请求被重定向到另一个 URL。
- 404 Not Found：请求的资源不存在。
- 500 Internal Server Error：服务器发生错误。

状态码可以帮助你快速发现问题，比如资源未找到（404 错误）或服务器内部错误（500 错误）。

3. 请求类型（Type）

Type 列显示了请求的资源类型，比如 document（HTML 文档）、script（JavaScript 文件）、stylesheet（CSS 文件）、image（图片）、xhr（XMLHttpRequest 请求，通常是 API 调用）。

4. 发起请求的时间（Initiator）

Initiator 列显示了谁发起了该请求。可能的值有：
- parser：由 HTML 解析器发起的请求，比如当解析 HTML 文档时，发现了 <script> 标签，浏览器就会发起对脚本的请求。
- script：JavaScript 脚本发起的请求，比如通过 fetch 或 XMLHttpRequest 发起的网络请求。
- other：其他类型的请求，比如用户直接访问某个 URL。

5. 传输大小（Size）

Size 列显示了每个请求传输的数据量。这个数据分为两个部分：
- 传输大小：即服务器实际传输的数据量，可能通过压缩等手段减少大小。
- 资源大小：资源解压后的真实大小。

传输大小可以帮助你评估资源的优化情况，是否需要进一步压缩图片、JS 文件等，以提高页面加载速度。

6. 耗时（Time）

Time 列显示了每个请求从发出到完成所消耗的时间。你可以根据这个时间来判断是否有某些请求需要过长时间，比如大型图片或外部 API 响应过慢。

7. 时间轴（Waterfall）

Waterfall 是每个请求的时间线图，展示了从页面加载开始到每个资源加载完成的时序图。你可以通过 Waterfall 可视化地查看资源加载的先后顺序、每个请求的延迟、网络阻塞等。

当你点击某个请求时，会弹出该请求的详细信息，通常包含以下几部分：

1. Headers（请求和响应头）

Headers 面板显示了请求和响应的详细信息，分为两部分：
- Request Headers（请求头）：显示浏览器发给服务器的请求信息，例如请求方法（GET、POST 等）、请求的 URL、用户代理（User-Agent）等。
- Response Headers（响应头）：显示服务器返回的响应头信息，比如 Content-Type（资源类型），Content-Length（资源大小）以及 Cache-Control（缓存策略）等。
你可以通过检查请求头和响应头来调试问题，比如确认是否有跨域问题，或者服务器返回了正确的内容类型。

2. Payload（请求负载）

Payload 面板显示请求时提交的数据，主要用于查看 POST 请求的请求体。比如，当你提交一个表单时，POST 请求的参数会显示在 Payload 中。

3. Preview（预览响应）

Preview 面板用于查看服务器返回的响应内容。浏览器会根据响应类型（HTML、JSON、图片等）自动生成预览，让你更方便地查看响应内容，尤其适用于 API 请求时查看返回的数据。

4. Response（响应）

Response 面板显示服务器返回的原始响应内容。对于 JSON 数据，Response 面板会直接显示其内容。对于 HTML 或其他文本文件，也会直接展示。

5. Timing（请求时间）

Timing 面板详细显示了请求的时间消耗，分为多个阶段：
- Queueing：请求在网络队列中等待的时间。
- Stalled：请求在排队时被阻塞的时间。
- DNS Lookup：域名解析的时间。
- Initial Connection：与服务器建立连接的时间，包括 TCP 连接和 TLS 握手。
- SSL：建立安全连接所消耗的时间。
- Time to First Byte (TTFB)：从发出请求到接收到第一个字节响应的时间。
- Content Download：下载响应内容的时间。

你可以通过分析 Timing 来找出页面加载的性能瓶颈，比如 DNS 解析时间过长，或者服务器响应速度慢。

6. Cookies

Cookies 面板显示该请求涉及的 Cookies。你可以查看、修改或删除请求中的 Cookie，了解 Cookie 的用途和属性（如 HttpOnly、Secure 等）。

4. Sources 面板

作用：调试 JavaScript 代码

Sources 面板允许开发者查看和调试 JavaScript 代码。你可以在这个面板中设置断点（breakpoints），当代码执行到某个断点时，浏览器会暂停运行，这样你可以逐步查看变量的值、调用的函数堆栈等。

常见功能：

断点调试：设置断点后，当浏览器执行到这一行代码时会暂停，你可以一步步调试代码。
监控变量：在调试时可以实时查看变量的值，帮助你分析 JavaScript 的执行过程。
查看本地和会话存储：可以通过 Application 面板查看本地存储（LocalStorage）或会话存储（SessionStorage）中的数据。