本章节主要介绍Chrome开发者工具

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

打开Chrome 开发者工具

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击，选择 “检查”
  • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

设备面板

使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站。了解如何使用 Device Mode 模拟多种设备及其功能。

警告：Device Mode 可以让您了解您的网站在移动设备上的大致显示效果，但要获得全面的了解，则应始终在真实设备上测试您的网站。DevTools 无法模拟移动设备的性能特性。

  • 在不同的屏幕尺寸和分辨率（包括 Retina 显示屏）下模拟您的网站。
  • 通过可视化和检查 CSS 媒体查询进行自适应设计。
  • 使用网络模拟器在不影响其他标签流量的情况下模拟您网站的性能。
  • 针对触摸事件、地理定位和设备方向准确模拟设备输入

切换 Device Mode

切换 Device Mode 按钮可以打开或关闭 Device Mode。

当 Device Mode 打开时，该图标呈蓝色

当 Device Mode 关闭时，该图标呈灰色

使用视口控件

利用视口控件，您可以针对各种设备测试网站，以及是否能够实现完全自适应。它包括以下两个模式：

自适应。使视口可以通过任意一侧的大手柄随意调整大小。
特定设备。将视口锁定为特定设备确切的视口大小，并模拟特定设备特性。

模拟网络连接

利用网络调节，您可以在不同的网络连接（包括 Edge、3G，甚至离线）下测试网站。这样可以限制出现最大的下载和上传吞吐量（数据传输速率）。延迟时间操控会强制连接往返时间 (RTT) 出现最小延迟。

可以通过 Network 面板开启网络调节。从下拉菜单中选择要应用网络节流和延迟时间操控的连接。

元素面板

使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.

检查和编辑页面与样式

使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS。

  • 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。
  • 在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则。
  • 在 Computed 窗格中查看和修改选定元素的框模型。
  • 在 Sources 面板中查看在本地对页面所做的更改。

实时编辑 DOM 节点

要实时编辑 DOM 节点，只需双击选定元素，然后进行更改：

实时编辑样式

在 Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与 User Agent 样式表一样）。
要编辑名称或值，请点击它，进行更改，然后按 Tab 或 Enter 保存更改。

默认情况下，您的 CSS 修改不是永久的，重新加载页面时更改会丢失。 如果您想要在页面加载时保留更改，请设置永久制作。

检查和编辑框模型参数

使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可。

同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。

对于位置为非静态的元素，还会显示 position 矩形，包含 top、right、bottom 和 left 属性的值。

对于 position: fixed和 position: absolute 元素，中心域包含选定元素实际的 offsetWidth × offsetHeight 像素尺寸。所有值都可以通过双击修改，就像 Styles 窗格中的属性值一样。 不过，无法保证这些更改能够生效，因为这要取决于具体的元素定位详情。

编辑样式

使用 Styles 窗格可以修改与元素关联的 CSS 样式

  • 利用 Styles 窗格，您可以在本地以尽可能多的方法更改 CSS，包括修改现有样式、添加新样式，以及为样式添加规则。
  • 如果您希望样式可以保持（不会在重新加载后消失），则需要将其保存到您的开发工作区中。

编辑dom

Chrome DevTools 的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构。通过 DOM 更新实时修改页面的内容和结构。

  • DOM 定义您的页面结构。每一个 DOM 节点都是一个页面元素，例如，标题节点或段落节点。
  • 通过渲染的 DOM 实时编辑页面的内容和结构。
  • 不过请记住，您无法在 Elements 面板中通过 DOM 更改修改源文件。重新加载页面会清空任何 DOM 树修改。
  • 使用 DOM 断点留意 DOM 更改。

检查元素

使用 Elements 面板可以在一个 DOM 树中检查页面中的所有元素。 选择任何元素并检查应用到该元素的样式。

可以通过多种方式检查元素：

  • 右键点击页面上的任何元素并选择 Inspect。

  • 按 Ctrl + Shift + C (Windows) 或 Cmd + Shift + C (Mac)，在 Inspect Element 模式下打开 DevTools，然后将鼠标悬停到某个元素上。 DevTools 会在 Elements 面板中自动突出显示您悬停的元素。点击元素可以退出检查模式，同时保持元素在 Elements 面板中处于突出显示状态。

  • 点击 Inspect Element 按钮转到 Inspect Element 模式，然后点击元素。

控制台面板

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。打开 DevTools 控制台；堆叠冗余消息或将其显示在各自的行上；清除或保留输出，或者将其保存到文件中；过滤输出，以及访问其他控制台设置。

  • 以专用面板或任何其他面板旁的抽屉式导航栏的形式打开控制台。
  • 堆叠冗余消息，或者将其显示在各自的行上。
  • 清除或保留页面之间的输出，或者将其保存到文件中。
  • 按严重性等级、通过隐藏网络消息或者按正则表达式模式对输出进行过滤。

打开控制台

以全屏模式的专用面板形式访问控制,要打开专用的 Console 面板，请执行以下操作之一：

  • 按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。
  • 如果 DevTools 已打开，则按 Console 按钮。
  • 打开 Console 面板时，Console 抽屉式导航栏将自动折叠。

或以任何其他面板旁的抽屉式导航栏的形式,要以任何其他面板旁的抽屉式导航栏的形式打开控制台，请执行以下操作之一：

  • 在 DevTools 处于聚焦状态时按 Esc。
  • 按 Customize and control DevTools 按钮，然后按 Show console。

消息堆叠

如果一条消息连续重复，而不是在新行上输出每一个消息实例，控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数。

清除历史记录

您可以通过以下方式清除控制台历史记录：

  • 在控制台中点击右键，然后按 Clear console。
  • 在控制台中键入 clear()。
  • 从您的 JavaScript 代码内调用 console.clear()。
  • 按 Ctrl+L （Mac、Windows、Linux）。

保存历史记录

在控制台中点击右键，然后选择 Save as，将控制台的输出保存到日志文件中。

选择执行环境

以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector。

通常，您会看到此环境设置为 top（页面的顶部框架）。

其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境，您需要从下拉菜单中选中它们。 例如，如果您要查看 <iframe> 元素的日志输出，并修改该环境中存在的某个变量，您需要从 Execution Context Selector 下拉菜单中选中该元素。

控制台默认设置为 top 环境，除非您通过检查其他环境中的某个元素来访问 DevTools。 例如，如果您检查<iframe>中的一个 <p>元素，那么，DevTools 将 Execution Context Selector 设置为该 <iframe> 的环境。

当您在 top 以外的环境中操作时，DevTools 将 Execution Context Selector 突出显示为红色，如下面的屏幕截图中所示。 这是因为开发者很少需要在 top 以外的任意环境中操作。 输入一个变量，期待返回一个值，只是为了查看该变量是否为 undefined（因为该变量是在不同环境中定义的），这会非常令人困惑。

过滤控制台输出

点击 Filter 按钮 (filter 按钮) 可以过滤控制台输出。您可以按严重性等级、按正则表达式模式或者通过隐藏网络消息的方式进行过滤。

按严重性等级进行过滤的说明如下所示：

选项 显示的内容
All 显示所有控制台输出
Errors 仅显示 console.error() 的输出。
Warnings 仅显示 console.warn() 的输出。
Info 仅显示 console.info() 的输出。
Logs 仅显示 console.log() 的输出。
Debug 仅显示 console.timeEnd() 和console.debug() 的输出。

源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

  • 设置断点的最基本方法是在特定代码行中手动添加一个断点。您可以将这些断点设置为仅在符合特定条件时才触发。
  • 您还可以设置在符合一般条件时触发的断点，如事件、DOM 更改、或未捕获的异常。

在特定行设置断点

当您在代码行中设置断点时，代码始终会在该代码行处暂停，直至您删除、停用此断点或将其设置为有条件的断点为止。

要在特定代码行中设置断点，首先请打开 Sources 面板，然后从左侧的 File Navigator 窗格中选择脚本。

提示：如果您在处理压缩过的代码，请按 pretty print 按钮({})使代码可读。

沿着源代码的左侧，您可以看到行号。此区域称为行号边线。 在行号边线中点击可在该行代码上添加一个断点。

如果一个表达式由多个行隔开，且您在此表达式的中间放置了一个行断点，则 DevTools 将在下一个表达式中设置此断点。例如，如果您尝试在以下屏幕截图中的第 4 行中设置断点，则 DevTools 会将此断点放置到第 6 行。

创建有条件的行号断点

右键单击一个还没有断点的行号，并按 Add conditional breakpoint 可创建一个有条件的断点。 如果您已在行代码中添加了一个断点，并想为该断点设置条件，则右键点击并按 Edit breakpoint。在文本字段中输入您的条件并按 Enter。

有条件的断点呈金色。

删除或停用行号断点

如果您要暂时忽略一个断点，则停用它。 在行号边线中右键点击并选择 Disable breakpoint。

如果您不再需要断点，则删除它。在行号边线中右键点击并选择 Remove breakpoint。

网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能。Network 面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie，等等。

  • 使用 Network 面板记录和分析网络活动。
  • 整体或单独查看资源的加载信息。
  • 过滤和排序资源的显示方式。
  • 保存、复制和清除网络记录。
  • 根据需求自定义 Network 面板。

network面板概览

Network 面板由五个窗格组成：

  • 1.Controls。使用这些选项可以控制 Network 面板的外观和功能。
  • 2.Filters。 使用这些选项可以控制在 Requests Table 中显示哪些资源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时选择多个过滤器。
  • 3.Overview。 此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起，则说明这些资源被同时检索。
  • 4.Requests Table。 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。
  • 5.Summary。 此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。

默认情况下，Requests Table 会显示以下列。您可以添加和移除列。

  • Name。资源的名称。
  • Status。HTTP 状态代码。
  • Type。已请求资源的 MIME 类型。
  • Initiator。发起请求的对象或进程。值为以下选项之一：
  • Parser。Chrome 的 HTML 解析器发起请求。
  • Redirect。HTTP 重定向发起请求。
  • Script。脚本发起请求。
  • Other。某些其他进程或操作发起请求，例如用户通过链接或者在地址栏中输入网址导航到页面。
  • Size。响应标头（通常为数百字节）加响应正文（由服务器提供）的组合大小。
  • Time。从请求开始至在响应中接收到最终字节的总持续时间。
  • Timeline。Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。

查看 DOMContentLoaded 和 load 事件信息

DOMContentLoaded：析页面的初始标记时会触发 DOMContentLoaded。 此事件将在 Network 面板上的两个地方显示：

  1. Overview 窗格中的蓝色竖线表示事件。
  2. 在 Summary 窗格中，您可以看到事件的确切时间。

Load:页面完全加载时将触发 load。此事件显示在三个地方：

  1. Overview 窗格中的红色竖线表示事件。
  2. Requests Table 中的红色竖线也表示事件。
  3. 在 Summary 窗格中，您可以看到事件的确切时间。

查看单个资源的详细信息

点击资源名称（位于 Requests Table 的 Name 列下）可以查看与该资源有关的更多信息。
可用标签会因您所选择资源类型的不同而不同，但下面四个标签最常见：

  • Headers。与资源关联的 HTTP 标头。
  • Preview。JSON、图像和文本资源的预览。
  • Response。HTTP 响应数据（如果存在）。
  • Timing。资源请求生命周期的精细分解。

查看 HTTP 标头

点击 Headers 可以显示该资源的标头。
Headers 标签可以显示资源的请求网址、HTTP 方法以及响应状态代码。 此外，该标签还会列出 HTTP 响应和请求标头、它们的值以及任何查询字符串参数。

预览资源

点击 Preview 标签可以查看该资源的预览。Preview 标签可能显示一些有用的信息，也可能不显示，具体取决于您所选择资源的类型。

查看 HTTP 响应内容

点击 Response 标签可以查看资源未格式化的 HTTP 响应内容。 Preview 标签可能包含一些有用的信息，也可能不包含，具体取决于您所选择资源的类型。

查看网络耗时

点击 Timing 标签可以查看单个资源请求生命周期的精细分解。

了解资源Timing

了解通过网络收集资源的阶段至关重要。这是解决加载问题的基础。

  • 了解 Resource Timing 的阶段。
  • 了解每个阶段向 Resource Timing API 提供的内容。
  • 了解时间线图表中不同的性能问题指示器，例如一系列透明栏或者大片的绿块。

要查看 Network 面板中给定条目完整的耗时信息，您有三种选择。

  • 将鼠标悬停到 Timeline 列下的耗时图表上。这将呈现一个显示完整耗时数据的弹出窗口。
  • 点击任何条目并打开该条目的 Timing 标签。
  • 使用 Resource Timing API 从 JavaScript 检索原始数据。


针对上图中的参数一一介绍

Queuing

如果某个请求正在排队，则指示：

  • 请求已被渲染引擎推迟，因为该请求的优先级被视为低于关键资源（例如脚本/样式）的优先级。 图像经常发生这种情况。
  • 请求已被暂停，以等待将要释放的不可用 TCP 套接字。
  • 请求已被暂停，因为在 HTTP 1 上，浏览器仅允许每个源拥有六个 TCP 连接。
  • 生成磁盘缓存条目所用的时间（通常非常迅速）

Stalled/Blocking

请求等待发送所用的时间。 可以是等待 Queueing 中介绍的任何一个原因。 此外，此时间包含代理协商所用的任何时间。

Proxy Negotiation

与代理服务器连接协商所用的时间。

DNS Lookup

执行 DNS 查询所用的时间。 页面上的每一个新域都需要完整的往返才能执行 DNS 查询。

Initial Connection / Connecting

建立连接所用的时间，包括 TCP 握手/重试和协商 SSL 的时间。

SSL

完成 SSL 握手所用的时间。

Request Sent / Sending

发出网络请求所用的时间。 通常不到一毫秒。

Waiting (TTFB)

等待初始响应所用的时间，也称为至第一字节的时间。 此时间将捕捉到服务器往返的延迟时间，以及等待服务器传送响应所用的时间。

Content Download / Downloading

接收响应数据所用的时间。

Timeline工具

使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。

  • 执行 Timeline 记录，分析页面加载或用户交互后发生的每个事件。
  • 在 Overview 窗格中查看 FPS、CPU 和网络请求。
  • 点击火焰图中的事件以查看与其相关的详细信息。
  • 放大显示一部分记录以简化分析。

Timeline 面板包含以下四个窗格：

  • Controls。开始记录，停止记录和配置记录期间捕获的信息。
  • Overview。 页面性能的高级汇总。更多内容请参见下文。
  • 火焰图。 CPU 堆叠追踪的可视化。

Overview 窗格

Overview 窗格包含以下三个图表：

  1. FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿。
  2. CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型。
    NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。
  3. 深色部分表示传输时间（下载第一个和最后一个字节之间的时间）。

横杠按照以下方式进行彩色编码：

  • HTML 文件为蓝色。
  • 脚本为黄色。
  • 样式表为紫色。
  • 媒体文件为绿色。
  • 其他资源为灰色。

检查和管理存储、数据库与缓存

  • 查看和修改本地存储与会话存储。
  • 检查和修改 IndexedDB 数据库。
  • 对 Web SQL 数据库执行语句。
  • 查看应用缓存和服务工作线程缓存。
  • 点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程

本地存储

如果您使用本地存储存储键值对 (KVP)，则可以从 Local Storage 窗格中检查、修改和删除这些 KVP。

  • 双击键或值可以修改相应的值。
  • 双击空白单元格可以添加新 KVP。

Session storage

Session Storage 窗格与 Local Storage 窗格的工作方式相同。 参阅上面的本地存储部分，了解如何查看和编辑会话存储。

应用缓存

使用 Application Cache 窗格可以检查通过 Application Cache API 创建的资源和规则。

清除服务工作线程、存储、数据库和缓存

有时，您只需要擦除给定源的所有数据。利用 Application 面板上的 Clear Storage 窗格，您可以选择性地注销服务工作线程、存储和缓存。要清除数据，只需启用您想要擦除的组件旁的复选框，然后点击 Clear site data。操作将擦除 Clear storage 标签下所列源的所有数据。

results matching ""

    No results matching ""