Chrome开发者工具界面功能介绍

浏览器F12是一个非常强大的开发者工具，它可以帮助我们查看和修改网页的元素、源代码、控制台、网络等信息，从而进行网页的测试、调试和分析。本文将详细介绍浏览器F12的功能和用法，希望对大家有所帮助。

打开浏览器F12后，我们可以看到一个弹出的窗口，这个窗口有多个功能模块，我们可以通过点击窗口顶部的图标或者使用快捷键来切换不同的模块。常用的功能模块有以下几个：

1. 元素（Elements）

查看和修改网页的元素，包括HTML代码、CSS样式、事件监听器等,仅限在当前页面查看效果，不能保存到服务器。刷新页面后，失去修改。

左键点击DOM元素，可以查看该元素的css样式，进行修改后页面会实时显示效果

DOM元素是文档对象模型（Document Object Model）的组成部分，它们代表了HTML或XML文档中的结构和内容。DOM元素可以通过JavaScript或其他编程语言进行操作，以实现动态的网页效果。

简而言之，“元素”选项卡下 左侧所见内容皆是DOM元素，div、a、body、ul、li…均是DOM元素

2. 控制台（Console）

查看和执行JavaScript代码，以及查看控制台日志和错误信息。

也可以将js代码放在这里执行

tips：不过需要注意的是，这里换行不能用回车键，回车键是执行功能，换行是用shift + enter组合键

3. 源代码（Sources）

查看和编辑网页的源文件，包括JavaScript、CSS、图片等，以及添加断点和进行调试。

断点是一种调试工具，可以让你在运行 JavaScript 代码时暂停执行，并检查变量和控制流。浏览器中的断点有多种类型，可以根据不同的条件和场景设置。例如，你可以在代码的特定行、特定函数、特定事件或特定异常上设置断点。你也可以使用 logpoints 来在控制台输出消息而不暂停代码。

在代码所在行左侧列（图中红点位置所在列）点上红点即打上断点

右侧“作用域”区域可以看到当前参数信息

• 恢复代码执行： 继续执行。如果没有其他的断点，那么程序就会继续执行，并且调试器不会再控制程序

• 单步跳过下个函数调用： 跟下一条命令“步骤”类似，但如果下一条语句是函数调用则表现不同。这里的函数指的是：不是内建的如 alert 函数等，而是我们自己写的函数。
  如果我们对比一下，“步骤”命令会进入嵌套函数调用并在其第一行暂停执行，而“单步跳过下个函数调用”对我们不可见地执行嵌套函数调用，跳过了函数内部。
  执行会在该函数调用后立即暂停。
  如果我们对该函数的内部执行不感兴趣，这命令会很有用。

• 步骤： 按代码执行的步骤，执行下行代码

• 单步执行下个函数调用：和“步骤”类似，但在异步函数调用情况下表现不同。如果你刚刚才开始学 JavaScript，那么你可以先忽略此差异，因为我们还没有用到异步调用。
  至于之后，只需要记住“步骤”命令会忽略异步行为，例如 setTimeout（计划的函数调用），它会过一段时间再执行。而“单步执行下个函数调用”会进入到代码中并等待（如果需要）。

• 跳出当前函数： 继续执行到当前函数的末尾，继续执行当前函数内的剩余代码，并暂停在调用当前函数的下一行代码处。当我们使用“步骤”操作偶然地进入到一个嵌套调用，但是我们又对这个函数不感兴趣时，我们想要尽可能的继续执行到最后的时候是非常方便的

• 停用断点： 这个按钮不会影响程序的执行。只是一个批量操作断点的开/关

4. 网络（Network）

查看和分析网页的网络请求，包括请求方法、状态码、响应时间、数据大小等，以及设置缓存和网络限速等。

以百度首页为例：

1、Controls

使用这些选项可以控制 Network(网络)面板的外观和功能。

• Preserve log：保留请求日志，跳转页面的时候勾选上，可以看到跳转前的请求，也可适用于chrome开发者工具抓包的问题

• Disable cache：禁用缓存。选中：强制浏览器每次请求都是从服务器请求；不选：浏览器会根据请求头中的Cache-Control来判断是否从缓存中取值

• No throttling：网络速度。可以对浏览器发起的请求进行限速，默认的有无限制、快3G、慢3G、脱机，还可以自定义网速

2、Filters

• Filter：对请求参数进行筛选，类似于文件管理器的搜索功能
• Invert：对Filter的筛选条件进行反选
• Hide data URLs：是否隐藏前缀为 data: 协议的URL
• All：展示全部的请求
• Fetch/XHR：只展示接口信息
• JS：只展示JS请求
• CSS：只展示CSS请求
• Img：只展示图片请求，包括gif、png、data:开头的请求、jpg等
• Media：媒体文件，流媒体文件：m3u8文件、mp4等视频文件
• Font：字体文件，如：woff2格式文件
• Doc：文档文件
• WS：webSocket连接情况
• Wasm：Wasm网络请求
• Manifest：清单
• Has blocked cookies：是否禁用cookie
• Blocked Requests：过滤被block 的请求
• 3rd-party requests：过滤第三方请求

3、OverViews

查看网络交互情况，可以选择时间段，可以拖动时间段

4、Summary

总览请求信息。包括请求数、请求文件大小、请求时间、DOM加载时间、等待时间

鼠标移入某个请求的waterfall可以查看请求的各阶段的具体时间

5. 应用程序（Application）

application可以分为四个部分，选中查看具体的信息项

1、Application

• Manifest：用于检查您的 Web 应用程序清单，预览清单配置，可以模拟 Add to Homescreen 事件（不符合安装条件才会显示）
• Service Workers：浏览器在后台运行的脚本，与网页分开。这些脚本使您能够访问不需要网页或用户交互的功能，例如推送通知、后台同步和离线体验等。
• Storage：查看当前源使用的缓存概述

2、Storage

• Local Storage：查看所有页面的本地存储
• Session Storage：查看所有页面的会话存储
• Cookies：查看所有页面的cookie存储

3、Background Services

• Frames：可以查看窗口对象的详细信息

---