谷歌开发工具文档

内容简介：谷歌开发工具文档

让您的工作区包含适用于多设备网页的优秀编辑器、调试功能和构建工具。

时间是保持高效的重要因素。您在开发环境中花费的时间最多。通过包含强大、可扩展的编辑器以及强有力的调试与开发工具，让自己为成功做好准备。

• 设置您的编辑器
• 使用 DevTools 的工作区设置持久化
• 设置 CSS 与 JS 预处理器
• 设置命令行快捷键
• 设置浏览器扩展程序
• 设置构建工具

完成后，继续详细了解 Chrome 开发者工具 (DevTools) ，它是 Chrome 内置的工具，可以帮助您开发、测试和调试页面。

设置您的编辑器

代码编辑器是您的主要开发工具；可以使用代码编辑器编写和保存代码行。了解代码编辑器的快捷键并安装主要插件可以更快地编写出更好的代码。

TL;DR

• 选择一个能够让您自定义快捷键并拥有许多插件的编辑器，以便帮助您编写更好的代码。
• 使用软件包管理器，更轻松地发现、安装和更新插件。
• 安装可以让您在开发期间提高效率的插件；请从此指南中的推荐开始。

安装 Sublime 文本编辑器

Sublime 是一款非常优秀的编辑器，具有强大的功能，让编写代码充满乐趣。 您可以安装软件包管理器，轻松地安装插件和添加新功能。

Sublime Text 当前有两种下载选项， 版本 2 或 版本 3 。版本 3 非常稳定，让您可以访问 Sublime Text 2 不支持的软件包，不过您可能会发现版本 2 更加可靠。

注：Rob Dodson 有关如何了解和爱上 Sublime 的 博文 是充分利用编辑器一个非常好的参考。这些概念与所有文本编辑器相关，而不仅仅与 Sublime 相关。

为什么要使用软件包管理器？

使用软件包管理器，您可以轻松地查找、安装和更新软件包与插件。

您可以按照这些说明为 Sublime 安装 Package Manager https://packagecontrol.io/installation 。

您只需执行一次操作，之后请参见下方我们推荐的插件列表。

安装插件

插件可以帮助您提高效率。您必须退回去使用其他工具执行的任务是什么？

Linting（检查代码潜在问题）- 有一个插件可以执行这项任务。显示一些更改未被提交 - 有一些插件可以解决这个问题。与其他工具集成（如 GitHub），许多插件都可以实现这个目标。

利用软件包管理器，您可以轻松地查找、安装和更新插件：

1. 在 Sublime Text 编辑器中，打开您的软件包管理器 (ctrl+shift+p)。
2. 输入“Install Package”。
3. 输入您正在查找的插件名称（或者浏览所有插件）。

查看 Sublime Text 插件趋势列表 。 这里是一些我们喜爱并推荐您安装的一些插件，它们能够帮助您加快开发速度：

Autoprefixer

如果想要快速地将供应商前缀添加到 CSS，您可以使用这款方便的插件。

编写 CSS，忽略供应商前缀，当您想要添加它们时，按 ctrl+shift+p ，然后键入 Autoprefix CSS 。

我们会介绍如何在构建流程中实现这项操作的自动化 ，这样，您的 CSS 就会始终保持简洁，您无需记得要按 ctrl+shift+p 。

ColorPicker

从调色板中选取颜色，然后通过按 ctrl+shift+c 将其添加至您的 CSS。

Emmet

为您的文本编辑器添加一些有用的键盘快捷键和代码段。您可以在 Emmet.io 上观看视频，了解它的用途（个人比较喜欢的是“Toggle Comment”命令）。

HTML-CSS-JS 修饰

此扩展程序为您提供了可以设置 HTML、CSS 和 JS 格式的命令。无论何时保存文件，您都可以修饰文件。

Git Gutter

文件有更改时，可以在 gutter 中添加标记。

Gutter Color

注：仅适用于 Sublime Text 3

Gutter Color 可以在 CSS 旁为您显示小色样。

此插件需要 ImageMagick。如果使用 Mac OS X，我们建议您尝试 CactusLabs 的安装程序（您可能需要重启计算机才能使其工作）。

使用 DevTools 的工作区设置持久化

在 Chrome DevTools 中设置永久制作，以便立即查看更改和将这些更改保存到磁盘中。

利用 Chrome DevTools，您可以更改网页上的元素和样式并立即查看更改。默认情况下，刷新浏览器后更改消失，除非您将其手动复制并粘贴到外部编辑器中。

通过工作区，您可以将这些更改保存到磁盘中，而不用离开 Chrome DevTools。将本地网络服务器提供的资源映射到磁盘上的文件中，并实时查看对这些文件的更改。

TL;DR

• 请勿将这些更改手动复制到本地文件中。使用工作区将在 DevTools 中进行的更改保存到您的本地资源中。
• 将您的本地文件暂存到浏览器中。将文件映射到网址。
• 设置好永久工作区后，在 Elements 面板中进行的样式更改将自动保留；DOM 更改则不会。在 Sources 元素面板中保留元素更改。

将本地源文件添加到工作区

要将本地文件夹的源文件设置为可以在 Sources 面板中修改，请执行以下操作：

1. 右键点击左侧面板。
2. 选择 Add Folder to Workspace 。
3. 选择您想要映射的本地文件夹的位置。
4. 点击 Allow ，授予 Chrome 访问该文件夹的权限。

通常，本地文件夹包含网站的原始源文件，用于在服务器上填充网站。如果您不希望通过工作区更改这些原始文件，请复制文件夹并将其指定为工作区文件夹。

暂存保留的更改

您已将本地文件夹映射到工作区中，但浏览器仍在提供网络文件夹内容。要将永久更改自动暂存到浏览器中，请将文件夹中的本地文件映射到网址：

1. 右键点击或者在按住 Ctrl 的同时点击 Sources 左侧面板中的文件。
2. 选择 Map to File System Resource 。
3. 选择永久工作区中的本地文件。
4. 在 Chrome 中重新加载页面。

之后，Chrome 会加载映射的网址，同时显示工作区内容，而不是网络内容。这样，您可以直接在本地文件中操作，而不必在 Chrome 与外部编辑器之间重复切换。

限制

尽管工作区功能强大，您仍应当注意一些限制。

• 只有 Elements 面板中的样式更改会保留；对 DOM 的更改不会保留。
• 仅可以保存在外部 CSS 文件中定义的样式。对 element.style 或内嵌样式的更改不会保留。（如果您有内嵌样式，可以在 Sources 面板中对它们进行更改。）
• 如果您有映射到本地文件的 CSS 资源，在 Elements 面板中进行的样式更改无需显式保存即会立即保留 - Ctrl + S 或者 Cmd + S (Mac)。
• 如果您正在从远程服务器（而不是本地服务器）映射文件，Chrome 会从远程服务器重新加载页面。您的更改仍将保存到磁盘，并且如果您在工作区中继续编辑，这些更改将被重新应用。
• 您必须在浏览器中使用映射文件的完整路径。要查看暂存版本，您的索引文件在网址中必须包含 .html。

本地文件管理

除了修改现有文件外，您还可以在为工作区使用的本地映射目录中添加和删除文件。

添加文件

要添加文件，请执行以下操作：

1. 右键点击 Sources 左侧窗格中的文件夹。
2. 选择 New File 。
3. 为新文件键入一个包含扩展名的名称（例如 newscripts.js ）并按 Enter ；文件将添加到本地文件夹中。

删除文件

要删除文件，请执行以下操作：

1. 右键点击 Sources 左侧窗格中的文件。
2. 选择 Delete 并点击 Yes 确认。

备份文件

对文件进行重大更改前，复制原始文件进行备份非常有用。

要复制文件，请进行以下操作：

1. 右键点击 Sources 左侧窗格中的文件。
2. 选择 Make a Copy… 。
3. 为文件键入一个包含扩展名的名称（例如 mystyles-org.css ）并按 Enter 。

刷新

直接在工作区中创建或删除文件时，Sources 目录将自动刷新以显示文件更改。要随时强制刷新，请右键点击文件夹并选择 Refresh 。

如果您在外部编辑器中更改当前正在打开的文件，并且希望更改显示在 DevTools 中，刷新操作也非常有用。DevTools 通常可以自动捕捉此类更改，但是如果您希望确保万无一失，只需按上文所述刷新文件夹。

搜索文件或文本

要在 DevTools 中搜索已加载的文件，请按 Ctrl + O 或者 Cmd + O (Mac) 打开搜索对话框。您仍然可以在工作区中进行此操作，不过，搜索范围将扩展到 Workspace 文件夹中的远程已加载文件和本地文件。

要在多个文件中搜索某个字符串，请执行以下操作：

1. 打开搜索窗口：点击 Show Drawer 按钮 ，然后点击 Search ；或者按 Ctrl + Shift + F 或 Cmd + Opt + F (Mac)。
2. 将字符串键入搜索字段并按 Enter 。
3. 如果字符串是一个正则表达式或者需要不区分大小写，请点击相应的框。

搜索结果将显示在 Console 抽屉中并按文件名列示，同时指示匹配数量。使用 展开 和 折叠 箭头可以展开或折叠给定文件的结果。

设置 CSS 与 JS 预处理器

正确使用 CSS 预处理器（如 Sass、JS 预处理器和转译器）可以极大地提高您的开发速度。了解如何设置。

TL;DR

• 预处理器让您可以使用浏览器原生不支持的 CSS 和 JavaScript 中的功能，如 CSS 变量。
• 如果您使用预处理器，可以使用 Source Maps 将原始源文件映射到渲染的输出。
• 确保您的网络服务器能够提供 Source Maps。
• 使用支持的预处理器自动生成 Source Maps。

什么是预处理器？

预处理器可以获取任意的源文件，并将其转换成浏览器可以识别的内容。

输出为 CSS 时，可以使用预处理器添加以下功能（如果不使用预处理器，则不会存在这些功能）：CSS 变量、嵌套，等等。这个类别中显著的例子是 Sass 、 Less 和Stylus。

输出为 JavaScript 时，它们可以从完全不同的语言转换（编译），或者将超集或新语言标准转换（转译）为当前的标准。这个类别中显著的例子是 CoffeeScript 和 ES6（通过 Babel ）。

调试和修改预处理的内容

只要您在浏览器中且使用 DevTools 修改您的 CSS 或调试 JavaScript，就会出现一个非常明显的问题：您正在浏览的内容没有反映源，而且不会真的帮助您解决问题。

为了解决问题，最现代的预处理器支持一种名称为 Source Maps 的功能。

什么是 Source Maps？

源映射是一种基于 JSON 的映射格式，可以在缩小的文件与其源之间建立关系。如果您为生产而构建，缩小和合并 JavaScript 文件时，还会生成包含原始文件相关信息的源映射。

Source Maps 的工作方式

对于生成的每个 CSS 文件，除了编译的 CSS，CSS 预处理器还会生成源映射文件 (.map)。源映射文件是 JSON 文件，会在每个生成的 CSS 声明与源文件相应行之间定义映射。

每个 CSS 文件均包含指定源映射文件网址的注解，嵌入文件最后一行上的特殊注释中：

/*# sourceMappingURL=<url> */

例如，假设存在一个名为 styles.scss 的 Sass 源文件：

%$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass 会生成 CSS 文件 styles.css ，包含 sourceMappingURL 注解：

h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */

下方为一个源映射文件示例：

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

验证网络服务器可以提供 Source Maps

一些网络服务器（如 Google App 引擎）需要适用于提供的每个文件类型的显式配置。这种情况下，需要为您的 Source Maps 提供 MIME 类型的 application/json ，但实际上 Chrome 可以 接受任何内容类型 ，例如 application/octet-stream 。

奖励：通过自定义标题进行源映射

如果您不希望文件中存在其他注释，请使用缩小的 JavaScript 文件上的 HTTP 标题字段告知 DevTools 在哪里可以找到源映射。这需要配置或自定义您的网络服务器，不在本文档的介绍范围内。

X-SourceMap: /path/to/file.js.map

像注释一样，它也可以告知 DevTools 和其他工具在哪里可以查找与 JavaScript 文件关联的源映射。此标题也可以解决以不支持单行注释的语言引用 Source Maps 的问题。

支持的预处理器

几乎任何编译到 JavaScript 的语言都可以立即生成 Source Maps，包括 Coffeescript、TypeScript、JSX 等。您也可以在 Node 内的服务器侧、通过 Sass、Less 等的 CSS 中使用 Source Maps，使用可以为您提供节点式需求的 browserify 以及会提高整洁效果的缩小工具（如 uglify-js）生成多级别 Source Maps。

JavaScript

编译器	命令	说明
CoffeeScript	$ coffee -c square.coffee -m	编译器只需要 -m (–map) 标记即可输出源映射，也会为输出文件添加 sourceMapURL 注释指令。
TypeScript	$ tsc -sourcemap square.ts	-sourcemap 标记会生成映射并添加注释指令。
Traceur	`$ traceur –source-maps=[file	inline]`	对于 --source-maps=file ，每个以 .js 结尾的输出文件都会有一个以 .map 结尾的源映射文件；对于 source-maps='inline' ，每个以 .js 结尾的输出文件结尾的注释都会包含编码在 data: 网址中的源映射。
Babel	$ babel script.js --out-file script-compiled.js --source-maps	使用 –source-maps 或 -s 生成 Source Maps。使用 --source-maps inline 生成内嵌 Source Maps。
UglifyJS	$ uglifyjs file.js -o file.min.js --source-map file.min.js.map	这是生成“file.js”源映射所需的非常基本的命令。这也会为输出文件添加注释指令。

CSS

编译器	命令	说明
Sass	$ scss --sourcemap styles.scss styles.css	支持 Sass 3.3 及以上的 Sass 形式的 Source Maps。
Less	$ lessc styles.less > styles.css --source-map styles.css.map	在 1.5.0 中实现。请参阅 问题 #1050 了解详细信息和使用模式。
Stylus	$ stylus --sourcemaps styles.style styles.css	这会将源映射作为 base64 编码的字符串直接嵌入到输出文件中。
Compass	$ sass --compass --sourcemap --watch scss:css	或者，您也可以将 sourcemap: true 添加到 config.rb 文件中。
Autoprefixer	``	请点击链接查看如何使用此编译器以及兼用输入源映射。

Source Maps 与 DevTools

现在，您已经正确地设置了 Source Maps，DevTools 已内置对基于 CSS 和 JS 的 Source Maps 的支持，这一点可能会让您很高兴。

修改预处理的 CSS

请转至 修改 Sass、Less 或 Stylus ，详细了解如何在 DevTools 内直接修改和刷新链接至源映射的样式。

修改和调试预处理的 JavaScript

请在 将预处理代码映射到源代码 中详细了解如何在 Sources 面板中调试放大、编译或转译的 JavaScript。

设置命令行快捷方式

为您反复使用的命令行任务设置快捷方式。如果您发现自己在命令行中反复键入相同的内容，这将为您带来很大方便。

TL;DR

• 掌控命令行；创建易于记住和可快速键入的别名。
• 尝试保存、分享 Github 点文件，并同步您的命令行快捷方式。

如何设置

创建命令行快捷方式最简单的方法就是将常见命令的别名添加至 bashrc 文件。 在 Mac 或 Linux 上：

1. 从命令行任意位置，键入：

   open -a 'Sublime Text' ~/.bashrc
   

2. 添加新别名，例如：

   alias master='git checkout master'
   

3. 任何时候当您位于带 git repo 的目录时，都可以运行命令 master ，它将为您检查主分支。

注：请参阅 设置 Windows 别名 .aspx)的说明。

我们推荐的快捷方式

您可能会发现以下几个快捷方式比较有用。

命令和别名
打开您的编辑器	alias st='open -a "Sublime Text"'
启动服务器	alias server="python -m SimpleHTTPServer"
转到您通常在其中工作的目录	alias p="cd ~/projects"

保存、分享和同步您的快捷方式

在 Github 上保存您的快捷方式和点文件。主要好处是可以在各个设备之间分享快捷方式，而且始终可以备份快捷方式。

Github 还创建了一个点文件专用页面，Chrome 团队的许多人都复制了 Mathias Bynens 的点文件 。

设置浏览器扩展程序

每个桌面浏览器都自带一套开发者工具，能够直接使用，您可以将浏览器的扩展程序或插件扩展和添加至这些工具。

下面是两个 Chrome 扩展程序，它们具有一些有用的功能，可以帮助您调试设计。

Emmet Re:View

Emmet Re:View 可以让您轻松查看网站在您每次进行媒体查询时的外观，以及同步所有页面的滚动。 您可以 在它们的网站上 观看演示。

在 Chrome 网上应用店下载

What Font?

我们经常使用的最后一个扩展程序是 What Font? 。此 Chrome 扩展程序会向您说明页面当前使用的字体名称。 这真的会给调试任何网络字体问题带来极大的便利。

在 Chrome 网上应用店下载

设置构建工具

从头开始构建您的多设备网站。了解如何使用一套构建流程工具加快开发速度和创建快速加载的网站。每个网站均应有一个开发版本和一个生产版本。

开发版本具有构成网站的所有 HTML、CSS、JS 和图像文件，且格式清爽，便于您处理。

生产版本将提取并缩小这些文件，然后对这些文件（如图像）加以串连/合并和优化。

网络开发者必须同时考虑很多事情，构建步骤就是一开始要处理的最重要也是最棘手的事情之一。 您必须弄清楚所有需要自动化的任务，例如： 图像压缩、CSS 缩小、JavaScript 串连、响应测试、单元测试，不一而足。

按照本指南了解构建工作流的最佳方法，从而确保您创建的网站从开始构建之时即遵循了所有最佳做法。

TL;DR

• 您的构建流程工具必须针对性能进行优化；它们应能够自动缩小和串连 JavaScript、CSS、HTML 和图像。
• 使用 LiveReload 等工具，以使开发流程更顺畅。

开始编码之前，需要考虑如何优化和构建网站的生产版本。 从头开始设置此工作流可以避免项目结束时出现任何糟糕的意外，而且您可以将工具添加到工作流中为您执行单调枯燥的任务，从而加快开发速度。

什么是构建流程？

构建流程是一组针对项目文件运行的任务，主要是在开发期间编译和测试代码，以及用于创建网站开发版本。构建流程不应是一组在开发工作流结束时运行的任务。

实现构建流程最热门的工具是 Gulp 和 Grunt ，二者都是命令行工具。

如果您对这两款工具都没有使用经验，请使用 Gulp，我们在 Web Starter Kit 中就是使用它，因此建议您也使用它。

很多工具都具有 GUI，而且可能更容易掌握，但不是很灵活。

支持的平台和工具名称
OS X / Windows	Prepros
OS X	CodeKit
OS X	HammerForMac

构建流程中应执行哪些任务？

在下文中，我们将介绍在构建流程中应执行的最常见任务，以及在使用 Grunt 和 Gulp 时我们建议执行的任务。

这需要执行大量试错工作，以按照您希望的方式完成一切设置，如果您不熟悉构建流程，这可能会令您感到气馁。

要获取一个好的构建流程示例，请查阅 Web Starter Kit 入门指南 ，该指南详细介绍了如何使用 Web Starter Kit，并解释了 Gulp 文件中每个命令的作用。您可以将此示例作为快速设置方式，然后根据需要加以更改。

如果您想要创建自己的构建流程，但又不熟悉 Gulp 和 Grunt，此快速入门指南将是您了解如何安装和运行您的首个构建流程的最佳途径：

• Grunt 入门指南
• Gulp 入门指南

使用串连和缩小功能以构建更快速的网站

对于不熟悉串连和缩小这两个术语的开发者，串连就是指将多个文件合并在一起，例如将多个文件复制粘贴到一个文件中。我们这样做的原因是它更为有效，因为浏览器只需获取一个文件，而不是很多小文件。

缩小是指提取文件并减少总字符数、但不更改代码工作方式的过程。 删除注释或提取一个长变量名称并缩小该名称就是一个很好的例子。 这样可以减小文件大小，从而加快下载速度。

对于缩小，使用以下插件：

文件类型	Gulp	Grunt
CSS	gulp-csso	grunt-contrib-cssmin
JS	gulp-uglify	grunt-contrib-uglify
HTML	gulp-minify-html	grunt-contrib-htmlmin

对于串连，使用以下插件：

文件类型	Gulp	Grunt
CSS (Sass)	gulp-sass 或 gulp-useref	grunt-contrib-sass 或 grunt-usemin
JS	gulp-useref	grunt-usemin 或 grunt-codekit

注：您可以通过利用“导入”功能来使用 Sass（ 请参见 Web Starter Kit 中的示例 ）。

优化图像

图像优化是帮助加快网站速度的一个重要步骤；在不损害图像质量的情况下缩小图片的幅度会让您大吃一惊． 元数据会从图像中删除，因为浏览器不需要元数据即可显示图像，例如有关拍摄照片所用相机的信息。

对于图像优化，您可以使用以下模块。

Gulp 和 Grunt
gulp-imagemin	grunt-contrib-imagemin

别因供应商前缀而出纰漏

为您使用的 CSS 包含所有供应商前缀通常是有点单调的任务。 使用前缀自动补全工具自动添加需要包含的前缀：

Gulp 和 Grunt
gulp-autoprefixer	grunt-autoprefixer

注

如果您喜欢，您可以添加 Sublime 软件包来执行前缀自动补全工作 。

切勿使文本编辑器处于实时重新加载状态

实时重新加载会在您每次做出更改后在浏览器中更新您的网站。只要使用一次，就再也离不开它了。

Web Starter Kit 使用 browser-sync 提供实时重新加载支持。

Gulp 和 Grunt
browser-sync	grunt-contrib-connect 和 grunt-contrib-watch

注：如果您喜欢实时重新加载这一想法，但不想有构建流程，请参阅 Addy Osmani 撰写的有关 HTML5Rocks 的文章 ，其中介绍了各种替代方案（有些是免费的，有些是商业的）。

Chrome 开发者工具

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

Dogfood:寻找最新版本的Chrome 开发者工具, Chrome Canary 总是有最新的DevTools.

打开Chrome 开发者工具

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

了解面板

设备模式

使用设备模式构建完全响应式，移动优先的网络体验。

• Device Mode
• Test Responsive and Device-specific Viewports
• Emulate Sensors: Geolocation & Accelerometer

元素面板

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

• 检查和调整页面
• 编辑样式
• 编辑DOM

控制台面板

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与JavaScript交互。

• 使用控制台面板
• 命令行交互

源代码面板

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

• 断点调试
• 调试混淆的代码
• 使用开发者工具的Workspaces（工作区）进行持久化保存

网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能。

• 网络面板基础
• 了解资源时间轴
• 网络带宽限制

性能面板

注意: 在 Chrome 57 之后时间线面板更名为性能面板.

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

• 如何查看性能
• 分析运行时性能
• 诊断强制的同步布局

内存面板

注意: 在 Chrome 57 之后分析面板更名为内存面板.

如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。 Use the Profiles panel if you need more information than the Timeline provide, for instance to track down memory leaks.

• JavaScript CPU 分析器
• 内存堆区分析器

应用面板

注意: 在 Chrome 52 之后资源面板更名为应用面板.

使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

• 管理数据

安全面板

使用安全面板调试混合内容问题，证书问题等等。

• 安全

参与互动

TWITTER STACK OVERFLOW SLACK

调试 Progressive Web App

使用 Application 面板检查、修改和调试网络应用清单、服务工作线程和服务工作线程缓存。

相关指南：

• Progressive Web App

本指南仅讨论 Application 面板的 Progressive Web App 功能。 如果您希望获得其他窗格的帮助，请参阅本指南的最后一部分，即 其他 Application 面板指南 。

TL;DR

• 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件。
• 使用 Service Worker 窗格执行与服务工作线程相关的全部任务，例如注销或更新服务、模拟推送事件、切换为离线状态，或者停止服务工作线程。
• 从 Cache Storage 窗格查看您的服务工作线程缓存。
• 从 Clear Storage 窗格中点击一次按钮，注销服务工作线程并清除所有存储与缓存。

网络应用清单

如果您希望用户能够将您的应用添加到他们移动设备的主屏幕上，那么您需要一个网络应用清单。 清单定义应用在主屏幕上的外观、从主屏幕启动时将用户定向到何处，以及应用在启动时的外观。

相关指南：

• 通过网络应用清单改进用户体验
• 使用应用安装横幅

设置好清单后，您可以使用 Application 面板的 Manifest 窗格对其进行检查。

• 要查看清单来源，请点击 App Manifest 标签下方的链接（上方屏幕截图中的 https://airhorner.com/manifest.json ）。
• 按 Add to homescreen 按钮模拟 Add to Homescreen 事件。 如需了解详细信息，请参阅下一部分。
• Identity 和 Presentation 部分以一种对用户更加友好的方式显示了清单来源中的字段。
• Icons 部分显示了您已指定的每一个图标。

模拟 Add to Homescreen 事件

只有至少已经访问网站两次、访问至少间隔五分钟时才可以将网络应用添加到主屏幕上。 开发或调试您的 Add to Homescreen 工作流时，此条件非常不便。利用 App Manifest 窗格上的 Add to homescreen 按钮，您可以随时模拟 Add to Homescreen 事件。

您可以使用 Google I/O 2016 Progressive Web App 测试此功能，该应用可以为 Add to Homescreen 提供相应支持。在应用打开时点击 Add to Homescreen 会提示 Chrome 显示“add this site to your shelf”横幅（桌面设备），而在移动设备上则会显示“add to homescreen”横幅。

提示：在模拟 Add to Homescreen 事件时请保持 Console 抽屉式导航栏处于打开状态。 Console 会告诉您清单是否存在任何问题，并记录与 Add to Homescreen 生命周期有关的其他信息。

Add to Homescreen功能还不能模拟移动设备的工作流。 注意“add to shelf”提示在上方屏幕截图中的触发方式（即使 DevTools 处于 Device Mode）。 不过，如果您可以将应用成功添加到桌面设备文件架，那么在移动设备上也可以获得成功。

如果您希望测试真实的移动体验，则可以通过 远程调试 将一台真实的移动设备连接到 DevTools，然后点击 DevTools 上的 Add to Homescreen 按钮，在连接的移动设备上触发“add to homescreen”提示。

服务工作线程

服务工作线程是未来网络平台中的一种基础技术。它们是浏览器独立于网页在后台运行的脚本。这些脚本使您可以访问不需要网页或用户交互的功能，例如推送通知、后台同步和离线体验。

相关指南：

• 服务工作线程简介
• 推送通知：及时、相关且精确

Application面板中的 Service Workers 窗格是在 DevTools 中检查和调试服务工作线程的主要地方。

• 如果服务工作线程已安装到当前打开的页面上，您会看到它将列示在此窗格中。 例如，在上方的屏幕截图中， https://events.google.com/io2016/ 的作用域内安装了一个服务工作线程。
• Offline 复选框可以将 DevTools 切换至离线模式。它等同于 Network 窗格中的离线模式，或者 Command Menu 中的 Go offline 选项。
• Update on reload 复选框可以强制服务工作线程在每次页面加载时更新。
• Bypass for network 复选框可以绕过服务工作线程并强制浏览器转至网络寻找请求的资源。
• Update 按钮可以对指定的服务工作线程执行一次性更新。
• Push 按钮可以在没有负载的情况下模拟推送通知（也称为 操作消息 ）。
• Sync 按钮可以模拟后台同步事件。
• Unregister 按钮可以注销指定的服务工作线程。参阅 清除存储 ，了解点击一次按钮即可注销服务工作线程并擦除存储和缓存的方式。
• Source 行可以告诉您当前正在运行的服务工作线程的安装时间。 链接是服务工作线程源文件的名称。点击链接会将您定向至服务工作线程来源。
• Status 行可以告诉您服务工作线程的状态。此行上的数字（上方屏幕截图中的 #1 ）指示服务工作线程已被更新的次数。如果启用 update on reload 复选框，您会注意到每次页面加载时此数字都会增大。在状态旁边，您将看到 start 按钮（如果服务工作线程已停止）或 stop 按钮（如果服务工作线程正在运行）。服务工作线程设计为可由浏览器随时停止和启动。 使用 stop 按钮明确停止服务工作线程可以模拟这一点。停止服务工作线程是测试服务工作线程再次重新启动时的代码行为方式的绝佳方法。它通常可以揭示由于对持续全局状态的不完善假设而引发的错误。
• Clients 行可以告诉您服务工作线程作用域的原点。 如果您已启用 show all 复选框， focus 按钮将非常实用。 在此复选框启用时，系统会列出所有注册的服务工作线程。 如果您点击正在不同标签中运行的服务工作线程旁的 focus 按钮，Chrome 会聚焦到该标签。

如果服务工作线程导致任何错误，将显示一个名为 Errors 的新标签。

服务工作线程缓存

Cache Storage窗格提供了一个已使用（服务工作线程） Cache API 缓存的只读资源列表。

请注意，第一次打开缓存并向其添加资源时，DevTools 可能检测不到更改。 重新加载页面后，您应当可以看到缓存。

如果您打开了两个或多个缓存，您将看到它们列在 Cache Storage 下拉菜单下方。

清除存储

开发 Progressive Web App 时， Clear Storage 窗格是一个非常实用的功能。 利用此窗格，只需点击一次按钮即可注销服务工作线程并清除所有缓存与存储。 参阅下面的部分了解详情。

相关指南：

• 清除存储

其他 Application 面板指南

参阅下面的部分，获取有关 Application 面板其他窗格的更多帮助。

相关指南：

• 检查页面资源
• 检查和管理本地存储与缓存

了解安全问题

HTTPS 为您的网站和将个人信息委托给您的网站的人提供了 重要的安全性和数据完整性 。在 Chrome DevTools 中使用 Security 面板调试安全问题，确保您已在自己的网站上恰当地实现 HTTPS。

TL;DR

• 使用 Security Overview 可以立即查看当前页面是否安全。
• 检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。

Security Overview

要查看页面的整体安全性，请打开 DevTools，然后转至 Security 面板。

您首先会看到 Security Overview。Security Overview 会一目了然地告诉您页面是否安全。 安全页面会通过消息 This page is secure (valid HTTPS). 指示

点击 View certificate 查看 主源 的服务器证书。

非安全页面会通过消息 This page is not secure. 指示

Security 面板可以区分两种非安全页面。 如果请求的页面通过 HTTP 提供，则主源会被标记为不安全。

如果请求的页面通过 HTTPS 检索，但页面会继续使用 HTTP 检索其他源的内容，然后页面仍然会被标记为不安全。这称为 混合内容 页面。 混合内容页面仅受部分保护，因为 HTTP 内容可以被嗅探器获取到且易受到中间人攻击。

点击 View request in Network Panel 打开 Network 面板的过滤视图，然后查看具体是哪些请求通过 HTTP 提供。 这将显示来自所有源的所有未受保护的请求。

检查源

使用左侧面板可以检查各个安全或非安全源。

点击安全源查看该源的连接和证书详情。

如果您点击非安全源，Security 面板会提供 Network 面板过滤视图的链接。

点击链接可以查看具体是源的哪些请求通过 HTTP 提供。

从任何页面运行代码段

代码段是您可以在 Chrome DevTools 的 Sources 面板中制作和执行的小脚本。 您可以从任何页面访问和运行它们。 在您运行代码段时，它会从当前已打开页面的上下文执行。

如果您有将在多个页面上重复使用的实用程序或调试脚本，可以考虑将脚本保存为代码段。

您也可以使用代码段替代 小书签 。

TL;DR

• 代码段是您可以从任何页面运行的小脚本（类似于小书签）。
• 使用“Evaluate in Console”功能可以在控制台中运行部分代码段。
• 请注意，Sources 面板中的常用功能（如断点）也可与代码段结合使用。

创建代码段

要创建代码段，请打开 Sources 面板，点击 Snippets 标签，在导航器中点击右键，然后选择 New 。

在编辑器中输入您的代码。如果您未保存更改，您的脚本名称旁会有一个星号，如下面的屏幕截图所示。请按 Command+S(Mac) 或 Ctrl+S （Windows、Linux）以保存您的更改。

运行代码段

可以通过三种方式运行代码段：

• 右键点击代码段文件名（左侧窗格列出了所有代码段），然后选择 Run 。
• 点击 Run 按钮 ( )。
• 按 Command+Enter (Mac) 或 Ctrl+Enter（Windows、Linux）。

要在控制台中评估部分代码段，请突出显示这一部分，在编辑器中的任意位置右键点击，然后选择 Evaluate in Console ，或使用键盘快捷键 Command+Shift+E (Mac) 或 Ctrl+Shift+E（Windows、Linux）。

查看本地修改

要查看您对代码段所做修改的差异，请在编辑器中（显示代码段时）点击右键，然后选择 Local modifications 。

在控制台抽屉式导航栏中会弹出名称为 History 的新标签。

每个时间戳代表一次修改。展开时间戳旁的三角符号，查看那个时间点所做修改的差异。 revert 链接可以移除修订历史记录。从 2016 年 6 月 27 日开始， apply revision content 和 apply original content 链接似乎无法按预期工作。

设置断点

就像在其他脚本上一样，您也可以在代码段上设置断点。请参阅 添加断点 ，了解如何在 Sources 面板中添加断点。

键盘快捷键参考

本页介绍 Chrome DevTools 中所有键盘快捷键的参考信息。一些快捷键全局可用，而其他快捷键会特定于单一面板。

您也可以在提示中找到快捷键。将鼠标悬停在 DevTools 的 UI 元素上可以显示元素的提示。 如果元素有快捷键，提示将包含快捷键。

访问 DevTools

访问 DevTools	在 Windows 上	在 Mac 上
打开 Developer Tools	F12、Ctrl + Shift + I	Cmd + Opt + I
打开/切换检查元素模式和浏览器窗口	Ctrl + Shift + C	Cmd + Shift + C
打开 Developer Tools 并聚焦到控制台	Ctrl + Shift + J	Cmd + Opt + J
检查检查器（取消停靠第一个后按）	Ctrl + Shift + I	Cmd + Opt + I

全局键盘快捷键

下列键盘快捷键可以在所有 DevTools 面板中使用：

全局快捷键	Windows	Mac
显示一般设置对话框	?、F1	?
下一个面板	Ctrl + ]	Cmd + ]
上一个面板	Ctrl + [	Cmd + [
在面板历史记录中后退	Ctrl + Alt + [	Cmd + Opt + [
在面板历史记录中前进	Ctrl + Alt + ]	Cmd + Opt + ]
更改停靠位置	Ctrl + Shift + D	Cmd + Shift + D
打开 Device Mode	Ctrl + Shift + M	Cmd + Shift + M
切换控制台/在设置对话框打开时将其关闭	Esc	Esc
刷新页面	F5、Ctrl + R	Cmd + R
刷新忽略缓存内容的页面	Ctrl + F5、Ctrl + Shift + R	Cmd + Shift + R
在当前文件或面板中搜索文本	Ctrl + F	Cmd + F
在所有源中搜索文本	Ctrl + Shift + F	Cmd + Opt + F
按文件名搜索（除了在 Timeline 上）	Ctrl + O、Ctrl + P	Cmd + O、Cmd + P
放大（焦点在 DevTools 中时）	Ctrl + +	Cmd + Shift + +
缩小	Ctrl + -	Cmd + Shift + -
恢复默认文本大小	Ctrl + 0	Cmd + 0

按面板分类的键盘快捷键

Elements

Elements 面板	Windows	Mac
撤消更改	Ctrl + Z	Cmd + Z
重做更改	Ctrl + Y	Cmd + Y、Cmd + Shift + Z
导航	向上键、向下键	向上键、向下键
展开/折叠节点	向右键、向左键	向右键、向左键
展开节点	点击箭头	点击箭头
展开/折叠节点及其所有子节点	Ctrl + Alt + 点击箭头图标	Opt + 点击箭头图标
编辑属性	Enter、双击属性	Enter、双击属性
隐藏元素	H	H
切换为以 HTML 形式编辑	F2

Styles 边栏

Styles 边栏中可用的快捷键：

Styles 边栏	Windows	Mac
编辑规则	点击	点击
插入新属性	点击空格	点击空格
转到源中样式规则属性声明行	Ctrl + 点击属性	Cmd + 点击属性
转到源中属性值声明行	Ctrl + 点击属性值	Cmd + 点击属性值
在颜色定义值之间循环	Shift + 点击颜色选取器框	Shift + 点击颜色选取器框
编辑下一个/上一个属性	Tab、Shift + Tab	Tab、Shift + Tab
增大/减小值	向上键、向下键	向上键、向下键
以 10 为增量增大/减小值	Shift + Up、Shift + Down	Shift + Up、Shift + Down
以 10 为增量增大/减小值	PgUp、PgDown	PgUp、PgDown
以 100 为增量增大/减小值	Shift + PgUp、Shift + PgDown	Shift + PgUp、Shift + PgDown
以 0.1 为增量增大/减小值	Alt + 向上键、Alt + 向下键	Opt + 向上键、Opt + 向下键

Sources

Sources 面板	Windows	Mac
暂停/继续脚本执行	F8、Ctrl + \	F8、Cmd + \
越过下一个函数调用	F10、Ctrl + ‘	F10、Cmd + ‘
进入下一个函数调用	F11、Ctrl + ;	F11、Cmd + ;
跳出当前函数	Shift + F11、Ctrl + Shift + ;	Shift + F11、Cmd + Shift + ;
选择下一个调用框架	Ctrl + .	Opt + .
选择上一个调用框架	Ctrl + ,	Opt + ,
切换断点条件	点击行号、Ctrl + B	点击行号、Cmd + B
编辑断点条件	右键点击行号	右键点击行号
删除各个单词	Ctrl + Delete	Opt + Delete
为某一行或选定文本添加注释	Ctrl + /	Cmd + /
将更改保存到本地修改	Ctrl + S	Cmd + S
保存所有更改	Ctrl + Alt + S	Cmd + Opt + S
转到行	Ctrl + G	Ctrl + G
按文件名搜索	Ctrl + O	Cmd + O
跳转到行号	Ctrl + P + 数字	Cmd + P + 数字
跳转到列	Ctrl + O + 数字 + 数字	Cmd + O + 数字 + 数字
转到成员	Ctrl + Shift + O	Cmd + Shift + O
关闭活动标签	Alt + W	Opt + W
运行代码段	Ctrl + Enter	Cmd + Enter

在代码编辑器内

代码编辑器	Windows	Mac
转到匹配的括号	Ctrl + M
跳转到行号	Ctrl + P + 数字	Cmd + P + 数字
跳转到列	Ctrl + O + 数字 + 数字	Cmd + O + 数字 + 数字
切换注释	Ctrl + /	Cmd + /
选择下一个实例	Ctrl + D	Cmd + D
撤消上一个选择	Ctrl + U	Cmd + U

Timeline

Timeline 面板	Windows	Mac
开始/停止记录	Ctrl + E	Cmd + E
保存时间线数据	Ctrl + S	Cmd + S
加载时间线数据	Ctrl + O	Cmd + O

Profiles

Profiles 面板	Windows	Mac
开始/停止记录	Ctrl + E	Cmd + E

控制台

控制台快捷键	Windows	Mac
接受建议	向右键	向右键
上一个命令/行	向上键	向上键
下一个命令/行	向下键	向下键
聚焦到控制台	Ctrl + `	Ctrl + `
清除控制台	Ctrl + L	Cmd + K、Opt + L
多行输入	Shift + Enter	Ctrl + Return
执行	Enter	Return

Device Mode

Device Mode 快捷键	Windows	Mac
双指张合放大和缩小	Shift + 滚动	Shift + 滚动

抓屏时

抓屏快捷键	Windows	Mac
双指张合放大和缩小	Alt + 滚动、Ctrl + 点击并用两个手指拖动	Opt + 滚动、Cmd + 点击并用两个手指拖动
检查元素工具	Ctrl + Shift + C	Cmd + Shift + C

UI Reference

本参考文献显示如何：

• 访问和使用Chrome DevTools UI的常见部分，如主菜单。
• 更改Chrome DevTools UI。

主菜单

单击 更多 以打开主菜单。

图1 ：用于打开主菜单的按钮，以蓝色概述。

设置

要打开设置，请执行以下操作之一：

• 按F1DevTools处于关注状态。
• 打开 主菜单 ，然后选择 设置 。

图2 ：DevTools设置。

命令菜单

要打开DevTools命令菜单，请按 Cmd+ Shift+ P（Mac）或 Ctrl+ Shift+ P（Windows，Linux）。

命令菜单使用模糊搜索。例如，切换到黑色主题的确切命令是 Switch to dark theme ，但是也可以输入 theme 过滤出其他命令。

您在打开命令菜单时看到的命令列表表示所有可用的命令。

图3 ：命令菜单。

抽屉

按Escape打开或关闭抽屉。

图4 ：一个DevTools窗口，抽屉在底部打开。控制台选项卡在抽屉中打开。

单击 更多 以打开其他抽屉选项卡。

图5 ：用于打开“抽屉”选项卡的按钮，以蓝色概述。

更改DevTools UI

重新排列面板选项卡

单击并拖动面板选项卡以更改其排序。您的自定义标签订单在DevTools会话中仍然存在。

图6 ：具有自定义选项卡顺序的DevTools窗口。默认情况下，“网络”面板选项卡通常是左侧的第四个。在屏幕截图中，它是从左到左的第一个。

更改DevTools的位置

要更改DevTools窗口的位置：

1. 打开 主菜单 。
2. 选择 Undock到单独的窗口 ， 从左到右 ， Dock到底部 ，或者 Dock到右边 。

注意：**左侧的Dock 已在Chrome 58中引入。**

您还可以从 命令菜单 更改DevTools的位置。命令的名称与上述选项相同。

图7 ：DevTools窗口，停靠在左边。

使用黑色主题

将DevTools设置为黑色主题：

1. 打开 设置 。
2. 单击 首 选项选项卡。
3. 在“ 外观” 部分下，将“ 主题” 设置为“ 黑暗” 。

您还可以从 命令菜单 将DevTools设置为黑色主题。

图8 ：DevTools的黑暗主题。

实验

启用DevTools实验：

1. 转到 chrome：// flags /＃enable-devtools-experiments 。
2. 单击 启用 。
3. 点击页面底部的“ 立即重新启动 ”。

下次打开DevTools时，会有一个名为 Experiments in Settings 的新页面。

检查和编辑页面与样式

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

TL;DR

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

实时编辑 DOM 节点

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

DOM 树视图会显示树的当前状态；可能会与最初因其他原因加载的 HTML 不匹配。 例如，您可以使用 JavaScript 修改 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 窗格中的属性值一样。 不过，无法保证这些更改能够生效，因为这要取决于具体的元素定位详情。

查看本地更改

要查看对页面所做实时编辑的历史记录，请执行以下操作：

1. 在 Styles 窗格中，点击您修改的文件。DevTools 会将您带到 Sources 面板。
2. 右键点击文件。
3. 选择 Local modifications 。

要探索所做的更改，请执行以下操作：

• 展开顶级文件名查看做出修改的时间 。
• 展开第二级项目查看修改相应的 不同 （前和后）。

粉色背景的线表示移除，绿色背景的线表示添加。

撤消更改

如果您未 设置永久制作 ，每次您重新加载页面时，所有的实时编辑都会丢失。

假设您已设置了永久制作，要撤消更改，请执行以下操作：

• 使用 Ctrl+Z (Windows) 或 Cmd+Z (Mac) 通过 Elements 面板快速撤消对 DOM 或样式所做的细微更改。
• 要撤消对文件所做的所有本地修改，请打开 Sources 面板，然后选择文件名旁的 revert 。

开始查看和更改CSS

完成这些交互式教程，以了解使用Chrome DevTools查看和更改页面CSS的基础知识。

查看元素的CSS

1. 右键单击 Inspect Me! 下面的文本，然后选择 检查 。DevTools 的 Elements 面板打开。该 Inspect Me! 元件在突出 DOM树 。

   ​

2. 在 DOM树 ，找到价值 data-message 的属性 Inspect Me! 元素。

3. 在下面的文本框中输入值。

   ​

4. “ 元素” 面板上的“ 样式 ”选项卡列出了应用于当前在 DOM树 中选择的任何元素的CSS规则，这在这种情况下仍然是元素。查找 班级规则。事实上，你看到这个规则意味着它被应用到元素。 ** Inspect Me!``aloha``Inspect Me!

5. 在 aloha 类声明的价值 padding 。在下面的文本框中输入该值。

   ​

图1 。被检查的元素在 DOM树 中突出显示为蓝色 **

图2 。应用于所选元素的CSS类，例如 aloha ，将显示在“ 样式 ”选项卡中

向元素添加一个CSS声明

当您想要更改或添加CSS声明到元素时，请使用“ 样式 ”选项卡。

注意：在执行此操作之前，先完成“ 查看”一个元素的CSS 教程。

1. 右键单击 Add A Background Color To Me! 下面的文本，然后选择 检查 。

   ​

2. 点击 样式 选项卡 element.style 顶部附近。 **

3. 键入 background-color 并按Enter。

4. 键入 honeydew 并按Enter。在 DOM树中， 您可以看到内置样式声明已应用于元素。

图3 。的 background-color:honeydew 声明已经经由被施加到元件 element.style 的第 样式 选项卡

将CSS类添加到元素

使用“ 样式 ”选项卡查看当CSS类应用于元素或从元素中移除时元素的外观。

注意：在执行此操作之前，先完成“ 查看”一个元素的CSS 教程。

1. 右键单击 Add A Class To Me! 下面的元素，然后选择 Inspect 。

   ​

2. 点击 .cls 。DevTools显示一个文本框，您可以在其中添加所选元素的类。

3. 键入 color_me 在 添加新的类 文本框，然后按 Enter。 添加新类 文本框下方会出现一个复选框，您可以在其中打开和关闭该类。如果该 Add A Class To Me! 元素适用于其他任何类，您也可以从这里切换。

图4 。的 color_me 类已通过被施加到元件 .CLS 所述的部分 样式 选项卡

向类中添加一个伪节点

使用“ 样式 ”选项卡将CSS伪节点永久应用于元素。DevTools支持 :active ， :focus ， :hover ，和 :visited 。

注意：在执行此操作之前，先完成“ 查看”一个元素的CSS 教程。

1. 将鼠标悬停在 Hover Over Me! 下面的文本中。背景颜色变化。

   ​

2. 右键单击 Hover Over Me! 文本并选择 检查 。

3. 在“ 样式 ”选项卡中，单击 ：hov 。

4. 检查 ：悬停 复选框。背景颜色会像以前一样发生变化，即使您实际上并没有悬停在元素上。

图5 。 :hover 在一个元素上切换伪节点

更改元素的尺寸

在“ 样式 ”选项卡中使用“ 框模型” 交互图更改元素的宽度，高度，填充，边距或边框长度。 **

注意：在执行此操作之前，先完成“ 查看”一个元素的CSS 教程。

1. 右键单击 Change My Margin! 下面的元素，然后选择 Inspect 。

   ​

2. 在“ 样式 ”选项卡中的“ 框模型” 图中，将鼠标悬停在 填充上 。元素的边距在视口中突出显示。 **

   ​

   注意：根据您的DevTools窗口的大小，您可能需要滚动到“ 样式 ”选项卡的底部以查看“ 框模型” 。

   ​

3. 双击 Box Model 中的左边距，该 模型 当前具有一个值， - 即该元素没有左边距。

4. 键入 100 并按Enter。所述 盒模型 默认为像素，但它也接受其他值，例如 25% ，或 10vw 。

图6 。悬停在元素的填充上

图7 。更改元素的左边距

编辑样式

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

TL;DR

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

检查应用到元素的样式

选择一个元素 以检查其样式。 Styles 窗格可以显示应用到选定元素的 CSS 规则，优先级从高到低：

• 顶端为 element.style 。这些样式要么直接使用样式属性（例如 <p style="color:green"> ）直接应用到元素，要么在 DevTools 中应用。
• 下方是与元素匹配的任何 CSS 规则。例如，在下面的屏幕截图中，选定元素从 tools.css 中定义的规则接收 line-height:24px 。
• 再下方是继承的样式，其中包括与选定元素的祖先实体匹配的任何可继承样式规则。 例如，在下面的屏幕截图中，选定元素从 user agent stylesheet 继承 display:list-item 。

下图上的标签与其下方带编号的项目对应。

1. 与元素匹配的选择器的关联样式。
2. User Agent 样式表 清晰标记，并且在网页上经常被 CSS 替换。
3. 已被 级联规则 替换的规则将显示为带删除线的文本。
4. 继承的 样式将在“Inherited from <NODE> ”标头下显示为一组。点击标头中的 DOM 节点可以导航到其在 DOM 树视图中的位置。 （ CSS 2.1 属性表 显示了哪些属性是可以继承的。）
5. 灰色的条目不是已定义的规则，而是 在运行时计算的 规则。

了解级联和继承的原理对于调试样式至关重要。 级联与 CSS 声明被赋予的权重有关，权重用于确定规则在与其他规则重叠时哪些规则的优先级更高。 继承与 HTML 元素如何从其所属元素（祖先实体）继承 CSS 属性有关。 如需了解详情，请参阅 有关级联的 W3C 文档 。

检查受选择器影响的元素

在 Styles 窗格中将鼠标悬停在 CSS 选择器上可以查看受该选择器影响的所有元素。 例如，在下面的屏幕截图中，鼠标悬停在选择器 .wf-tools-guide__section-link a 上。在实时页面中，您可以看到受选择器影响的所有 <a> 元素。

注：此功能仅突出显示视口中的元素；视口以外的其他元素也可能受选择器影响。

添加、启用和停用 CSS 类

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。 从这里，您可以执行以下操作：

• 启用或停用当前与元素关联的类。
• 向元素添加新类。

编辑现有属性名称或值

点击 CSS 属性名称或值可以对其进行编辑。在名称或值突出显示时，按 Tab 可以向前移动到下一个属性、名称或选择器。

按 Shift+Tab 可以向后移动。

编辑数字式 CSS 属性值时，可以使用下面的键盘快捷键增大和减小值：

• 使用向上键和向下键能够以 1 为增量增大和减小值（如果当前值介于 -1 和 1 之间，则增量为 0.1）。
• 使用 Alt+向上键和 Alt+向下键能够以 0.1 为增量增大和减小值。
• 使用 Shift+向上键能够以 10 为增量增大值；使用 Shift+向下键能够以 10 为增量减小值。
• 使用 Shift+Page Up（Windows、Linux）或 Shift+Function+向上键 (Mac) 能够以 100 为增量增大值。使用 Shift+Page Down（Windows、Linux）或 Shift+Function+向下键 (Mac) 能够以 100 为增量减小值。

添加新属性声明

点击可编辑 CSS 规则中的空白处可以创建一个新声明。 键入，或者将 CSS 粘贴到 Styles 窗格中。属性及其值将解析并输入到正确的字段中。

注：要启用或停用样式声明，请选中或取消选中旁边的复选框。

添加样式规则

点击 New Style Rule ( ) 按钮可以添加一个新的 CSS 规则。

点击并按住按钮可以选择要向哪一个样式表添加规则。

添加或移除动态样式（伪类）

您可以在元素上手动设置动态伪类选择器（例如 :active 、 :focus 、 :hover 和 :visited ）。

可以通过两种方式在元素上设置动态状态：

• 在 Elements 面板内右键点击某个元素，然后从菜单中选择目标伪类，将其启用或停用。
• 在 Elements 面板中选择元素，然后在 Styles 窗格中点击 :hov 按钮，使用复选框启用或停用当前选定元素的选择器。

向样式规则添加背景色或颜色

Styles窗格提供了一个用于向样式规则添加 color 和 background-color 声明的快捷方式。

样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标。

将鼠标悬停到此图标上可以调出用于添加 color 声明 ( ) 或 background-color 声明 ( ) 的按钮。点击这些按钮之一可以将声明添加到样式规则中。

使用 Color Picker 修改颜色

要打开 Color Picker ，请在 Styles 窗格中查找一个定义颜色的 CSS 声明（例如 color: blue ）。 声明值的左侧有一个带颜色的小正方形。 正方形的颜色与声明值匹配。 点击小正方形可以打开 Color Picker 。

您可以通过多种方式与 Color Picker 交互：

1. 取色器 。请参阅 取色器 了解更多信息。
2. 当前颜色 。 当前值 的可视表示。
3. 当前值 。 当前颜色 的十六进制、RGBA 或 HSL 表示。
4. 调色板 。请参阅 调色板 了解更多信息。
5. 着色和阴影选择器 。
6. 色调选择器 。
7. 不透明度选择器 。
8. 颜色值选择器 。点击可以在 RGBA、HSL 和十六进制之间切换。
9. 调色板选择器 。点击可以选择不同的模板。

取色器

点击 取色器 按钮将其启用 ( )，在实时页面上将鼠标悬停到某种颜色上，然后点击，将当前选定的声明值设置为您悬停的颜色。

调色板

Color Picker提供了下列调色板：

• Page Colors 。一组从页面的 CSS 自动生成的颜色。
• Material Design 。一组符合 Material Design 规范 的颜色。
• Custom 。您选择的任意一组颜色。DevTools 可以保存您的自定义调色板（甚至在不同的页面间），直至您将其删除。

修改自定义调色板

按 加号 按钮可以将当前颜色添加到调色板中。 点击并按住颜色可以将其拖动到不同的位置，或者将其拖动到 垃圾桶 图标进行删除。 右键点击颜色并选择 Remove color 可以将其删除。 选择 Remove all to the right 可以删除当前选定颜色右侧的所有颜色。 右键点击调色板区域中的任何位置，然后选择 Clear template 可以删除模板的所有颜色。

查看和编辑 CSS 自定义属性（CSS 变量）

您可以查看和编辑定义或使用 CSS 自定义属性 （之前称为 CSS 变量）的声明，就像查看和编辑任何其他声明一样。

自定义属性通常在 :root 选择器中 定义 。 要查看在 :root 中定义的自定义属性，请检查 html 元素。

不过，并不一定要在 :root 选择器上定义自定义属性。如果您在其他地方定义，请在定义元素的地方检查元素以查看定义。

您可以查看和编辑使用自定义属性的声明值，就像查看和编辑任何其他声明值一样。

如果您看到一个像 var(--main-color) 一样的声明值（如下面的屏幕截图所示），则表示声明正在使用自定义属性。 可以像编辑任何其他声明值一样编辑这些值。 目前，没有办法跳转到自定义属性定义。

编辑 Sass、Less 或 Stylus

如果您在使用 Sass、Less、Stylus 或任何其他 CSS 预处理器，则在 Styles 编辑器中编辑生成的 CSS 输出文件不会有任何作用，因为它们不会映射到您的源代码。

借助 CSS 源映射，DevTools 可以将生成的文件自动映射到源代码文件，这样，您可以在 Sources 面板中实时编辑这些文件并查看结果，而不用离开 DevTools 或刷新页面。

预处理器工作流

在检查样式由生成的 CSS 文件提供的元素时，Elements 面板会显示原始的源文件而不是生成的 CSS 文件的链接。

要跳转到源文件，请执行以下操作：

1. 点击链接，在 Sources 面板中打开（可编辑）源文件。
2. Ctrl + 点击 （或 Cmd + 点击 ）任何 CSS 属性名称或值，打开源文件并跳转到相应行。

在 DevTools 中保存对 CSS 预处理器文件的更改时，CSS 预处理器应重新生成 CSS 文件。然后，DevTools 将重新加载新生成的 CSS 文件。

启用/停用 CSS 源映射和自动重新加载

默认情况下，CSS 源映射处于启用状态。您可以选择启用生成的 CSS 文件的自动重新加载。要启用 CSS 源映射和 CSS 重新重新加载，请执行以下操作：

1. 打开 DevTools 的 Settings 面板并点击 General 。
2. 开启 Enable CSS source maps 和 Auto-reload generated CSS 。

要求和问题

• DevTools 无法检测到 在外部编辑器中进行的更改 ，直至包含关联的源文件的 Sources 标签重新获得焦点。
• 手动修改 Sass/LESS/其他编译器生成的 CSS 文件 将中断源映射关联，直至页面重新加载。
• 使用工作区？ 确保生成的 CSS 文件同时映射到工作区中。为此，您可以查看 Sources 面板右侧树，确定 CSS 是从您的本地文件夹提供。
• 要使 DevTools 在您更改源文件时自动重新加载样式 ，必须将您的预处理器设置为在源文件每次发生更改时都重新生成 CSS 文件。否则，您必须手动重新生成 CSS 文件并重新加载页面才能看到更改。
• 您必须从网络服务器访问您的网站或应用 （不是从 file:// 网址），服务器必须提供 CSS 文件，以及源映射 (.css.map) 和源文件 (.scss, etc.)。
• 如果您 未 使用“工作区”功能，网络服务器还必须提供 Last-Modified 标头。

在 设置 CSS 与 JS 预处理器 中了解如何设置源映射。

检查动画

使用 Chrome DevTools 动画检查器检查和修改动画。

TL;DR

• 通过打开动画检查器捕捉动画。检查器会自动检测动画并将它们分类为多个组。
• 通过慢速播放、重播或查看动画源代码来检查动画。
• 通过更改动画时间、延迟、持续时间或关键帧偏移修改动画。

概览

Chrome DevTools 动画检查器有两个主要用途。

• 检查动画。您希望慢速播放、重播或检查动画组的源代码。
• 修改动画。您希望修改动画组的时间、延迟、持续时间或关键帧偏移。 当前不支持编辑贝塞尔曲线和关键帧。

动画检查器支持 CSS 动画、CSS 过渡和网络动画。当前不支持 requestAnimationFrame 动画。

什么是动画组？

动画组是一组 看上去 彼此相关的动画。 当前，网页没有真正概念的组动画，动画设计师和开发者必须编排和设置各个动画的时间，让它们看上去有一种连贯的视觉效果。动画检查器会根据开始时间（不包括延迟等等）预测哪些动画相关并将它们并排分组。也就是说，全部在同一脚本块中触发的一组动画被分为一组，但如果是异步的，它们将单独分组。

使用入门

可以通过两种方式打开动画检查器：

• 转到 Styles 窗格（位于 Elements 面板上），然后按 Animations 按钮（ ）。
• 打开 Command Menu，键入 Drawer: Show Animations 。

动画检查器将在 Console 抽屉旁作为标签打开。由于检查器是一个是抽屉式导航栏标签，您可以从任何 DevTools 面板打开它。

动画检查器分为四个主要部分（或窗格）。本指南使用以下名称指代各个窗格：

1. Controls 。从这里，您可以清除所有当前捕捉的动画组，或者更改当前选定动画组的速度。
2. Overview 。在这里选择动画组，然后在 Details 窗格中进行检查和修改。
3. Timeline 。 从这里暂停和开始动画，或者跳到动画中的特定点。
4. Details 。 检查和修改当前选定的动画组。

要捕捉动画，只需在动画检查器打开时执行可以触发动画的交互。 如果动画在页面加载时触发，您可以重新加载页面，帮助动画检查器检测动画。

检查动画

捕捉动画后，可以通过以下几种方式重播动画：

• 在 Overview 窗格中将鼠标悬停在动画的缩略图上方，查看它的预览。
• 从 Overview 窗格中选择动画组（这样，动画组就会显示在 Details 窗格中），然后按 replay 按钮（ ）。动画会在视口中重播。点击 animation speed 按钮（ ）更改当前选定动画组的预览速度。您可以使用红色的垂直条更改当前位置。
• 点击并拖动红色的垂直条以拖拽视口动画。

查看动画详细信息

捕捉动画组后，在 Overview 窗格点击动画组可以查看其详细信息。 在 Details 窗格中，每个动画会单独成行。

将鼠标悬停在动画上可以在视口中突出显示该动画。点击动画，在 Elements 面板中将其选中。

动画最左侧的深色部分是其定义。右侧的浅色部分表示重复。 例如，在下方的屏幕截图中，第二和第三部分表示第一部分的重复。

如果两个元素应用了同一个动画，动画检查器会给它们分配相同的颜色。 颜色本身是随机的且没有意义。例如，在下方的屏幕截图中，两个元素 div.eye.left::after 和 div.eye.right::after 已应用了同一个动画 ( eyes )， div.feet::before 和 div.feet::after 元素也同样如此。

修改动画

可以通过以下三种方式使用动画检查器修改动画：

• 动画持续时间。
• 关键帧时间。
• 开始时间延迟。

对于本部分，假设下面的屏幕截图代表原始动画：

要更改动画的持续时间，请点击并拖动第一个或最后一个圆圈。

如果动画定义了任何关键帧规则，那么这些将表示为白色内圈。 点击并拖动其中一个以更改关键帧的时间。

要为动画添加延迟，请点击并将其拖动至圆圈以外的任何位置。

编辑 DOM

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

TL;DR

• 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 模式，然后点击元素。

在控制台中使用 inspect 方法，例如 inspect(document.body) 。

DOM 导航

使用您的鼠标或键盘在 DOM 结构中导航。

折叠的节点的旁边会有一个向右箭头：

展开的节点的旁边会有一个向下箭头：

使用鼠标：

• 点击一次可以突出显示节点。
• 要展开节点，请双击节点上的任何地方，或者点击节点旁边的箭头。
• 要折叠节点，请点击节点旁边的箭头。

使用键盘：

• 按 向上箭头 键可以选择当前节点上方的节点。
• 按 向下箭头 可以选择当前节点下方的节点。
• 按 向右箭头 键可以展开折叠的节点。再按一次可以移动到（已展开）节点的第一个子级。 您可以使用此方法快速导航到深度嵌套的节点。

面包屑导航记录导航

Elements 面板的底部是面包屑导航记录。

当前选定的节点将以蓝色突出显示。左侧是当前节点的父级。 再左侧是父级的父级。以此类推，一直到 DOM 树。

在结构中向上导航会移动突出显示焦点：

DevTools 会在记录中显示尽可能多的项目。如果状态栏无法显示全部记录，将在记录截断的地方显示一个省略号 (…)。点击省略号可以显示隐藏的元素：

编辑 DOM 节点和属性

要编辑 DOM 节点名称或属性，请执行以下操作：

• 直接在节点名称或属性上双击。
• 突出显示节点，按 Enter，然后按 Tab， 直到选中名称或属性。
• 打开 more actions 菜单 并选择 Add Attribute 或 Edit Attribute 。 Edit Attribute 取决于上下文；您点击的部分决定要编辑的内容。

完成后，结束标记将自动更新。

以 HTML 形式编辑 DOM 节点及其子级

要以 HTML 形式编辑 DOM 节点及其子级，请执行以下操作：

• 打开 more actions 菜单 并选择 Edit as HTML 。
• 按 F2 (Windows / Linux) 或 Fn+F2 (Mac)。
• 按 Ctrl+Enter (Windows / Linux) 或 Cmd+Enter (Mac) 保存更改。
• 按 Esc 可以退出编辑器而不保存。

移动 DOM 节点

点击、按住并拖动节点可将其移动。

删除 DOM 节点

要删除 DOM 节点，请执行以下操作：

• 打开 more actions 菜单 并选择 Delete Node 。
• 选择节点并按 Delete 键。

注：如果您意外删除了节点，按 Ctrl + Z（Mac 上为 Cmd + Z）可以撤消您的上一步操作。

显示 more actions 菜单

利用 more actions 菜单，您可以通过多种方式与 DOM 节点交互。 要查看该菜单，请右键点击节点，或者选择节点，然后按 more actions 按钮 ( ))。按钮仅在当前选定的元素上显示。

滚动到视图

悬停或选择 DOM 节点时，渲染的节点将在视口中突出显示。 如果节点滚动到屏幕以外，在节点位于当前视口上方时您将在视口顶部看到提示，而在节点位于当前视口下方时，您将在底部看到提示。例如，在下方的屏幕截图中，DevTools 指出 Elements 面板中当前选定的节点位于视口以下。

要滚动页面使节点在视口中显示，请 右键点击 节点并选择 Scroll into View 。

设置 DOM 断点

设置 DOM 断点以调试复杂的 JavaScript 应用。例如，如果您的 JavaScript 正在更改 DOM 元素的样式，请将 DOM 断点设置为在元素属性修改时触发。在发生以下一种 DOM 更改时触发断点：子树更改、属性更改、节点移除。

子树修改

添加、移除或移动子元素时将触发子树修改断点。例如，如果您在 main-content 元素上设置子树修改，以下代码将触发断点：

var element = document.getElementById('main-content');
//modify the element's subtree.
var mySpan = document.createElement('span');
element.appendChild( mySpan );

属性修改

动态更改元素的属性 ( class, id, name ) 时将发生属性修改：

var element = document.getElementById('main-content');
// class attribute of element has been modified.
element.className = 'active';

节点移除

从 DOM 中移除有问题的节点时将触发节点移除修改：

document.getElementById('main-content').remove();

与 DOM 断点交互

Elements 和 Sources 面板均包含一个用于管理 DOM 断点的窗格。

每个断点都会列出元素标识符和断点类型。

可通过以下方式之一与列出的每一个断点交互：

• 悬停 在元素标识符上可以显示元素在页面上的相应位置（类似于在 Elements 面板中悬停在节点上）。
• 点击 元素可以将其在 Elements 面板中选中。
• 切换 复选框可以启用或停用断点。

触发 DOM 断点时，断点将在 DOM Breakpoints 窗格中突出显示。 Call Stack 窗格将显示调试程序暂停的 原因 ：

查看元素事件侦听器

在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器。

Event Listeners 窗格中的顶级项目将显示具有已注册侦听器的事件类型。

点击事件类型（例如 click ）旁的箭头可以查看已注册事件处理程序的列表。 每个处理程序都由一个类似于 CSS 选择器的元素标识符标识，例如 document 或 button#call-to-action 。如果已为相同元素注册多个处理程序，将重复列示元素。

点击元素标识符旁的展开箭头可以查看事件处理程序的属性。Event Listeners 窗格将列出每个侦听器的以下属性：

事件侦听器属性和说明
handler	包含一个回调函数。右键点击函数并选择 Show Function Definition 可以查看函数的定义位置（如果源代码可用）。
useCapture	指示 addEventListener 上的 useCapture 标志是否设置的布尔值。

注：许多 Chrome 扩展程序都会将其自己的事件侦听器添加到 DOM 上。如果您看到一些不是由您的代码设置的事件侦听器，您可能希望在 隐身窗口 中重新打开页面。默认情况下，隐身窗口会阻止扩展程序运行。

查看祖先实体事件侦听器

如果启用 Ancestors 复选框，除了当前选定节点的事件侦听器外，还会显示其祖先实体的事件侦听器。

如果停用复选框，将仅显示当前选定节点的事件侦听器。

查看框架侦听器

某些 JavaScript 框架和库会将原生 DOM 事件封装到它们的自定义事件 API 中。 过去，这会让使用 DevTools 检查事件侦听器非常困难，因为函数定义仅会引用框架或内容库代码。 框架侦听器 功能让这一问题迎刃而解。

启用 Framework listeners 复选框时，DevTools 会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置。

如果停用 Framework listeners 复选框，事件侦听器代码很可能会在框架或内容库代码的其他地方解析。

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

从

Application

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

TL;DR

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

本地存储

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

• 双击键或值可以修改相应的值。
• 双击空白单元格可以添加新 KVP。
• 点击 KVP ，然后按 Delete 按钮 ( ) 可以删除该 KVP。 只需点击一次按钮，即可从 Clear storage 窗格 擦除所有本地存储数据。
• 如果您使用一种可以创建、删除或修改 KVP 的方式与页面交互，则不会看到这些更改实时更新。 点击 refresh 按钮 ( ) 可以查看您的更改。

Session storage

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

IndexedDB

使用 IndexedDB 窗格可以检查、修改和删除 IndexedDB 数据。

展开 IndexedDB 窗格时，IndexedDB 下的第一个级别是数据库。 如果存在多个活动的数据库，您会看到多个条目。 在下面的屏幕截图中，页面只有一个活动的数据库。

点击数据库的名称可以查看该数据库的安全源、名称和版本。

展开数据库可以查看其键值对 (KVP)。

使用 Start from key 文本字段旁的箭头按钮可以在 KVP 的页面之间移动。

展开值并双击可以编辑该值。在您添加、修改或删除值时，这些更改不会实时更新。

点击 refresh 按钮可以更新数据库。

在 Start from key 文本字段中输入键可以过滤出值小于该值的所有键。

在您添加、修改或删除值时，这些更改不会实时更新。 点击 refresh 按钮 ( ) 可以更新数据库。

点击 Clear Object Store 按钮 ( ) 可以删除数据库中的所有数据。 从 Clear storage 窗格 中，点击一次按钮注销服务工作线程并移除其他存储与缓存也可以实现此目标。

Web SQL

使用 Web SQL 窗格可以查询和修改 Web SQL 数据库。

点击数据库名称可以打开该数据库的控制台。从这里，您可以对数据库执行语句。

点击数据库表可以查看该表的数据。

• 您无法从这里更新值，但是可以通过数据库控制台（参见上文）更新。
• 点击列标题可以按该列 排序 表格。
• 您对表格的更改不会实时更新。点击 refresh 按钮 ( ) 可以查看更新。
• 在 Visibile columns 文本字段中输入一个由空格分隔或逗号分隔的列名称列表可以仅显示列表中包含的列。

应用缓存

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

每一行表示一个资源。

Type列的值为以下值之一：

• Master 。资源上指示此缓存为其主文件的 manifest 属性。
• Explicit 。此资源在清单中明确列出。
• Network 。指定此资源的清单必须来自网络。
• Fallback 。 Resource 列中的网址作为另一个网址（未在 DevTools 中显示）的回退网址形式列出。

表格底部拥有指示网络连接和应用缓存状态的状态图标。 应用缓存可能拥有以下状态：

• IDLE 。缓存没有新更改。
• CHECKING 。正在提取清单并检查有无更新。
• DOWNLOADING 。正在将资源添加到缓存中。
• UPDATEREADY 。存在新版本的缓存。
• OBSOLETE 。正在删除缓存。

服务工作线程缓存

利用 Application 面板上的 Cache Storage 窗格，您可以检查、修改和调试使用（服务工作线程）Cache API 创建的缓存。 参阅下面的指南获取更多帮助。

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

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

检查和删除 Cookie

从 Application 面板检查和删除 Cookie。

TL;DR

• 查看与 Cookie 有关的详细信息，例如名称、值、网域和大小，等等。
• 删除单个 Cookie、选定网域的 Cookie 或所有网域的全部 Cookie。

概览

使用 Cookies 窗格可以查看和删除 Cookie。您无法修改 Cookie 值。

Cookie 按网域列示。其中包括主文档和所有嵌套的框架。 选择一个“框架组”将显示该组中所有资源、所有框架的所有 Cookie。 请注意，这种分组方式有两个结果：

• 来自不同网域的 Cookie 可能显示在相同的框架组中。
• 相同 Cookie 可能出现在多个框架组中。

字段

为每个 Cookie 提供了以下字段：

Cookie 字段和说明
Name	Cookie 的名称。
Value	Cookie 的值。
Domain	Cookie 的网域。
Path	Cookie 的路径。
Expires / Maximum Age	Cookie 的过期时间或最长寿命。对于会话 Cookie，此字段始终为“Session”。
Size	Cookie 的大小（以字节为单位）。
HTTP	如果存在，指示应仅在 HTTP 上使用 Cookie，并且不允许 JavaScript 修改。
Secure	如果存在，指示此 Cookie 的通信必须通过加密传输进行。

删除 Cookie

可以通过多种方式删除 Cookie：

• 选择 Cookie 并按 Delete 按钮 ( ) 可以删除相应 Cookie。
• 按 Clear 按钮 ( ) 可以删除指定框架组的所有 Cookie。
• 右键点击 Cookie 的 Domain 值，然后选择 Clear all from “…” （其中 “…” 是网域的名称）可以删除来自该网域的所有 Cookie。

检查资源

按框架、网域、类型或其他条件组织资源。

TL;DR

• 使用 Application 面板的 Frames 窗格可以按框架组织资源。
• 您也可以在 Sources 面板中停用 Group by folder 选项，按框架查看资源。
• 要按网域和文件夹查看资源，请使用 Sources 面板。
• 在 Network 面板中按名称或其他条件过滤资源。

按框架组织资源

使用 Application 面板的 Frames 窗格可以按框架组织页面的资源。

• 顶层（上面屏幕截图中的 top ）是主文档。
• 在这下方（例如上面屏幕截图中的 widget2 ）是主文档的子框架。 展开一个子框架可以查看源自该框架的资源。
• 子框架下方是图像、脚本，以及主文档的其他资源。
• 最后是主文档本身。

点击资源可以查看其预览。

右键点击资源可以在 Network 面板中查看、将其在新标签中打开、复制其网址或将其保存。

通过在 Sources 面板中点击导航器中的溢出菜单并停用 Group by folder 选项以停止按文件夹分组资源，您也可以按框架查看资源。

资源将仅按框架列示。

按网域和文件夹组织资源

要查看按网域和目录组织的资源，请使用 Sources 面板。

按名称、类型或其他条件过滤资源

使用 Network 面板可以按名称、类型和一系列其他条件过滤资源。 参阅下面的指南了解详情。

使用 Device Mode 模拟移动设备

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

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

简述

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

切换 Device Mode

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

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

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

Device Mode 默认处于启用状态。

您还可以通过按 Command+Shift+M (Mac) 或 Ctrl+Shift+M（Windows、Linux）来切换 Device Mode。要使用此快捷键，鼠标焦点需要位于 DevTools 窗口中。如果焦点位于视口中，您将触发 Chrome 的切换用户快捷键 。

测试自适应和设备特定的视口

更新后的 Device Mode（自 Chrome 49 起）是当前移动设备优先的 DevTools 的主要部分，并且扩展了主 DevTools 栏。了解如何使用其控件模拟各种设备或切换为完全自适应。

TL;DR

• 使用 Device Mode 的屏幕模拟器测试网站的响应能力。
• 保存自定义预设，便于日后访问。
• Device Mode 不能替代真实设备测试。请注意它的限制。

使用视口控件

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

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

自适应模式

我们建议将 自适应模式 用作您的默认工作模式。在您的网站和应用的活动开发期间使用这一模式，并经常调整视口大小以创建完全自适应设计，这种设计可以适应未知和未来的设备类型。

要充分利用自适应模式，请启用 媒体查询栏 。

自定义视口大小

在视口上拖动调整大小的大手柄，或者点击菜单栏中的值进行精确调整。

特定设备模式

在接近活动开发末期以及想要了解网站在特定移动设备（例如，特定 iPhone 或 Nexus）上的外观时，可以使用 特定设备模式 。

内置设备预设

我们已在设备下拉菜单中包含了当前最热门的设备。选择设备后，每个预设都会自动配置特定设备特性的模拟：

• 设置正确的“User Agent”(UA) 字符串。
• 设置设备分辨率和 DPI（设备像素比）。
• 模拟触摸事件（如果适用）。
• 模拟移动设备滚动条叠加和 meta viewport。
• 自动调整不带已定义视口的页面文本的大小（效果增强）。

添加自定义设备预设

Device Mode 提供了多种用于模拟的设备。如果您发现某款边缘或冷门设备未涵盖在内，可以添加自定义设备。

要添加自定义设备，请执行以下操作：

1. 转至 DevTools 的 Settings 面板。
2. 点击 Devices 标签。
3. 点击 Add custom device 。
4. 输入设备名称、宽度、高度、设备像素比和 User Agent 字符串。
5. 点击 Add 。

现在，您的自定义设备将显示在 Device 下拉菜单中。

设备状态和方向

模拟特定设备时，Device Mode 工具栏会显示另一个控件，主要用于在横向和纵向屏幕方向之间切换。

在选定的设备上，控件不只是可以切换方向。对于支持的设备（如 Nexus 5X），您会获得一个下拉菜单，可以模拟特定设备状态，如：

• 默认浏览器 UI
• 显示 Chrome 导航栏
• 显示打开的键盘

缩放到合适大小

有时，您可能想要测试分辨率大于浏览器窗口实际可用空间的设备。这种情况下， Zoom to Fit 选项会很方便：

1. Fit to Window 会自动将缩放级别设置为最大的可用空间。
2. 例如，如果您想要测试图像的 DPI， Explicit percentages 会非常有用。

可选控件（例如，触摸、媒体查询、DPR）

点击设备工具栏右侧上的三个小圆点，可以更改或启用可选控件。当前选项包括：

• User Agent 类型（模拟 UA 和触摸事件）
• 设备像素比
• 媒体查询
• 标尺
• 配置网络（UA、网络节流）

继续阅读，详细了解特定选项。

User Agent 类型

User Agent Type或 Device Type 设置让您可以更改设备的类型。 可能的值为：

1. Mobile
2. Desktop
3. Desktop with touch

更改此设置会影响移动设备视口和触摸事件模拟并更改 UA 字符串。 因此，如果您想要为桌面设备创建自适应网站，且想要测试悬停效果，请在 Responsive 模式下切换到“Desktop”。 ：

提示：您也可以在 Network conditions 抽屉式导航栏中设置 User Agent。

设备像素比 (DPR)

如果您想要从非 Retina 机器上模拟 Retina 设备或者从 Retina 机器上模拟非 Retina 设备，请调整 设备像素比 。 设备像素比 (DPR) 是逻辑像素与物理像素之间的比率。与普通设备相比，带有 Retina 显示屏的设备（如 Nexus 6P）的像素密度更高，像素密度会影响可视内容的清晰度和大小。

网页上“设备像素比”(DPR) 灵敏度的部分示例如下：

• CSS 媒体查询，例如：

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { … }

• CSS image-set 规则。

• 图像上的 srcset 属性。

• window.devicePixelRatio 属性。

如果拥有原生 Retina 显示屏，您会注意到较低“每英寸点数”(DPI) 的资源看上去比较模糊，而较高 DPI 的资源比较清晰。 要在标准显示屏上模拟这种效果，请将 DPR 设置为 2 并通过缩放调整视口的大小。2 倍资源看上去还是比较清晰，1 倍资源看上去则比较模糊。

媒体查询

媒体查询 是自适应网页设计的基本部分。要查看媒体查询检查器，请在三圆点菜单中点击 Show Media queries 。DevTools 会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形。

用彩色标记的媒体查询示例如下：

	针对最大宽度的查询。
	针对一定范围内宽度的查询。
	针对最小宽度的查询。

快速预览媒体查询

点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式。

查看关联的 CSS

右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义。

标尺

切换此选项可以在视口旁显示基于像素的标尺。

配置网络（UA、网络节流）

选择此选项会在抽屉式导航栏中打开一个面板，您可以在其中更改网络相关行为：

1. Disk Cache ：停用 Disk Cache 将在打开 DevTools 时停止浏览器缓存页面及其资源。
2. Network Throttling ：在此处阅读更多有关 网络节流 的信息。
3. User Agent ：允许您设置特定的 UA (User Agent) 字符串替换值。

提示：您也可以从 主菜单 中打开 Network conditions 抽屉式导航栏。

限制

Device Mode 存在一些限制。

• 设备硬件
• 无法模拟 GPU 和 CPU 行为。
• 浏览器 UI
• 无法模拟系统显示，如地址栏。
• 无法将原生显示（如 <select> 元素）作为模态列表模拟。
• 一些增强功能（如数字输入打开小键盘）可能会因实际设备行为不同而不同。
• 浏览器功能
• WebGL 可以在模拟器中操作，但 iOS 7 设备不支持 WebGL。
• Chrome 不支持 MathML，但 iOS 7 设备支持 MathML。
• 无法模拟 iOS 5 方向缩放错误 。
• 行高 CSS 属性可以在模拟器中操作，但 Opera Mini 不支持行高 CSS。
• 无法模拟 CSS 规则限制，例如 Internet Explorer 中的规则限制。
• AppCache
• 模拟器不会替换 AppCache 清单文件 的 UA 或 查看源请求 。

尽管存在这些限制，Device Mode 还是十分强大，能够完成大多数任务。 如果需要在真实设备上测试，可以使用 远程调试 获得其他数据分析。

模拟传感器：地理定位与加速度计

由于大多数桌面设备都没有 GPS 芯片和加速度计，所以测试它们比较困难。Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降低测试的开销。

TL;DR

• 模拟地理定位坐标以测试地理定位替换值。
• 模拟设备方向以测试加速度计数据。

访问传感器控件

要访问 Chrome DevTools 传感器控件，请执行以下操作：

1. 打开 DevTools 主菜单
2. 在 More Tools 菜单下，点击 Sensors

注：如果您的应用检测到使用 JavaScript（如 Modernizr）的传感器加载，请确保在启用传感器模拟器之后重新加载页面。

替换地理定位数据

与桌面设备不同，移动设备通常使用 GPS 硬件检测位置。在 Sensors 窗格中，您可以模拟地理定位坐标，以便与 Geolocation API 结合使用。

在模拟抽屉式导航栏的 Sensors 窗格中选中 Emulate geolocation coordinates 复选框，启用地理定位模拟。

您可以使用此模拟器替换 navigator.geolocation 的位置值，并在地理定位数据不可用时模拟用例。

模拟加速度计（设备方向）

要测试来自 Orientation API 的加速度计数据，请在 Sensors 窗格中选中 Accelerometer 复选框，启用加速度计模拟器。

您可以操作下列方向参数：

• α

  围绕 Z 轴旋转。

• β

  左右倾斜。

• γ

  前后倾斜。

您也可以点击模型加速度计并将其拖动到所需方向。

使用此设备方向演示试用加速度计模拟器。

模拟和测试其他浏览器

您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行。即使 Device Mode 可以模拟 iPhone 等多种其他设备，我们仍鼓励您查看其他浏览器模拟解决方案。

TL;DR

• 如果您没有特定设备，或者想要执行抽检，最佳方式就是直接在浏览器中模拟设备。
• 利用设备模拟器，您可以从工作站在一系列设备上模拟开发网站。
• 基于云的模拟器让您可以在不同平台之间对网站进行自动化单元测试。”

浏览器模拟器

浏览器模拟器非常适合于测试网站的自适应能力，但它们无法模拟 API 差异、CSS 支持，以及您可以在移动设备浏览器中看到的某些行为。在真实设备运行的浏览器上测试您的网站，确保一切均按照预期运行。

Firefox 的自适应设计视图

Firefox 拥有一个 自适应设计视图 ，让您可以探索您的设计在常见屏幕尺寸上的变化或者通过拖动边缘的方式确定自己的大小，而不用考虑具体设备。

Edge 的 F12 模拟

要模拟 Windows Phones，请使用 Microsoft Edge 的 内置模拟 。

由于 Edge 不具备旧版兼容性，请使用 IE 11 的模拟 .aspx)模拟您的页面在较旧版本 Internet Explorer 中的外观。

设备模拟器

设备模拟器不仅可以模拟浏览器环境，也能模拟整个设备。它们可以用于测试需要 iOS 集成的内容，例如带虚拟键盘的表单输入。

Android Emulator

Android Emulator 中的 Stock Browser

目前，无法在 Android Emulator 上安装 Chrome。不过，您可以使用 Android Browser、Chromium Content Shell 和 Firefox for Android，我们将在本指南的稍后部分进行介绍。Chromium Content Shell 与 Chrome 使用相同的渲染引擎，但没有任何浏览器特定的功能。

Android Emulator 标配 Android SDK，您需要从 此处 下载。 然后，按照说明 设置虚拟设备 和 启动模拟器 。

模拟器启动后，点击 Browser 图标，就可以在较旧的 Stock Browser for Android 上测试网站了。

Android 上的 Chromium Content Shell

Android Emulator Content Shell

要安装 Chromium Content Shell for Android，请保持模拟器运行并在命令提示符处运行以下命令：

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

现在，您可以使用 Chromium Content Shell 测试您的网站。

Android 上的 Firefox

Android Emulator 上的 Firefox 图标

与 Chromium 的 Content Shell 类似，您可以获取一个 APK 以将 Firefox 安装到模拟器上。

从 https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/ 下载合适的 .apk 文件。

从这里，您可以使用以下命令将文件安装到打开的模拟器或连接的 Android 设备上：

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

iOS 模拟器

适用于 Mac OS X 的 iOS 模拟器标配 Xcode，您可以 从 App Store 安装 。

完成后，您可以通过 Apple 的文档 学习如何使用模拟器。

注：为了避免在每次想要使用 iOS 模拟器时都要打开 Xcode，请打开 Xcode，然后右键点击停靠栏中的 iOS Simulator 图标并选择 Keep in Dock 。现在，您可以在需要时随时点击此图标。

Modern.IE

Modern IE VM

利用 Modern.IE 虚拟机，您可以在自己的计算机上通过 VirtualBox（或 VMWare）访问不同版本的 IE。在 此处的下载页面 上选择一款虚拟机。

基于云的模拟器

如果您无法使用模拟器并且没有真实设备，那么基于云的模拟器是您的最佳选择。基于云的模拟器相对于真实设备和本地模拟器的一大优势是，您可以在不同平台上对网站进行自动化单元测试。

• BrowserStack（商用） 是最便于进行手动测试的云模拟器。您可以选择操作系统、浏览器版本与设备类型，以及要浏览的网址，模拟器将启动一个您可以与之交互的托管式虚拟机。您还可以在相同屏幕中启动多个模拟器，这样，您能够同时测试应用在多个设备上的外观。
• SauceLabs（商用） 允许您在模拟器内部运行单元测试，这对于将网站流脚本化和稍后在各种设备上观看视频记录非常有用。您也可以对网站进行手动测试。
• Device Anywhere（商用） 不使用模拟器，而是使用您可以远程控制的真实设备。 如果您需要在特定设备上重现问题并且在本指南之前的任何选项上都无法看到错误，远程控制真实设备将非常有用。

远程调试 Android 设备使用入门

从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。 本教程将向您展示如何：

• 设置您的 Android 设备进行远程调试，并从开发计算机上发现设备。
• 从您的开发计算机检查和调试 Android 设备上的实时内容。
• 将 Android 设备上的内容抓屏到您的开发计算机上的 DevTools 实例中。

要求

• 开发计算机上已安装 Chrome 32 或更高版本。
• 开发计算机上已安装 USB 驱动程序 （如果您使用 Windows）。 确保设备管理器报告正确的 USB 驱动程序
• 拥有一根可以将您的 Android 设备连接至开发计算机的 USB 电缆。
• Android 4.0 或更高版本。
• 您的 Android 设备上已安装 Chrome（Android 版）。

第 1 步：发现您的 Android 设备

1. 在您的 Android 设备上，选择 Settings > Developer Options > Enable USB Debugging 。 在运行 Android 4.2 及更新版本的设备上， Developer options 默认情况下处于隐藏状态。 请参阅 启用设备上的开发者选项 以了解如何启用它。

2. 在您的开发计算机上打开 Chrome。您应使用您的一个 Google 帐户登录到 Chrome。 远程调试在 隐身模式 或 访客模式 下无法运行。

3. 打开 DevTools 。

4. 在 DevTools 中，点击 Main Menu ，然后选择 More tools > Remote devices 。

   

5. 在 DevTools 中，点击 Settings 标签（如果正在显示另一个标签）。

6. 确保已启用 Discover USB devices 。

   

7. 使用一根 USB 电缆将 Android 设备直接连接到您的开发计算机。 请勿使用任何中间 USB 集线器。如果这是您首次将您的 Android 设备连接到此开发计算机，您的设备将显示在 Unknown 中，其下面具有文本 Pending Authorization 。

   

8. 如果您的设备显示为 Unknown ，则在 Android 设备上接受 Allow USB Debugging 权限提示。 Unknown 被替换为您的 Android 设备的型号名称。 绿色圆圈和 Connected 文本表示您已大功告成，可以从开发计算机远程调试您的 Android 设备。

注：如果您在发现流程中遇到任何问题，您可以通过在 Android 设备上选择 Settings > Developer Options > Revoke USB Debugging Authorizations 重启该流程。

第 2 步：从您的开发计算机调试 Android 设备上的内容。

1. 如果您尚未在 Android 设备上打开 Chrome，则现在打开它。

2. 返回 DevTools，点击与设备的型号名称匹配的标签。 在此页面的顶部，您会看到 Android 设备的型号名称，后面紧跟着其序列号。 在型号名称下面，您可以看到在设备上运行的 Chrome 的版本，版本号在括号里。每个打开的 Chrome 标签都会有自己的区域。您可以从此区域与该标签交互。 如果有任何使用 WebView 的应用，您也会看到针对每个应用的区域。 下面的屏幕截图没有任何打开的标签或 WebViews。

   

3. 在 New tab 旁输入一个网址，然后点击 Open 。此页面将在 Android 设备上的新标签中打开。

4. 点击您刚刚打开的网址旁的 Inspect 。这将打开一个新的 DevTools 实例。 您的 Android 设备上运行的 Chrome 的版本决定在开发计算机上打开的 DevTools 的版本。因此，如果您的 Android 设备正在运行一个非常旧的 Chrome 版本，则 DevTools 实例看上去可能与您常用的实例有很大的差别。

更多操作：重新加载、聚焦或关闭一个标签

点击您要重新加载、聚焦或关闭的标签旁的 More Options 。

检查元素

转到您的 DevTools 实例的 Elements 面板，将鼠标悬停在一个元素上以在 Android 设备的视口中突出显示它。

您还可以在 Android 设备屏幕上点按一个元素，以在 Elements 面板中选中它。 点击您的 DevTools 实例上的 Select Element ，然后在您的 Android 设备屏幕上点按此元素。 请注意， Select Element 将在第一次触摸后停用，因此，每次想要使用此功能时您都需要重新启用它。

Android 设备到开发计算机的抓屏

点按 Toggle Screencast ![Toggle Screencast][screencast]{:.devtools-inline} 以在您的 DevTools 实例中查看 Android 设备的内容。

您可以通过多种方式与抓屏互动：

• 将点击转变为点按，在设备上触发适当的触摸事件。
• 将计算机上的按键发送至设备。
• 要模拟双指张合手势，请按住 Shift 拖动。
• 要滚动，请使用您的触控板或鼠标滚轮，或者使用您的鼠标指针抛式滚动。

关于抓屏的一些注意事项：

• 抓屏仅显示页面内容。抓屏的透明部分表示设备界面，如 Chrome 多功能框、Android 状态栏或 Android 键盘。
• 抓屏会对帧率产生负面影响。在测量滚动或动画时停用抓屏，以更准确地了解页面的性能。
• 如果您的 Android 设备屏幕锁定，您的抓屏内容将消失。 将您的 Android 设备屏幕解锁可自动恢复抓屏。

访问本地服务器

在开发计算机网络服务器上托管网站，然后从 Android 设备访问内容。

使用 USB 电缆和 Chrome DevTools，您可以从开发计算机运行网站，然后在 Android 设备上查看网站。

TL;DR

• 利用端口转发，您可以在 Android 设备上查看开发计算机网络服务器中的内容。
• 如果您的网络服务器正在使用自定义域名，您可以将 Android 设备设置为访问位于具有自定义域名映射的网域中的内容。

设置端口转发

端口转发使您的 Android 设备可以访问在开发计算机网络服务器上托管的内容。 端口转发通过在映射到开发计算机上 TCP 端口的 Android 设备上创建侦听 TCP 端口的方式工作。端口之间的流量通过 Android 设备与开发计算机之间的 USB 连接传输，所以连接并不取决于您的网络配置。

要启用端口转发，请执行以下操作：

1. 在您的开发计算机与 Android 设备之间设置 远程调试 。 完成后，您应在 Inspect Devices 对话框的左侧菜单中看到 Android 设备，还应看到 Connected 状态指示器。
2. 在 DevTools 的 Inspect Devices 对话框中，启用 Port forwarding 。
3. 点击 Add rule 。

1. 在左侧的 Device port 文本字段中，输入 Android 设备上您想要从其访问网站的 localhost 端口号。例如，如果您想要从 localhost:5000 访问网站，则应输入 5000 。 1. 在右侧的 Local address 文本字段中，输入开发计算机网络服务器上运行的您的网站的 IP 地址或主机名，后面紧跟端口号。例如，如果您的网站在 localhost:7331 上运行，则应输入 localhost:7331 。

1. 点击 Add 。

端口转发已设置完毕。您可以在该设备位于 Inspect Devices 对话框内的标签上看到端口转发的状态指示器。

要查看内容，请在您的 Android 设备上打开 Chrome，然后转至您在 Device port 中指定的 localhost 端口。 例如，如果您在字段中输入了 5000 ，则应转至 localhost:5000 。

映射到自定义本地域名

利用自定义域名映射，您可以在 Android 设备上查看当前使用自定义域名的开发计算机上网络服务器中的内容。

例如，假设您的网站使用仅在白名单网域 chrome.devtools 上运行的第三方 JavaScript 库。 因此，您可以在开发计算机上的 hosts 文件中创建条目，将此网域映射到 localhost （如 127.0.0.1 chrome.devtools ）。设置自定义域名映射和端口转发后，您将能够在 Android 设备上查看网站，网址为 chrome.devtools 。

为代理服务器设置端口转发

要映射自定义域名，您必须在开发计算机上运行代理服务器。 代理服务器示例包括 Charles 、 Squid 和 Fiddler 。

要为代理设置端口转发，请执行以下操作：

1. 运行代理服务器并记下其正在使用的端口。 注 ：代理服务器和您的网络服务器必须在不同的端口上运行。
2. 为您的 Android 设备设置 端口转发 。在 local address 字段中，输入 localhost: ，后面紧跟运行代理服务器的端口。例如，如果代理服务器在端口 8000 上运行，您应输入 localhost:8000 。 在 device port 字段中，输入您想要使 Android 设备在其上面侦听的端口号，如 3333 。

在您的设备上配置代理设置

接下来，您需要配置 Android 设备，以便与代理服务器进行通信。

1. 在您的 Android 设备上，转至 Settings > Wi-Fi 。
2. 长按您当前连接到的网络的名称。 注 ：代理设置的适用范围为单个网络。
3. 点按 Modify network 。
4. 点按 Advanced options 。将会显示代理设置。
5. 点按 Proxy 菜单，然后选择 Manual 。
6. 在 Proxy hostname 字段中，输入 localhost 。
7. 在 Proxy port 字段中，输入您在前一部分中为 device port 输入的端口号。
8. 点按 Save 。

进行这些设置后，您的设备会将所有请求转发给开发计算机上的代理。 代理会代表您的设备发出请求，这样就可以正确解析对自定义本地域名的请求。

现在，您可以在 Android 设备上访问自定义域名，就像您在开发计算机上访问一样。

如果您的网络服务器正在非标准端口上运行，从 Android 设备请求内容时请务必指定端口。例如，如果网络服务器正在端口 7331 上使用自定义域名 chrome.devtools ，您从 Android 设备上查看网站时应使用网址 chrome.devtools:7331 。

提示：要恢复正常浏览，与开发计算机断开连接后请务必在您的 Android 设备上还原代理设置。

远程调试 WebView

使用 Chrome 开发者工具在您的原生 Android 应用中调试 WebView。

在 Android 4.4 (KitKat) 或更高版本中，使用 DevTools 可以在原生 Android 应用中调试 WebView 内容。

TL;DR

• 在您的原生 Android 应用中启用 WebView 调试；在 Chrome DevTools 中调试 WebView。
• 通过 chrome://inspect 访问已启用调试的 WebView 列表。
• 调试 WebView 与通过 远程调试 调试网页相同。

配置 WebViews 进行调试

必须从您的应用中启用 WebView 调试。要启用 WebView 调试，请在 WebView 类上调用静态方法 setWebContentsDebuggingEnabled )。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

此设置适用于应用的所有 WebView。

提示：WebView 调试 不会 受应用清单中 debuggable 标志的状态的影响。如果您希望仅在 debuggable 为 true 时启用 WebView 调试，请在运行时测试标志。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

在 DevTools 中打开 WebView

chrome://inspect页面将显示您的设备上已启用调试的 WebView 列表。

要开始调试，请点击您想要调试的 WebView 下方的 inspect 。像使用远程浏览器标签一样使用 DevTools。

与 WebView 一起列示的灰色图形表示 WebView 的大小和相对于设备屏幕的位置。如果您的 WebView 已设置标题，标题也会一起显示。

故障排除

在 chrome://inspect page 上无法看到您的 WebView？

• 验证已为您的应用启用 WebView 调试。
• 在设备上，打开应用以及您想要调试的 WebView。然后，刷新 chrome://inspect 页面。

在 Chrome DevTools 中调试 JavaScript 入门

本交互式教程循序渐进地教您在 Chrome DevTools 中调试 JavaScript 的基本工作流程。 虽然教程介绍的是如何调试一种具体问题，但您学到的一般工作流程对调试各种类型的 JavaScript 错误均有帮助。

如果您使用 console.log() 来查找和修正代码中的错误，可以考虑改用本教程介绍的工作流程。 其速度快得多，也更有效。

第 1 步：重现错误

重现错误始终是调试的第一步。“重现错误”是指找到一系列总是能导致错误出现的操作。

您可能需要多次重现错误，因此要尽量避免任何多余的步骤。

请按照以下说明重现您要在本教程中修正的错误。

1. 点击 Open Demo 。演示页面在新标签中打开。

   OPEN DEMO

2. 在演示页面上，输入 5 作为 Number 1 。

3. 输入 1 作为 Number 2 。

4. 点击 Add Number 1 and Number 2。

5. 查看输入和按钮下方的标签。上面显示的是 5 + 1 = 51 。

啊呜。这个结果是错误的。正确结果应为 6 。这就是您要修正的错误。

第 2 步：使用断点暂停代码

DevTools 让您可以暂停执行中的代码，并对暂停时刻的 所有 变量值进行检查。 用于暂停代码的工具称为 断点 。 立即试一试：

1. 按 Command+Option+I (Mac) 或 Ctrl+Shift+I（Windows、Linux）在演示页面上打开 DevTools。
2. 点击 Sources 标签。

1. 点击 Event Listener Breakpoints 将该部分展开。DevTools 显示一个包含 Animation 和 Clipboard 等可展开事件类别的列表。

1. 在 Mouse 事件类别旁，点击 Expand 。DevTools 显示一个包含 click 等 Mouse 事件的列表，事件旁有相应的复选框。

2. 选中 click 复选框。

   ​

   图 1 ：DevTools 在演示页面上打开，Sources 面板获得焦点，click 事件侦听器断点处于启用状态。 如果 DevTools 窗口较大，则 Event Listener Breakpoints 窗格位于右侧，而不是像屏幕截图中那样位于左下方。

   ​

3. 返回至演示页面，再次点击 Add Number 1 and Number 2 。DevTools 暂停演示并在 Sources 面板中突出显示一行代码。 DevTools 突出显示的是下面这行代码：

   function onClick() {

当您选中 click 复选框时，就是在所有 click 事件上设置了一个基于事件的断点。 点击了 任何 节点，并且该节点具有 click 处理程序时，DevTools 会自动暂停在该节点 click 处理程序的第一行。

注：这不过是 DevTools 提供的众多断点类型中的一种。应使用的断点类型取决于您要调试的问题类型。

第 3 步：单步调试代码

一个常见的错误原因是脚本执行顺序有误。 可以通过单步调试代码一次一行地检查代码执行情况，准确找到执行顺序异常之处。立即试一试：

1. 在 DevTools 的 Sources 面板上，点击 Step into next function call ，一次一行地单步调试 onClick() 函数的执行。DevTools 突出显示下面这行代码：

   if (inputsAreEmpty()) {

2. 点击 Step over next function call 。 DevTools 执行 inputsAreEmpty() 但不进入它。 请注意 DevTools 是如何跳过几行代码的。 这是因为 inputsAreEmpty() 求值结果为 false，所以 if 语句的代码块未执行。

这就是单步调试代码的基本思路。如果您看一下 get-started.js 中的代码，就能发现错误多半出在 updateLabel() 函数的某处。您可以不必单步调试每一行代码，而是使用另一种断点在靠近错误位置的地方暂停代码。

第 4 步：设置另一个断点

代码行断点是最常见的断点类型。如果您想在执行到某一行代码时暂停，请使用代码行断点。立即试一试：

1. 看一下 updateLabel() 中的最后一行代码，其内容类似于：

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

2. 在这行代码的左侧，可以看到这行代码的行号： 32 。点击 32 。DevTools 会在 32 上放置一个蓝色图标。 这意味着这行代码上有一个代码行断点。 DevTools 现在总是会在执行这行代码之前暂停。

3. 点击 Resume script execution 。 脚本继续执行，直至到达您设置了断点的代码行。

4. 看一下 updateLabel() 中已执行的代码行。

DevTools 打印输出 addend1 、 addend2 和 sum 的值。

sum 的值疑似有问题。其求值结果本应是数字，而实际结果却是字符串。 这可能就是造成错误的原因。

第 5 步：检查变量值

另一种常见的错误原因是，变量或函数产生的值异常。 许多开发者都利用 console.log() 来了解值随时间变化的情况，但 console.log() 可能单调乏味而又效率低下，原因有两个。 其一，您可能需要手动编辑大量调用 console.log() 的代码。 其二，由于您不一定知晓究竟哪一个变量与错误有关，因此可能需要对许多变量进行记录。

DevTools 为 console.log() 提供的其中一个替代工具是监视表达式。可以使用监视表达式来监视变量值随时间变化的情况。顾名思义，监视表达式的监视对象不仅限于变量。您可以将任何有效的 JavaScript 表达式存储在监视表达式中。 立即试一试：

1. 在 DevTools 的 Sources 面板上，点击 Watch 。该部分随即展开。

2. 点击 Add Expression 。

3. 键入 typeof sum 。

4. 按 Enter。DevTools 显示 typeof sum: "string" 。冒号右侧的值就是监视表达式的结果。

   ​

   图 1 ：创建 typeof sum 监视表达式后的“监视表达式”窗格（右下方）。 如果 DevTools 窗口较大，则“监视表达式”窗格位于右侧， Event Listener Breakpoints 窗格的上方。

   ​

正如猜想的那样， sum 的求值结果本应是数字，而实际结果却是字符串。 这就是演示页面错误的原因。

DevTools 为 console.log() 提供的另一个替代工具是 Console。可以使用 Console 对任意 JavaScript 语句求值。开发者通常利用 Console 在调试时覆盖变量值。在您所处的情况下，Console 可帮助您测试刚发现的错误的潜在解决方法。 立即试一试：

1. 如果您尚未打开 Console 抽屉，请按 Escape 将其打开。 它会在 DevTools 窗口底部打开。

2. 在 Console 中，键入 parseInt(addend1) + parseInt(addend2) 。

3. 按 Enter。DevTools 对语句求值并打印输出 6 ，即您预料演示页面会产生的结果。

   ​

   图 1 ：对 parseInt(addend1) + parseInt(addend2) 求值后的 Console 抽屉。

   ​

第 6 步：应用修正

您已找到错误的潜在解决方法。剩下的工作就是编辑代码后重新运行演示页面来测试修正效果。 您不必离开 DevTools 就能应用修正。 您可以直接在 DevTools UI 内编辑 JavaScript 代码。 立即试一试：

1. 在 DevTools 的 Sources 面板上的代码编辑器中，将 var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2); 。它就是您当前暂停位置上面那行代码。
2. 按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）保存更改。代码的背景色变为红色，这表示在 DevTools 内更改了脚本。
3. 点击 Deactivate breakpoints 。它变为蓝色，表示处于活动状态。 如果进行了此设置，DevTools 会忽略您已设置的任何断点。
4. 点击 Resume script execution 。
5. 使用不同的值测试演示页面。现在演示页面应能正确计算求和。

切记，此工作流程只对运行在浏览器中的代码应用修正。 它不会为所有运行您的页面的用户修正代码。 要实现该目的，您需要修正运行在提供页面的服务器上的代码。

后续步骤

恭喜！现在您已掌握了在 DevTools 中调试 JavaScript 的基础知识。

本教程只向您介绍了两种设置断点的方法。DevTools 还提供了许多其他方法，其中包括：

• 仅在满足您指定的条件时触发的条件断点。
• 发生已捕获或未捕获异常时触发的断点。
• 当请求的网址与您提供的子字符串匹配时触发的 XHR 断点。

为我演示所有断点

有几个代码单步执行控件在本教程中未予说明。 请点击以下链接，了解有关它们的更多信息。

我想要掌握代码单步调试知识

用断点暂停你的代码

使用断点来暂停JavaScript代码。本指南介绍了DevTools中可用的每种类型的断点，以及何时使用和如何设置每种类型。有关调试过程的实际教程，请参阅 Chrome DevTools中的开始调试JavaScript 。

概述何时使用每个断点类型

最知名的断点类型是代码行。但是，代码行断点可能无法设置，特别是如果您不知道确切的位置，或者您正在使用大型代码库。通过知道如何以及何时使用其他类型的断点，您可以节省调试时间。

断点类型	当你使用这个
行的代码	了解确切的代码区域进行调查。
条件代码行	了解要调查的确切代码区域，但是只有当其他条件为真时才想暂停。
DOM	想要暂停更改或删除特定DOM节点或其子节点的代码。
XHR	想要在XHR URL包含字符串模式时暂停。
事件侦听器	想调查事件发生后的代码，如 click 触发。
例外	想要暂停在引发捕获或未捕获异常的代码行。

行代码断点

当您知道需要调查的确切代码区域时，请使用一行代码断点。在这行代码执行之前，DevTools 总是 暂停。

要在DevTools中设置一行代码断点：

1. 单击 源 选项卡。
2. 打开包含要打破的代码行的文件。
3. 去代码行。
4. 代码行的左边是行号列。点击它。行号列顶部显示蓝色图标。

图1 ：第 29 行设置的代码段断点 **

有条件的代码断点

当您知道需要调查的确切代码区域时，使用条件代码段断点，但只有当其他条件为真时才想暂停。

要设置条件代码段断点：

1. 单击 源 选项卡。
2. 打开包含要打破的代码行的文件。
3. 去代码行。
4. 代码行的左边是行号列。右键单击它。
5. 选择 添加条件断点 。在代码行下方显示一个对话框。
6. 在对话框中输入您的条件。
7. 按Enter激活断点。行号列顶部出现橙色图标。

图2 ：A线条件线路的代码断点集 32

管理代码段断点

使用“ 断点 ”窗格从单个位置禁用或删除代码行代码断点。

图3 ：“ 断点 ”窗格显示两行代码断点：一行在行15 get-started.js ，另一行代码行32

• 选中一个条目旁边的复选框以禁用该断点。
• 右键单击一个条目以删除该断点。
• 右键单击“ 断点 ”窗格中的任何位置以停用所有断点，禁用所有断点或删除所有断点。禁用所有断点等同于取消选中每个断点。停用所有断点指示DevTools忽略所有代码段断点，但也要保持其启用状态，以使它们处于与以前相同的状态，当您重新激活它们时。

图4 ：“ 断点 ”窗格中的禁用断点被禁用和透明

DOM更改断点

当您想暂停更改DOM节点或其子节点的代码时，请使用DOM更改断点。

设置DOM更改断点：

1. 单击 元素 选项卡。
2. 转到要设置断点的元素。
3. 右键单击该元素。
4. 将鼠标悬停在 Break上， 然后选择 Subtree修改 ， Attribute修改 或 Node移除 。

图5 ：创建DOM更改断点的上下文菜单

DOM类型更改断点

• 子树修改 。当当前选择的节点的子节点被删除或添加，或子节点的内容被改变时触发。未触发子节点属性更改，或对当前选定节点的任何更改。
• 属性修改 ：在当前选择的节点上添加或删除属性时，或属性值更改时触发。
• 节点删除 ：当当前选择的节点被删除时触发。

XHR断点

当XHR的请求URL包含指定的字符串时想要中断时使用XHR断点。DevTools暂停XHR调用的代码行 send() 。

注意：此功能也适用于 提取 请求。

设置XHR断点：

1. 单击 源 选项卡。
2. 展开“ XHR断点 ”窗格。
3. 单击 添加断点 。
4. 输入您要打破的字符串。当这个字符串存在于XHR的请求URL中的任何位置时，DevTools会暂停。
5. 按Enter确认。

图6 ：在创建XHR断点 XHR断点 为包含任何请求 org 的URL

事件侦听器断点

当您想暂停事件侦听器代码后，在事件触发后运行事件侦听器断点。您可以选择特定事件，例如事件 click 类别，例如所有鼠标事件。

1. 单击 源 选项卡。
2. 展开“ 事件侦听器断点 ”窗格。DevTools显示事件类别的列表，如 动画 。
3. 检查其中一个类别，以便在任何来自该类别的事件触发时暂停，或者展开类别并检查特定事件。

图7 ：创建事件监听器断点 deviceorientation

异常断点

当您想暂停在引发捕获或未捕获异常的代码行时使用异常断点。

1. 单击 源 选项卡。
2. 点击 异常暂停 。启用后会变成蓝色。
3. （可选）如果您还想暂停捕获的异常，除了未捕获的异常之外，请检查 “捕获异常暂停” 复选框。

图7 ：暂停一个未捕获的异常

将预处理代码映射到源代码

保持您的客户端代码便于阅读和调试，即使在您组合、缩减或编译代码后也应如此。使用源映射将您的源代码映射到编译的代码。

TL;DR

• 使用 Source Maps 将缩减的代码映射到源代码。随后，您可以在其原始来源中阅读和调试编译的代码。
• 仅使用 可以产生 Source Maps 的预处理器 。
• 验证您的网络服务器可以提供 Source Maps。

预处理器使用入门

本文将说明如何与 DevTools Sources 面板中的 JavaScript Source Maps 交互。要初步了解什么是预处理器、它们的作用以及 Source Maps 的工作方式，请转至 设置 CSS 和 JS 预处理器 。

使用支持的预处理器

您需要使用可以创建源映射的压缩工具。有关最常用的选项， 请参见我们的预处理器支持部分 。要详细查看，请参见 源映射：语言、工具和其他信息 Wiki 页面。

Source Maps 一般与下列类型的预处理器搭配使用：

• 转译器（ Babel 、 Traceur ）
• 编译器（ Closure Compiler 、 TypeScript 、 CoffeeScript 和 Dart ）
• Minifiers ( UglifyJS )

DevTools Sources 面板中的 Source Maps

预处理器中的 Source Maps 可以使 DevTools 加载缩减代码与原始文件。然后，您可以使用原始文件设置断点和浏览代码。同时，Chrome 也会运行您的缩减代码。这会让您感觉到就像在生产环境中运行开发网站一样。

在 DevTools 中运行 Source Maps 时，您会注意到 JavaScript 不会编译，也会看到 Source Maps 引用的所有 JavaScript 文件。这是使用源映射，不过后台却在实际运行编译的代码。任何错误、日志和断点都将映射到开发代码，从而实现出色的调试！因此，您会感觉到就像在生产环境中运行开发网站一样。

在设置中启用 Source Maps

Source Maps 默认处于启用状态（自 Chrome 39 开始），不过，如果您想要仔细检查或启用它们，请先打开 DevTools，然后点击设置配置 。在 Sources 下，选中 Enable JavaScript Source Maps 。您也可以选中 Enable CSS Source Maps 。

使用 Source Maps 调试

调试代码 和启用 Source Maps 时，Source Maps 将在两个地方显示：

1. 控制台中（指向来源的链接应是原始文件，而不是生成的文件）
2. 逐步执行代码时（调用堆栈中的链接应打开原始的源文件）

@sourceURL 和 displayName

虽然不是 Source Map 规范的一部分， @sourceURL 仍然可以让您在处理 eval 时将开发变得更轻松。此帮助程序非常类似于 //# sourceMappingURL 属性，并且实际上在 Source Map V3 规范中也有所提及。

通过将下面的特殊注释包含到代码中（将进行 eval 处理），您可以命名 eval 和内嵌脚本与样式，使其在 DevTools 中以更具逻辑的名称显示。

//# sourceURL=source.coffee

导航到此 演示 ，然后执行以下操作：

• 打开 DevTools 并转至 Sources 面板。
• 将一个文件名输入“Name your code:”输入字段。
• 点击 compile 按钮。
• 将出现一条提醒，以及 CoffeeScript 源的评估和。

如果您展开“Sources”子面板，现在您会看到一个具有您之前输入的自定义文件名的新文件。如果您双击来查看此文件，它将包含我们原始来源的已编译 JavaScript。不过，最后一行将是 // @sourceURL 注释，指示原始的源文件是什么。处理语言抽象时，这样可以为调试提供很大帮助。

JavaScript调试参考

通过Chrome DevTools调试功能的全面参考，发现新的调试工作流程。

请参阅 开始调试JavaScript在Chrome DevTools 中了解调试的基础知识。

用断点暂停代码

设置一个断点，以便在执行过程中暂停代码。

请参阅 使用断点暂停代码 ，以了解如何设置断点。

逐步编码

一旦你的代码暂停了，一步一步地，一路一行，调查控制流程和属性值。

一步一步的代码

当暂停一行代码，其中包含与您正在调试的问题无关的功能时，请单击“ 逐步 执行”以执行该功能，而无需进入。

图1 。 跳过 ，蓝色概述

例如，假设您正在调试以下代码：

function updateHeader(){
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName(){
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

你暂停对 A 。通过按 步骤 ，DevTools将执行您所跳过的功能中的所有代码，这是 B 和 C 。DevTools然后暂停 D 。

一步一行的代码

当包含与您正在调试的问题相关的函数调用的代码行中暂停时，单击“ 步入” 以进一步调查此功能。

图2 。 进入 ，蓝色概述

例如，假设您正在调试以下代码：

function updateHeader(){
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName(){
  var name = app.first + ' ' + app.last; // B
  return name;
}

你暂停对 A 。通过按 步骤 ，DevTools会执行这一行代码，然后暂停 B 。

一步一步的代码

当暂停在与您正在调试的问题无关的功能中时，单击 Step out 执行功能代码的其余部分。

图3 。 走出去 ，用蓝色概括

例如，假设您正在调试以下代码：

function updateHeader(){
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName(){
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

你暂停对 A 。通过按下 Step out ，DevTools会执行其中的代码 getName() ，这只是 B 在这个例子中，然后暂停 C 。

运行所有代码到一定的行

调试长功能时，可能会有很多与调试问题无关的代码。

你 可以 通过所有的路线，但这可能是乏味的。您 可以 在您感兴趣的行上设置一行代码断点，然后按 恢复脚本执行 ，但有一个更快的方法。

右键单击您感兴趣的代码行，然后选择 继续到此处 。DevTools运行所有代码，然后暂停该行。

图4 。选择 继续到这里

重新启动调用堆栈的顶部功能

在暂停一行代码时，右键单击“调用堆栈”窗格中的任意位置，然后选择“ 重新启动帧” 以在调用堆栈中顶部函数的第一行暂停。顶部函数是最后一个被调用的函数。

例如，假设您正在浏览以下代码：

function factorial(n){
  var product = 0; // B
  for (var i = 1; i <= n; i++) {
    product += i;
  }
  return product; // A
}

你暂停对 A 。单击 重新启动框架后 ，您将暂停 B ，而无需设置断点或按 恢复脚本执行 。

图5 。选择 重新启动帧

恢复脚本执行

要在暂停后继续执行脚本，请单击“ 恢复脚本执行” 。DevTools执行脚本直到下一个断点（如果有的话）。

图6 。 恢复脚本执行 ，概述为蓝色

强制执行脚本

要忽略所有断点并强制您的脚本恢复执行，请单击并按住 恢复脚本执行 ，然后选择 强制执行脚本 。

图7 。选择 强制脚本执行

更改线程上下文

在使用Web工作人员或服务工作人员时，单击“线程”窗格中列出的上下文切换到该上下文。蓝色箭头图标表示当前选择的上下文。

图8 。“线程”窗格，以蓝色概括

例如，假设您在主脚本和服务工作脚本中的断点处暂停。您希望查看服务工作者上下文的本地和全局属性，但“源”面板显示主脚本上下文。通过单击“线程”窗格中的服务工作者条目，您将可以切换到该上下文。

查看和编辑本地，关闭和全局属性

在暂停一行代码时，使用“范围”窗格来查看和编辑本地，关闭和全局作用域中的属性和变量的值。

• 双击属性值进行更改。
• 不可枚举的属性是灰色的。

图9 。“范围”窗格，以蓝色概括

查看当前的调用堆栈

在暂停一行代码的同时，使用“调用堆栈”窗格可以查看到此为止的调用堆栈。

如果您正在使用异步代码，请检查“ 异步” 复选框以启用异步调用堆栈。

单击一个条目跳转到该函数调用的代码行。蓝色箭头图标表示DevTools当前正在突出显示的功能。

图10 。“调用堆栈”窗格，以蓝色概括

注意：当一行代码没有暂停时，“调用堆栈”窗格为空。

复制堆栈跟踪

右键单击“调用堆栈”窗格中的任意位置，然后选择“ 复制堆栈跟踪 ”将当前调用堆栈复制到剪贴板。

图11 。选择 复制堆栈跟踪

下面是一个输出示例：

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

忽略脚本或脚本模式

当您要在调试时忽略该脚本时，Blackbox会出现一个脚本。当黑盒子时，在“调用堆栈”窗格中隐藏了一个脚本，当您逐步执行代码时，您就不会进入脚本的功能。

例如，假设您正在逐步执行此代码：

function animate(){
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A 是您信任的第三方图书馆。如果您确信您正在调试的问题与第三方库无关，那么黑盒子的脚本是有意义的。

从“编辑器”窗格中选择一个脚本

从“编辑器”窗格中对一个脚本进行黑框：

1. 打开文件。
2. 右键单击任意位置。
3. 选择 Blackbox脚本 。

图12 。从编辑器窗格中打包一个脚本

Blackbox从“调用堆栈”窗格中的脚本

从“调用堆栈”窗格中对一个脚本进行黑框：

1. 右键单击脚本中的函数。
2. 选择 Blackbox脚本 。

图13 。从“调用堆栈”窗格中打包一个脚本

Blackbox从Settings设置一个脚本

从“设置”中单击单个脚本或脚本模式：

1. 打开 设置 。
2. 转到 Blackboxing 选项卡。
3. 单击 添加模式 。
4. 输入脚本名称或脚本名称的正则表达式模式到blackbox。
5. 单击 添加 。

图14 。从“设置”中打勾一个脚本

从任何页面运行调试代码段

如果您发现自己在控制台中运行相同的调试代码，请考虑使用代码段。代码段是您在DevTools中创建，存储和运行的可执行脚本。

请参阅 运行代码片段从任何页面 了解更多。

观察自定义JavaScript表达式的值

使用“监视”窗格来观看自定义表达式的值。您可以观看任何有效的JavaScript表达式。

图15 。手表窗格，以蓝色概括

• 单击 添加表达式 创建一个新的表达式。
• 单击 刷新 以刷新所有现有表达式的值。值在逐步执行代码时自动刷新。
• 将鼠标悬停在表达式上，然后单击 删除表达式 将其删除。

做一个最小化的文件可读

点击 格式 ，使一个最小化的文件可读。

图16 。 格式 ，蓝色概述

编辑脚本

修复错误时，您经常要测试JavaScript代码的一些更改。您不需要在外部浏览器中进行更改，然后重新加载页面。您可以在DevTools中编辑脚本。

编辑脚本：

1. 在“源”面板的“编辑器”窗格中打开文件。
2. 在“编辑器”窗格中进行更改。
3. 按Command+ S（Mac）或 Ctrl+ S（Windows，Linux）保存。DevTools将整个JS文件修复到Chrome的JavaScript引擎。

图17 。编辑器窗格，以蓝色概括

如何单步调试代码

通过每次执行一个代码行或一个函数，您可以观察数据和页面中的变化，准确了解正在发生什么。您还可以修改脚本使用的数据值，您甚至可以修改脚本本身。

为什么此变量值是 20 而不是 30？为什么该代码行看上去没什么效果？为什么此标志在应为 false 的时候成为 true？ 每个开发者都面临这些问题，逐步执行代码可了解问题所在。

设置断点 后，返回此页面，并正常地使用它，直到达到某个断点。这将暂停页面上的所有 JavaScript，焦点转向“DevTools Sources”面板，并突出显示断点。现在，您可以有选择性地执行代码并逐步检查其数据。

TL;DR

• 逐步执行代码以便在问题发生之前或发生时观察问题，并通过实时编辑测试更改。
• 最好越过控制台记录，因为记录的数据在到达控制台时已过时。
• 启用“Async call stack”功能以提高异步函数调用堆栈的可视性。
• 将脚本设为黑箱以使第三方代码不出现在调用堆栈中。
• 使用已命名的函数而不是匿名函数，以提高调用堆栈可读性。

步骤的操作

所有步骤选项均通过边栏中的可点击图标 表示，但也可以通过快捷键触发。下面是简要介绍：

图标/按钮	操作	描述
	Resume	继续执行直到下一个断点。如果没有遇到断点，则继续正常执行。
	Long Resume	继续执行，将断点停用 500 毫秒。便于暂时跳过断点，否则会持续暂停执行代码，例如，循环内的断点。 点击并按住 Resume，直到展开以显示操作。
	Step Over	不管下一行发生什么都会执行，并跳转到下一行。
	Step Into	如果下一行包含一个函数调用， Step Into 将跳转并在其第一行暂停该函数。
	Step Out	函数调用后，执行当前函数剩余部分，然后在下一个语句暂停。
	Deactivate breakpoints	暂时停用所有断点。用于继续完整执行，不会真正移除断点。再次点击以重新激活断点。
	Pause on exceptions	在发生异常时，自动暂停执行代码。

使用 step into 作为典型的“一次一行”操作，因为它确保只有一个语句被执行，无论您进入或离开哪些函数。

当您怀疑未捕获的异常正在引发问题，但不知道异常在哪里时，使用 Pause on exceptions 。启用此选项后，您可以通过点击 Pause On Caught Exceptions 复选框优化它；在此情况下，仅当发生需要特别处理的异常时执行才会暂停。

按作用域查看属性

当您暂停脚本时， Scope 窗格会显示在该时刻当前已定义的所有属性。

在以下屏幕截图中，此窗格用蓝色突出显示。

Scope 窗格只有在脚本暂停时才会填充信息。页面运行时，Scope 窗格不含任何信息。

Scope 窗格显示在 local、closure 和 global 级别定义的属性。

如果某个属性旁有“Carat”图标，这意味着此属性指代一个对象。点击“Carat”图标可展开对象并查看其属性。

有时这些属性的显示会变暗。例如，在以下屏幕截图中，属性 constructor 比 confirm 属性暗淡。

深颜色属性可以计数。浅颜色、显示暗淡的属性则不可计数。 如需了解详细信息，请参阅以下 Stack Overflow 主题： Chrome 开发者工具 Scope 面板中的颜色有何含义？

调用堆栈

在靠近边栏顶部的位置是 Call Stack 部分。在断点处代码暂停时，调用堆栈以倒序形式显示将代码带到该断点的执行路径。这不但有助于了解执行 现在 所在位置，还有助于了解代码的执行路径，这是进行调试的一个重要因素。

示例

index.html 文件中位于第 50 行的一个初始 onclick 事件调用了位于 dgjs.js JavaScript 文件第 18 行的 setone() 函数，后者接着调用了位于同一文件第 4 行的 setall() 函数，执行在当前断点处暂停。

启用异步调用堆栈

启用异步调用堆栈功能可提高执行异步函数调用的透明度。

1. 打开 DevTools 的 Sources 面板。
2. 在 Call Stack 窗格上，启用 Async 复选框。

以下视频包含一个展示异步调用堆栈功能的简单脚本。 在此脚本中，第三方库用于选择一个 DOM 元素。 一个名为 onClick 的函数被注册为此元素的 onclick 事件处理程序。 无论何时调用 onClick ，它都会循序调用一个名为 f 的函数，该函数通过 debugger 关键字强制脚本暂停。

在此视频中，触发了一个断点并展开了调用堆栈。堆栈中只有一个调用： f 。 然后，启用异步调用堆栈功能，脚本继续执行，并再次触发断点和展开调用堆栈。此时，调用堆栈包含 f 之前的所有调用，包括第三方内容库调用和 onClick 调用。首次调用该脚本时，调用堆栈中只有一个调用。 第二次调用脚本时，有四个调用。简言之，异步调用堆栈功能可提高完整的异步函数调用堆栈的可视性。

提示：给函数命名以提高调用堆栈可读性

匿名函数使调用堆栈很难阅读。为函数命名以提高可读性。

以下两个屏幕截图中的代码段功能效果相同：代码功能并不重要，重要的是第一个屏幕截图中的代码使用匿名函数，而第二个屏幕截图中的代码使用已命名的函数。

在第一个屏幕截图的调用堆栈中，前两个函数均标明 (anonymous function) 。 在第二个屏幕截图中，前两个函数已命名，从而让您更容易了解程序流的大致情况。在处理大量的脚本文件（包括第三方内容库和框架）时，您的调用堆栈为五个或者十个调用深，在函数已命名后，理解调用堆栈流要容易得多。

含匿名函数的调用堆栈：

含已命名函数的调用堆栈：

将第三方代码设置为黑箱

将脚本文件设置为黑箱以忽略来自调用栈的第三方文件。

设置为黑箱之前：

设置为黑箱之后：

如需将文件设置为黑箱：

1. 打开 DevTools Settings。

1. 在左侧的导航菜单中，点击 Blackboxing 。

1. 点击 Add pattern 。
2. 在 Pattern 文本字段中，输入您想要从调用堆栈排除的文件名模式。 DevTools 将排除与该模式匹配的任意脚本。

1. 在文本字段右侧的下拉菜单中，选择 Blackbox 以执行脚本文件，但从调用堆栈排除调用，或选择 Disabled 以阻止执行文件。
2. 点击 Add 保存。

下次运行此页面并触发断点时，DevTools 将使函数调用不出现在来自调用堆栈的已设置为黑箱的脚本中。

数据操作

代码执行暂停时，您可以观察和修改其正在处理的数据。这对于尝试追踪一个看上去有错误值的变量或没有如期收到的传递参数很关键。

通过点击 Show/Hide drawer 显示 Console 抽屉 或按 ESC.在执行步骤时打开控制台，您现在可以：

• 输入变量的名称以在当前函数范围中查看其当前值
• 输入一个 JavaScript 分配语句以更改此值

尝试修改值，然后继续执行以查看它如何改变您的代码的结果，以及它是否如期运行。

示例

我们发现参数 dow 的值当前为 2，但在继续执行前将其手动更改为 3。

实时编辑

观察并暂停执行代码有助于您查找错误，而实时编辑让您可以快速预览更改，无需重新加载。

如需实时编辑脚本，只需在执行步骤时点击“Sources”面板的编辑器部分。在编辑器中进行所需的更改，然后按 Ctrl+S（或在 Mac 上按 Cmd+S）提交此更改。此时，整个 JS 文件将作为补丁程序进入 VM，并且所有函数定义都将更新。

现在，您可以继续执行；已修改的脚本将替代原始脚本执行，并且您可以观察您的更改效果。

示例

我们怀疑参数 dow 在被传递到函数 setone() 时，在任何情况下都会增加 1，也就是说，收到的值 dow< 在应为 0 时却为 1，在应为 1 时却为 2，等等。为了快速测试递减的传递值是否确认这是一个问题，我们在函数的开头添加第 17 行，并按 Ctrl + S 键提交并继续。

管理线程执行

使用 Sources 面板上的 Threads 窗格可暂停、进入以及检查其他线程，例如服务工作线程或网络工作线程。

为展示 Threads 窗格，此部分使用了以下演示：网络工作线程基本示例。

如果您打开应用上的 DevTools，就能发现 main 脚本位于 main.js 中：

网络 worker 脚本位于 worker.js 中：

Main 脚本侦听对 Multiply number 1 或 Multiply number 2 输入字段做出的更改。 侦听到更改时，main 脚本立即向网络工作线程发送一则消息，内含这两个需要相乘的数值。 网络工作线程执行完乘法运算后将结果返回给 main 脚本。

假定您在 main.js 中设置了一个在第一个数字发生变化时触发的断点：

并且您还在 worker.js 中设置了一个在工作线程收到消息时触发的断点：

在此应用的 UI 触发这两个断点时修改第一个数字。

在 Threads 窗格中，蓝色箭头指示的是当前选定的线程。 例如，在上面的屏幕截图中，选定的是 Main 线程。

DevTools 所有用于单步调试代码（继续或暂停脚本执行、单步执行下一函数调用、进入并单步执行下一函数调用等）的控件都与该线程有关。换言之，如果您在 DevTools 显示类似以上屏幕截图的内容时按 Resume script execution 按钮，Main 线程会继续执行，但网络工作线程仍将暂停。 Call Stack 和 Scope 部分同样只显示 Main 线程的信息。

如果您想为网络工作线程单步调试代码，或查看其作用域和调用堆栈信息，只需在 Threads 窗格中点击其标签，使其旁边出现蓝色箭头。以下屏幕截图显示的是选择工作线程后调用堆栈和作用域信息的变化情况。同样，如果您要按任何一个单步调试代码按钮（继续执行脚本、单步执行下一函数调用等），该操作将只与工作线程有关。Main 线程不受影响。

美化 JavaScript 外观

在 Sources 面板中查看脚本时，请点击 Pretty-Print 图标，将缩减的脚本转换成更便于人阅读的形式。

下面是缩减的脚本在 Sources 面板中可能的外观：

下面是相同脚本在点击 Pretty-Print 图标后的外观：

在 Sources 中观察变量

利用 Chrome DevTools，您可以轻松地查看整个应用中的多个变量。在 Sources 中观察变量让您可以不必使用控制台，并将精力放在改进代码上。

Sources 面板让您可以观察应用中的变量。此功能位于调试程序边栏的 Watch 部分。利用此功能，您无需将对象重复记录到控制台中。

添加变量

要将变量添加至观察列表，请使用此部分标题右侧的 Add 图标。这将打开内嵌输入窗口，您在这里提供要观察的变量名称。填好后，按 Enter 键将其添加到列表中。

观察窗口将显示变量在添加时的当前值。如果变量未设置或无法找到，值将显示为 。

更新变量

应用继续操作时，变量值会更改。观察列表不是变量的实时视图，除非您正在单步执行。当您使用 断点 单步执行时，观察值会自动更新。要手动重新检查列表中的值，请按这一部分标题右侧的 Refresh 按钮。

请求刷新时，将重新检查当前应用状态。每个观察项目都会更新为当前值。

移除变量

为了确保您观察的内容尽可能少以加快工作速度，您需要从观察列表中移除变量。可以将鼠标悬停在变量上，然后点击右侧的移除图标。

使用控制台

了解如何：打开 DevTools 控制台；堆叠冗余消息或将其显示在各自的行上；清除或保留输出，或者将其保存到文件中；过滤输出，以及访问其他控制台设置。

TL;DR

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

打开控制台

以全屏模式的专用面板形式访问控制台：

或以任何其他面板旁的抽屉式导航栏的形式：

以面板形式打开

要打开专用的 Console 面板，请执行以下操作之一：

• 按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。
• 如果 DevTools 已打开，则按 Console 按钮。

打开 Console 面板时，Console 抽屉式导航栏将自动折叠。

以抽屉式导航栏形式打开

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

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

消息堆叠

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

如果您倾向于为每一个日志使用一个独特的行条目，请在 DevTools 设置中启用 Show timestamps 。

由于每一条消息的时间戳均不同，因此，每一条消息都将显示在各自的行上。

处理控制台历史记录

清除历史记录

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

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

保留历史记录

启用控制台顶部的 Preserve log 复选框可以在页面刷新或更改之间保留控制台历史记录。 消息将一直存储，直至您清除控制台或者关闭标签。

保存历史记录

在控制台中点击右键，然后选择 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 按钮 ( ) 可以过滤控制台输出。您可以按严重性等级、按正则表达式模式或者通过隐藏网络消息的方式进行过滤。

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

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

其他设置

打开 DevTools 设置，转至 General 标签，然后向下滚动到 Console 部分，查看更多控制台设置。

设置及说明
Hide network messages	默认情况下，控制台将报告网络问题。启用此设置将指示控制台不显示这些错误的日志。例如，将不会记录 404 和 500 系列错误。
Log XMLHttpRequests	确定控制台是否记录每一个 XMLHttpRequest。
Preserve log upon navigation	在页面刷新或导航时保留控制台历史记录。
Show timestamps	在调用时向显示的每条控制台消息追加一个时间戳。对于发生特定事件时的调试非常实用。这会停用消息堆叠。
Enable custom formatters	控制 JavaScript 对象的 格式设置 。

诊断并记录到控制台中

TL;DR

• 使用 console.log() 进行基本记录
• 使用 console.error() 和 console.warn() 显示引入注目的消息
• 使用 console.group() 和 console.groupEnd() 对相关消息进行分组，避免混乱
• 使用 console.assert() 显示条件性错误消息

写入控制台

使用 console.log() 方法可以向控制台进行任何基本记录。此方法采用一个或多个表达式作为参数，并将其当前值写入控制台，从而将多个参数级联到一个由空格分隔的行中。

在您的 JavaScript 中执行下面一行代码：

console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());

将在控制台中输出以下内容：

自动填充命令

在控制台中键入内容时，控制台将自动显示与您已键入文字匹配的相关方法的自动填充下拉菜单。其中包括您已经执行的前几个命令。

组织控制台输出

将消息组织到一起

您可以使用组命令将相关输出组织到一起。 console.group() 命令采用一个字符串参数设置组名称。在您的 JavaScript 中调用此命令后，控制台会开始将所有后续输出都组织到一起。

要结束分组，您只需要在完成后调用 console.groupEnd() 。

示例输入：

var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
    console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

示例输出：

嵌套组

日志组也可以彼此嵌套。同时以小片段查看较大的组时，嵌套组非常有用。

下面的示例显示了登录流程身份验证阶段的日志组：

var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
    console.log("User '%s' was authenticated", user);
    // Start nested group
    console.group("Authorizing user '%s'", user);
    if (authorized) {
        console.log("User '%s' was authorized.", user);
    }
    // End nested group
    console.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");

下面是控制台中的嵌套组输出：

自动折叠组

大量使用组时，即时查看所有信息可能不是非常有用。这些情况下，您可以通过调用 console.groupCollapsed() 而不是 console.group() 的方式自动折叠组：

console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
    ...
}
console.groupEnd();

groupCollapsed() 输出：

错误和警告

错误和警告的作用与正常日志的作用相同。唯一的区别是 error() 和 warn() 的样式引人注目。

console.error()

console.error() 方法会显示红色图标和红色消息文本：

function connectToServer(){
    console.error("Error: %s (%i)", "Server is not responding",500);
}
connectToServer();

转变为

console.warn()

console.warn() 方法会显示一个黄色警告图标和相应的消息文本：

if(a.childNodes.length < 3 ) {
    console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}

转变为

断言

console.assert() 方法可以仅在其第一个参数为 false 时有条件地显示错误字符串（其第二个参数）。

简单的断言及其显示方式

下面的代码仅会在属于 list 元素的子节点数大于 500 时在控制台中显示一条错误消息。

console.assert(list.childNodes.length < 500, "Node count is > 500");

断言失败在控制台中的显示方式：

字符串替代和格式设置

传递到任何记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个 % 符号与后面紧跟的一个字母组成，字母指示应用到值的格式。字符串后面的参数会按顺序应用到占位符。

下面的示例使用字符串和数字格式说明符来将值插入到输出字符串中。您将在控制台中看到“Sam has 100 points”。

console.log("%s has %d points", "Sam", 100);

格式说明符的完整列表为：

说明符	输出
%s	将值格式化为字符串
%i 或 %d	将值格式化为整型
%f	将值格式化为浮点值
%o	将值格式化为可扩展 DOM 元素。如同在 Elements 面板中显示的一样
%O	将值格式化为可扩展 JavaScript 对象
%c	将 CSS 样式规则应用到第二个参数指定的输出字符串

本示例使用数字说明符设置 document.childNodes.length 的值的格式。同时使用浮点说明符设置 Date.now() 的值的格式。

代码：

console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());

上一个代码示例的输出：

使用 CSS 设置控制台输出的样式

利用 CSS 格式说明符，您可以自定义控制台中的显示。使用说明符启动字符串，并设置为您希望的样式，作为第二个参数。

尝试使用下面的代码：

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

..将您的日志输出设置为蓝色的大字体：

将 DOM 元素格式化为 JavaScript 对象

默认情况下，DOM 元素将以其 HTML 的表示的形式记录到控制台中，不过有时，您希望以 JavaScript 对象的形式访问 DOM 元素并检查其属性。为此，您可以使用 %o 字符串说明符（参见上文），也可以使用 console.dir 达到同样的效果：

比较类似的数据对象

使用 table() 方法，您可以轻松地查看包含类似数据的对象和数组。调用时，此方法将提取对象的属性并创建一个标头。行数据则来自每个索引的属性值。

基本示例：记录对象数组

在最基本的形式中，您只需要一个由具有相同属性的多个对象组成的数组， table() 命令将执行剩余操作：

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

这将输出：

高级示例：记录特定的属性

可以使用 table() 的第二个参数记录更多高级对象。定义一个包含您希望显示的属性字符串的数组，如下所示：

function Person(firstName, lastName, age){
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

这将输出以下内容：

测量执行时间和对执行进行计数

利用 Console API 测量执行时间和对语句执行进行计数。

TL;DR

• 使用 console.time() 和 console.timeEnd() 跟踪代码执行点之间经过的时间。
• 使用 console.count() 对相同字符串传递到函数的次数进行计数。

测量执行时间

time() 方法可以启动一个新计时器，并且对测量某个事项花费的时间非常有用。将一个字符串传递到方法，以便为标记命名。

如果您想要停止计时器，请调用 timeEnd() 并向其传递已传递到初始值设定项的相同字符串。

控制台随后会在 timeEnd() 方法触发时记录标签和经过的时间。

基本示例

在这里，我们将测量 100 万个新 Array 的初始化：

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

将在控制台中输出下列结果：

Timeline 上的计时器

当 Timeline 记录在 time() 操作期间发生时，它也会对 Timeline 进行标注。如果您想要跟踪应用的操作和操作来自何处，请使此记录。

执行 time() 时 Timeline 上的标注如下所示：

标记 Timeline

注：timeStamp() 方法只能在某个 Timeline 记录正在进行时发挥作用。

Timeline 面板 可以提供引擎时间消耗的完整概览。您可以使用 timeStamp() 从控制台向 Timeline 添加一个标记。 这是一种将您应用中的事件与其他事件进行关联的简单方式。

timeStamp() 会在以下地方对 Timeline 进行标注：

• Timeline 汇总和详细信息视图中的黄色垂直线。
• 会向事件列表添加一条记录。

以下示例代码：

function AddResult(name, result){
    console.timeStamp("Adding result");
    var text = name + ': ' + result;
    var results = document.getElementById("results");
    results.innerHTML += (text + "<br>");
}

将生成下面的 Timeline 时间戳：

对语句执行进行计数

使用 count() 方法记录提供的字符串，以及相同字符串已被提供的次数。当完全相同的语句被提供给同一行上的 count() 时，此数字将增大。

将 count() 与某些动态内容结合使用的示例代码：

function login(user) {
    console.count("Login called for user " + user);
}

users = [ // by last name since we have too many Pauls.
    'Irish',
    'Bakaus',
    'Kinlan'
];

users.forEach(function(element, index, array) {
    login(element);
});

login(users[0]);

代码示例的输出：

异常和错误处理

如果您可以了解背后的详细信息，页面异常和 JavaScript 错误会非常有用。在页面引发异常或脚本产生错误时，Console 可以提供具体、可靠的信息来帮助您定位和纠正问题。

在控制台中，您可以跟踪异常和引发异常的执行路径，显式或隐式捕捉异常（或忽略它们），甚至设置错误处理程序来自动收集和处理异常数据。

TL;DR

• 触发异常时启用 Pause on Exceptions 来调试代码上下文。
• 使用 console.trace 打印当前的 JavaScript 调用堆栈。
• 使用 console.assert() 在您的代码中放置断言和引发异常。
• 使用 window.onerror 记录浏览器中发生的错误。

跟踪异常

发生错误时，请打开 DevTools 控制台 ( Ctrl+Shift+J / Cmd+Option+J ) 查看 JavaScript 错误消息。每一条消息都有一个指向文件名的链接，文件名带有您可以导航到文件的行号。

异常示例：

视图异常堆叠追踪

导致错误的执行路径并不总是非常明显。完整的 JavaScript 调用堆栈在控制台中会伴随着异常。展开这些控制台消息可以查看堆栈框架和导航到代码中的相应位置：

出现 JavaScript 异常时暂停

下一次引发异常时，请暂停 JavaScript 执行并检查其调用堆栈、范围变量以及您应用的状态。利用 Scripts 面板底部的三态停止按钮，您可以在不同的异常处理模式之间切换：

选择暂停所有异常或仅暂停未捕捉的异常，您也可以集中忽略异常。

打印堆叠追踪

通过将日志消息输出到控制台可更好地了解网页的行为。通过包含关联的堆叠追踪让日志条目的信息更丰富。有多种方式可以实现此目标。

Error.stack

每个 Error 对象都有一个包含堆叠追踪的字符串属性命名的堆栈：

console.trace()

使用可以打印当前 JavaScript 调用跟踪的 console.trace() 调用设置您的代码：

console.assert()

通过将带有错误条件的 console.assert() 作为第一个参数调用，在您的 JavaScript 代码中放置断言。当此表达式评估为 false 时，您将看到一条相应的 Console 记录：

如何检查堆叠追踪来查找触发器

我们来看一下如何使用刚刚学习的工具，并找出错误的真正原因。下面是一个包含两个脚本的简单 HTML 页面：

当用户点击页面时，段落将更改其内部文本，将调用 lib.js 提供的 callLibMethod() 函数。

此函数会输出一个 console.log ，然后调用 console.slog ，后者不是一种由 Console API 提供的方法。调用应触发一个错误。

在页面运行的时候点击页面时，将触发下面的错误：

点击箭头可以展开错误消息：

控制台会告诉您错误在 lib.js 的第 4 行触发，此脚本在 addEventListener 回调（匿名函数）的 script.js 中的第 3 行调用。

这是一个非常简单的示例，不过，即使最复杂的日志跟踪调试也遵循相同的流程。

使用 window.onerror 处理运行时异常

Chrome 会公开 window.onerror 处理程序函数，每当 JavaScript 代码执行中发生错误时都会调用此函数。当 JavaScript 异常每次在窗口上下文中引发并且未被 try/catch 块捕捉时，调用此函数时还会调用异常的消息、引发异常的文件的网址、该文件中的行号，三者按照此顺序作为三个参数传递。

举例来说，使用 AJAX POST 调用设置一个错误处理程序，用于收集未捕捉异常的相关信息并将其报告回服务器，您会发现这样非常实用。这样，您可以记录用户浏览器中发生的所有错误并获得相关通知。

使用 window.onerror 的示例：

Console API 参考

使用 Console API 可以向控制台写入信息、创建 JavaScript 配置文件，以及启动调试会话。

console.assert(expression, object)

在被评估的表达式为 false 时向控制台写入一个 错误 。

function greaterThan(a,b){
  console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(5,6);

console.clear()

清除控制台。

console.clear();

如果已启用 Preserve log 复选框， console.clear() 将停用。 不过，在控制台处于聚焦状态时，按 clear console 按钮 ( ) 或者输入 Ctrl+L 快捷键仍然有效。

如需了解详细信息，请参阅 清除控制台 。

console.count(label)

写入在同一行使用相同标签调用 count() 的次数。

function login(name){
  console.count(name + ' logged in');
}

请参阅 对语句执行进行计数 ，查看更多示例。

console.debug(object [, object, …])

与 console.log() 作用相同。

console.dir(object)

输出以 JavaScript 形式表示的指定对象。如果正在记录的对象是 HTML 元素，将输出其以 DOM 形式表示的属性，如下所示：

console.dir(document.body);

请参阅 字符串替代和格式设置 ，了解功能相同的对象格式化程序 ( %O ) 和其他信息。

console.dirxml(object)

如果可以，输出 object 子级元素的 XML 表示形式，否则输出其 JavaScript 表示形式。 在 HTML 和 XML 元素上调用 console.dirxml() 等同于调用 console.log() 。

console.dirxml(document);

console.error(object [, object, …])

输出一条类似于 console.log() 的消息，将消息设置成错误样式，并在调用此方法的地方包含一个堆叠追踪。

console.error('error: name is undefined');

console.group(object[, object, …])

启动一个带有可选标题的新日志组。以可视化方式将在 console.group() 后、 console.groupEnd() 前发生的所有控制台输出组合在一起。

function name(obj){
  console.group('name');
  console.log('first: ', obj.first);
  console.log('middle: ', obj.middle);
  console.log('last: ', obj.last);
  console.groupEnd();
}

name({"first":"Wile","middle":"E","last":"Coyote"});

您还可以嵌套组：

function name(obj){
  console.group('name');
  console.log('first: ', obj.first);
  console.log('middle: ', obj.middle);
  console.log('last: ', obj.last);
  console.groupEnd();
}

function doStuff(){
  console.group('doStuff()');
  name({"first":"Wile","middle":"E","last":"coyote"});
  console.groupEnd();
}

doStuff();

console.groupCollapsed(object[, object, …])

创建一个初始处于折叠状态而不是打开状态的新日志组。

console.groupCollapsed('status');
console.log("peekaboo, you can't see me");
console.groupEnd();

console.groupEnd()

关闭日志组。相关示例请参阅 console.group 。

console.info(object [, object, …])

输出一条类似 console.log() 的消息，但同时在输出旁显示一个图标（带白色“i”的蓝色圆圈）。

console.log(object [, object, …])

在控制台中显示一条消息。将一个或多个对象传递到此方法。每个对象都会进行评估并级联到一个由空格分隔的字符串中。

console.log('Hello, Logs!');

格式说明符

您传递的第一个对象可以包含一个或多个 格式说明符 。格式说明符由百分号 ( % ) 与紧跟其后面的一个字母组成，字母指示要应用的格式。

相关指南：

• 组织控制台输出

console.profile([label])

启动一个带有可选标签的 JavaScript CPU 配置文件。要完成配置文件，请调用 console.profileEnd() 。 每一个配置文件都会添加到 Profiles 面板中。

function processPixels(){
  console.profile("processPixels()");
  // later, after processing pixels
  console.profileEnd();
}

console.profileEnd()

停止当前的 JavaScript CPU 分析会话（如果正在进行此会话），并将报告输出到 Profiles 面板中。

相关示例请参阅 console.profile() 。

console.time(label)

启动一个具有关联标签的新计时器。使用相同标签调用 console.timeEnd() 时，定时器将停止，经过的时间将显示在控制台中。计时器值精确到亚毫秒。传递到 time() 和 timeEnd() 的字符串必须匹配，否则计时器不会结束。

console.time("Array initialize");
var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
}
console.timeEnd("Array initialize");

console.timeEnd(label)

停止当前的计时器（如果正在运行一个计时器），并将计时器标签和经过的时间输出到控制台。

相关示例请参阅 console.time() 。

console.timeStamp([label])

在录制会话期间向 Timeline 添加一个事件。

console.timeStamp('check out this custom timestamp thanks to console.timeStamp()!');

相关指南：

• 使用 Timeline 工具

console.trace(object)

从调用此方法的位置输出一个堆叠追踪。

console.trace();

console.warn(object [, object, …])

输出一条类似 console.log() 的消息，但同时在记录的消息旁显示一个黄色警告图标。

console.warn('user limit reached!');

评估表达式

从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态。

DevTools 控制台让您可通过特定方式了解您页面中的项目状态。通过使用支持 JavaScript 的多个功能，再结合运用您的 JavaScript 知识，评估您可以输入的任何表达式。

TL;DR

• 只需键入表达式即可对其进行评估。
• 使用一个快捷键选择元素。
• 使用 inspect() 检查 DOM 元素和 JavaScript 堆对象。
• 使用 $0 - 4 访问最近选择的元素和对象。

查看表达式

按下 Enter 键后，此控制台可评估您提供的任何 JavaScript 表达式。输入表达式后，系统将显示属性名称建议；控制台还会提供自动填充和 Tab 自动补全功能。

如果有多个匹配项，↑ 和 ↓ 在它们之间循环切换。 按 → 键可选择当前建议。如果有一个建议，按 Tab 键选中它。

选择元素

使用下列快捷键选择元素：

快捷键及说明
$()	返回与指定 CSS 选择器匹配的第一个元素。 document.querySelector() 的快捷键。
$$()	返回一个与指定 CSS 选择器匹配的所有元素数组。等同于 document.querySelectorAll() 。
$x()	返回一个与指定 XPath 匹配的元素数组。

目标选择的示例：

$('code') // Returns the first code element in the document.
$$('figure') // Returns an array of all figure elements in the document.
$x('html/body/p') // Returns an array of all paragraphs in the document body.

检查 DOM 元素和 JavaScript 堆对象

inspect() 函数选取一个 DOM 元素或 JavaScript 引用作为一个参数。如果您提供一个 DOM 元素，则 DevTools 进入“Elements”面板并显示该元素。如果您提供一个 JavaScript 引用，则它进入“Profile”面板。

当此代码在该页面上的控制台中执行时，它会抓取此图并在“Elements”面板上显示它。这会利用到 $_ 属性以获取最后一个评估的表达式的输出。

$('[data-target="inspecting-dom-elements-example"]')
inspect($_)

访问最近选择的元素和对象

控制台在变量中存储最后使用的五个元素和对象，以方便访问。使用 $0 - 4 从控制台访问这些元素。请记住，计算机从 0 开始计算，这意味着最新的项目是 $0，最早的项目是 $4。

监控事件

TL;DR

• 使用 monitorEvents() 侦听特定类型的事件。
• 使用 unmonitorEvents() 停止侦听。
• 使用 getEventListeners() 获取 DOM 元素的侦听器。
• 使用“Event Listeners Inspector”面板获取有关事件侦听器的信息。

监控事件

monitorEvents() 方法指示 DevTools 记录与指定目标有关的信息。

第一个参数是要监控的对象。如果不提供第二个参数，所有事件都将返回。若要指定要侦听的事件，则传递一个字符串或一个字符串数组作为第二个参数。

在页面正文上侦听“click”事件：

monitorEvents(document.body, "click");

如果监控的事件是受支持的 事件类型 ，DevTools 将其映射到一组标准事件名称，则该方法侦听该类型的事件。

Command Line API 可提供完整的 事件类型 与其涵盖的事件的对应情况。

如需停止监控事件，请调用 unmonitorEvents() 方法并为其提供对象以停止监控。

停止侦听 body 对象上的事件：

unmonitorEvents(document.body);

查看在对象上注册的事件侦听器

getEventListeners() API 返回在指定对象上注册的事件侦听器。

返回值是一个对象，其包含每个注册的事件类型（例如， click 或 keydown ）数组。每个数组的成员是描述为每个类型注册的侦听器的对象。例如，以下代码列出了在文档对象上注册的所有事件侦听器：

getEventListeners(document);

如果在指定对象上注册了多个侦听器，则数组包含每个侦听器的成员。以下示例中，在“#scrollingList”元素上为 mousedown 事件注册了两个事件侦听器：

进一步展开每个对象以查看它们的属性：

查看在 DOM 元素上注册的事件侦听器

默认情况下，Elements Inspector 中的 Event Listeners 面板显示附加到页面的所有事件：

过滤器将事件限制在选定的节点：

通过展开对象，此面板显示事件侦听器详细信息。在此示例中，此页面拥有两个通过 jQuery 附加的事件侦听器：

Command Line API 参考

Command Line API 包含一个用于执行以下常见任务的便捷函数集合：选择和检查 DOM 元素，以可读格式显示数据，停止和启动分析器，以及监控 DOM 事件。

注：此 API 仅能通过控制台本身获取。您无法通过网页上的脚本访问 Command Line API。

$_

$_ 返回最近评估的表达式的值。

在以下示例中，对一个简单的表达式 ( 2 + 2 ) 进行评估。然后评估 $_ 属性，其包含相同的值：

在下一个示例中，已评估的表达式最初包含一个名称数组。评估 $_.length 以发现数组的长度， $_ 中存储的值变为最新评估的表达式，即 4：

$0 - $4

$0 、 $1 、 $2 、 $3 和 $4 命令用作在 Elements 面板中检查的最后五个 DOM 元素或在 Profiles 面板中选择的最后五个 JavaScript 堆对象的历史参考。 $0 返回最近一次选择的元素或 JavaScript 对象， $1 返回仅在最近一次之前选择的元素或对象，依此类推。

在以下示例中，在 Elements 面板中选择一个具有类 medium 的元素。在 Console 抽屉式导航栏中， $0 已评估，并显示相同的元素：

下图显示的是在同一个页面中选择的一个不同的元素。 $0 现在指的是新选择的元素，而 $1 返回以前选择的元素：

$(selector)

$(selector) 返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。此函数等同于 document.querySelector() 函数。

以下示例在文档中返回第一个 <img> 元素的引用：

右键点击返回的结果并选择“Reveal in Elements Panel”以在 DOM 中查找它，或选择“Scroll in to View”以在页面上显示它。

以下示例返回当前选择的元素的引用，并显示它的 src 属性：

注：如果您在使用库，例如，使用 $ 的 jQuery，则此功能将被覆盖， $ 将与该库的实现对应。

$(selector)

$$(selector) 返回与给定 CSS 选择器匹配的元素数组。此命令等同于调用 document.querySelectorAll() 。

以下示例使用 $$() 在当前文档中创建一个所有 <img> 元素的数组，并显示每个元素的 src 属性值：

var images = $$('img');
for (each in images) {
    console.log(images[each].src);
}

注：在控制台中按 Shift + Enter 以开始一个新行，无需执行脚本。

$x(path)

$x(path) 返回一个与给定 XPath 表达式匹配的 DOM 元素数组。

例如，以下命令返回页面上的所有 <p> 元素：

$x("//p")

以下示例返回包含 <a> 元素的所有 <p> 元素：

$x("//p[a]")

clear()

clear() 清除其历史记录的控制台。

clear();

copy(object)

copy(object) 将指定对象的字符串表示形式复制到剪贴板。

copy($0);

debug(function)

调用指定的函数时，将触发调试程序，并在 Sources 面板上使函数内部中断，从而允许逐行执行代码并进行调试。

debug(getData);

使用 undebug(fn) 停止函数中断，或使用 UI 停用所有断点。

如需了解有关断点的详细信息，请参阅 使用断点进行调试 。

dir(object)

dir(object) 显示所有指定对象的属性的对象样式列表。此方法等同于 Console API 的 console.dir() 方法。

以下示例显示在命令行中直接评估 document.body 和使用 dir() 显示相同元素之间的差异：

document.body;
dir(document.body);

如需了解详细信息，请参阅 Console API 中的 console.dir() ) 条目。

dirxml(object)

dirxml(object) 输出以 XML 形式表示的指定对象，如 Elements 标签中所示。此方法等同于 console.dirxml() 方法。

inspect(object/function)

inspect(object/function) 在相应的面板中打开并选择指定的元素或对象：针对 DOM 元素使用 Elements 面板，或针对 JavaScript 堆对象使用 Profiles 面板。

以下是在“Elements”面板中打开 document.body 的示例：

inspect(document.body);

当传递要检查的函数时，此函数在 Sources 面板中打开文档以供您检查。

getEventListeners(object)

getEventListeners(object) 返回在指定对象上注册的事件侦听器。返回值是一个对象，其包含每个注册的事件类型（例如，“click”或“keydown”）数组。每个数组的成员是描述为每个类型注册的侦听器的对象。例如，下面列出了在文档对象上注册的所有事件侦听器：

getEventListeners(document);

如果在指定对象上注册了多个侦听器，则数组包含每个侦听器的成员。以下示例中，在 #scrollingList 元素上为“mousedown”事件注册了两个事件侦听器：

您可以进一步展开每个对象以查看他们的属性：

keys(object)

keys(object) 返回一个包含属于指定对象的属性名称的数组。如需获取相同属性的关联值，请使用 values() 。

例如，假设您的应用定义了以下对象：

var player1 = { "name": "Ted", "level": 42 }

假设在全局命名空间中定义了 player1 （为简单起见），那么，在控制台输入 keys(player1) 和 values(player1) 会生成以下内容：

monitor(function)

调用指定函数时，系统会向控制台记录一条消息，其中指明函数名称及在调用时传递到该函数的参数。

function sum(x, y){
    return x + y;
}
monitor(sum);

使用 unmonitor(function) 停止监控。

monitorEvents(object[, events])

当在指定对象上发生一个指定事件时，将 Event 对象记录到控制台。您可以指定一个要监控的单独事件、一个事件数组或一个映射到预定义事件集合的常规事件“类型”。请参阅以下示例。

以下命令监控 window 对象上的所有 resize 事件。

monitorEvents(window, "resize");

下面定义一个在 window 对象上同时监控“resize”和“scroll”事件的数组：

monitorEvents(window, ["resize", "scroll"])

您还可以指定一个可用的事件“类型”、映射到预定义事件集的字符串。下表列出了可用的事件类型及其相关的事件映射：

事件类型和对应的已映射事件
mouse	“mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key	“keydown”, “keyup”, “keypress”, “textInput”
touch	“touchstart”, “touchmove”, “touchend”, “touchcancel”
control	“resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

例如，以下示例为 Elements 面板上当前选择的输入文本字段上的所有对应 key 事件使用使用“key”事件类型。

monitorEvents($0, "key");

下面是在文本字段中输入字符后的一个输出示例：

profile([name]) and profileEnd([name])

profile() 使用可选的名称启动一个 JavaScript CPU 分析会话。 profileEnd() 在 Profile 面板中完成分析，并显示结果。（另请参阅 加速 JavaScript 执行 。）

开始分析：

profile("My profile")

在“Profiles”面板中停止分析并显示结果：

profileEnd("My profile")

也可以嵌入配置文件。例如，这在任意顺序下都起作用：

profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

“profiles”面板中的结果

注：一次可运行多个 CPU 配置文件，不需要您按创建顺序结束它们。

table(data[, columns])

通过传入含可选列标题的数据对象记录具有表格格式的对象数据。例如，要在控制台中显示使用 table 的名称列表，您需要执行：

var names = {
    0: { firstName: "John", lastName: "Smith" },
    1: { firstName: "Jane", lastName: "Doe" }
};
table(names);

undebug(function)

undebug(function) 可停止调试指定函数，以便在调用函数时，不再调用调试程序。

undebug(getData);

unmonitor(function)

unmonitor(function) 可停止监控指定函数。它可与 monitor(fn) 结合使用。

unmonitor(getData);

unmonitorEvents(object[, events])

unmonitorEvents(object[, events]) 可停止针对指定对象和事件的事件监控。例如，以下命令可停止 window 对象上的所有事件监控：

unmonitorEvents(window);

您也可以有选择性地停止监控某个对象上的特定事件。例如，以下代码可开始对当前所选元素上所有鼠标事件的监控，然后停止监控“mousemove”事件（可能会减少控制台输出的噪音）：

monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values(object)

values(object) 返回一个包含属于指定对象的所有属性值的数组。

values(object);

开始分析运行时性能

运行时性能是您的页面在运行时的效果，而不是加载。本教程教你如何使用Chrome DevTools Performance面板分析运行时性能。在 RAIL 模型方面，您在本教程中学习的技能对分析页面的响应，动画和空闲阶段很有用。

注意：本教程基于Chrome 59.如果您使用其他版本的Chrome，则DevTools的UI和功能可能会有所不同。检查 chrome://help 您正在运行的Chrome版本。

开始吧

在本教程中，您可以在实际页面上打开DevTools，并使用“性能”面板查找页面上的性能瓶颈。

1. 以 隐身模式 打开Google Chrome 。无痕模式可确保Chrome运行在一个干净的状态。例如，如果您安装了大量扩展，则这些扩展可能会在您的性能测量中产生噪音。

2. 在您的隐身窗口中加载以下页面。这是您要简要介绍的演示。该页面显示了一堆上下移动的小蓝色方块。

   https://googlechrome.github.io/devtools-samples/jank/

3. 按Command+ Option+ I（Mac）或 Control+ Shift+ I（Windows，Linux）打开DevTools。

   ​

   图1 。左边的演示，右边的DevTools

   ​

   ​

   注意：对于其余的屏幕截图，DevTools将被拆除 到一个单独的窗口 ，以便您可以更好地看到它的内容。

   ​

模拟移动CPU

移动设备的CPU功耗远低于台式机和笔记本电脑。无论何时配置页面，使用CPU调节来模拟页面在移动设备上的表现。

1. 在DevTools中，单击“ 性能 ”选项卡。

2. 确保 屏幕截图 复选框已启用。

3. 单击 捕获设置 。DevTools显示与捕获性能指标的相关设置。

4. 对于 CPU ，请选择 2x减速 。DevTools控制CPU，使其比平常慢2倍。

   ​

   图2 。CPU节流，概述为蓝色

   ​

   ​

   注意：测试其他页面时，如果要确保它们在低端移动设备上运行良好，请将CPU限制设置为 20倍的速度 。这个演示对于20倍的减速不能很好的工作，所以它只是使用2x减速来进行教学。

   ​

设置演示

很难创建一个适用于本网站所有读者的运行时性能演示。此部分可让您自定义演示，以确保您的体验与本教程中看到的屏幕截图和说明相比是一致的，无论您的具体设置如何。

1. 继续点击 添加10 ，直到蓝色方块移动明显比以前慢。在高端机器上，可能需要大约20次点击。

2. 点击 优化 。蓝色方块应更快更顺利地移动。

   ​

   注意：如果在优化版本和未优化版本之间看不到显着的差异，请尝试单击“减少 10” 几次，然后重试。如果您添加太多的蓝色方块，您只需要最大化CPU，您将不会看到两个版本的结果有重大差异。

   ​

3. 点击 取消优化 。蓝色正方形移动较慢，再次更多地打。

记录运行时性能

当您运行页面的优化版本时，蓝色方块移动速度更快。这是为什么？这两个版本应该在相同的时间量内移动每个正方形相同的空间。在“性能”面板中进行录制，以了解如何检测未优化版本中的性能瓶颈。

1. 在DevTools中，单击 记录 。DevTools在页面运行时捕获性能指标。

   ​

   图3 ：分析页面

   ​

2. 等待几秒钟

3. 单击 停止 。DevTools停止录制，处理数据，然后在“性能”面板上显示结果。

   ​

   图4 ：配置文件的结果

   ​

哇，这是一个压倒性的数据量。不用担心，很快就会变得更加有道理。

分析结果

记录页面的性能后，您可以测量页面性能的差异，并查找原因。

分析每秒帧数

测量任何动画性能的主要指标是每秒帧数（FPS）。当动画运行在60 FPS时，用户很高兴。

1. 看看 FPS 图表。每当您看到 FPS 上方的红色条纹 ，这意味着帧率下降得如此之低，以致可能会损害用户体验。一般来说，绿色条越高，FPS越高。

   ​

   图5 ：FPS图，概述为蓝色

   ​

2. 在 FPS 图表下方，您可以看到 CPU 图表。中相应的颜色 CPU 图表对应于颜色 摘要 选项卡，在性能板的底部。 CPU 图表充满色彩的事实意味着CPU在录制过程中被最大化。无论何时看到CPU长时间的长时间运行，都可以找到减少工作量的方法。

   ​

   图6 ：CPU图和摘要选项卡，以蓝色概述

   ​

3. 将鼠标悬停在 FPS ， CPU 或 NET 图表上。DevTools在该时间点显示页面的屏幕截图。左右移动鼠标重播录音。这被称为擦洗，它有助于手动分析动画的进度。

   ​

   图7 ：在录像的2000ms标记周围查看该页面的屏幕截图

   ​

4. 在“ 框架” 部分，将鼠标悬停在其中一个绿色方块上。DevTools向您显示该特定框架的FPS。每帧可能远低于60 FPS的目标。

   ​

   图8 ：悬停在框架上

   ​

当然，在这个演示中，很显然页面效果不佳。但是在实际的情况下，可能不太清楚，所以让所有这些工具进行测量就会派上用场。

奖金：打开FPS表

另一个便利的工具是FPS计费器，它可以在页面运行时为FPS提供实时估计。

1. 按Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux）打开命令菜单。

2. 开始键入 Rendering 命令菜单，然后选择 显示渲染 。

3. 在“ 渲染 ”选项卡中，启用 FPS仪表 。您的视口右上方会显示一个新的叠加层。

   ​

   图9 ：FPS仪表

   ​

4. 禁用 FPS仪表 ，然后按Escape关闭“ 渲染 ”选项卡。您将不会在本教程中使用它。

找到瓶颈

现在，您已经衡量和验证了动画效果不佳，下一个问题是：为什么？

1. 注意摘要选项卡。当没有选择任何事件时，此选项卡显示活动细目。页面花费大部分时间渲染。由于表现是减少工作的艺术，您的目标是减少花费在渲染工作上花费的时间。

   ​

   图10 ：摘要选项卡，概述为蓝色

   ​

2. 展开 主要 部分。DevTools随着时间的推移，显示主线程上的活动的火焰图表。随着时间的推移，x轴表示录制。每个酒吧代表一个事件。更广泛的酒吧意味着事件花费更长时间。y轴表示调用堆栈。当您看到彼此堆叠的事件时，这意味着上部事件导致较低的事件。

   ​

   图11 ：主要部分，概述为蓝色

   ​

3. 录音中有很多数据。通过单击，按住并将鼠标拖动到“ 概述 ”（即包含 FPS ， CPU 和 NET 图表的部分）上， 放大单个 动画帧激活 事件。的 主要 部分和 摘要 标签仅显示记录的所选择的部分的信息。 **

   ​

   图12 ：放大单个动画帧激活事件

   ​

   ​

   注：缩放另一种方法是把重点放在 主要 通过单击其背景或选择事件部分，然后按 W，A，S，和D键。

   ​

4. 注意 动画框架激活 事件右上角的红色三角形。每当你看到一个红色的三角形，这是一个警告，可能会有一个与此事件相关的问题。

   ​

   注意：只要执行回调，就会发生 Animation Frame Fired 事件 requestAnimationFrame() 。

   ​

5. 单击 动画帧激活 事件。“ 摘要 ”选项卡现在显示有关该事件的信息。注意 显示 链接。单击导致DevTools突出显示启动“ 动画框架 激活” 事件的事件。还要注意 app.js：94的 链接。单击它将跳转到源代码中的相关行。

   ​

   图13 ：有关Animation Frame Fired事件的更多信息

   ​

   ​

   注意：选择事件后，使用箭头键选择旁边的事件。

   ​

6. 在 app.update 事件下，有一堆紫色的事件。如果它们更宽，看起来好像每个人都可能有一个红色的三角形。现在单击一个紫色 布局 事件。“ 摘要 ”选项卡中的DevTools提供有关该事件的更多信息。事实上，有一个关于强制回流的警告（另外一个是布局）。

7. 在 摘要 选项卡中，单击 布局强制 下的 app.js：70 链接。DevTools将您带到强制布局的代码行。 **

   ​

   图13 ：导致强制布局的代码行

   ​

   ​

   注意：此代码的问题是，在每个动画框架中，它会更改每个正方形的样式，然后查询页面上每个Square的位置。由于样式改变了，浏览器不知道每个Square的位置是否改变了，所以它必须重新布局方块才能计算它的位置。请参阅 避免强制同步布局 了解更多信息。

   ​

唷！这很重要，但您现在已经在分析运行时性能的基本工作流程中有了坚实的基础。做得好。

奖金：分析优化版本

使用您刚刚学到的工作流程和工具，单击演示中的 优化 以启用 优化 的代码，进行另一个性能记录，然后分析结果。从 主要 部分火焰图表中的改进帧速率到减少事件可以看出，优化版本的应用程序的工作量少得多，从而实现更好的性能。

注意：即使这个“优化”版本并不是很好，因为它仍然操纵 top 每个Square 的属性。一个更好的方法是坚持只影响合成的属性。有关详细信息，请参阅 为动画使用变换和不透明度更改 。

下一步

理解性能的基础是RAIL模型。该模式向您介绍对用户最重要的性能指标。请参阅 使用RAIL模型测量性能 以了解更多信息。

为了更好的与性能面板，练习使完美。尝试分析自己的页面并分析结果。如果您对结果有任何疑问， 请打开标记为“Stack Overflow”的堆栈问题 google-chrome-devtools 。如果可能的话，将屏幕截图或链接包含在可重复的页面中。

为了真正掌握运行时性能，您已经了解了浏览器如何将HTML，CSS和JS转换为屏幕上的像素。最好的开始是 渲染性能概述 。 一个框架的解剖学 深入细节。

最后，有很多方法可以提高运行时性能。本教程重点介绍一个特定的动画瓶颈，让您可以通过“性能”面板进行重点介绍，但这只是您可能遇到的许多瓶颈之一。渲染性能系列的其余部分有很多好的提示，用于改进运行时性能的各个方面，如：

• 优化JS执行
• 减少风格计算的范围和复杂性
• 避免大型，复杂的布局和布局颠覆
• 简化绘制复杂性，减少绘制面积
• 坚持仅用于Compositor的属性和管理层计数
• 消除您的输入处理程序

分析运行时性能

用户希望页面可以交互并且非常流畅。像素管道的每个阶段均可能出现卡顿现象。 了解用于确定和解决会降低运行时性能的常见问题的工具和策略。

TL;DR

• 不要编写会强制浏览器重新计算布局的 JavaScript。将读取和写入功能分开，并首先执行读取。
• 不要使您的 CSS 过于复杂。减少使用 CSS 并保持 CSS 选择器简洁。
• 尽可能地避免布局。选择根本不会触发布局的 CSS。
• 绘制比任何其他渲染活动花费的时间都要多。请留意绘制瓶颈。

JavaScript

JavaScript 计算，特别是会触发大量视觉变化的计算会降低应用性能。 不要让时机不当或长时间运行的 JavaScript 影响用户交互。

工具

进行 Timeline 记录 ，并找出疑似较长的 Evaluate Script 事件。 如果您发现存在任何这样的事件，可以启用 JS 分析器 并重新做记录，以便获取究竟调用了哪些 JS 函数以及调用每个函数需要多长时间的更详细信息。

如果您注意到 JavaScript 中出现较多的卡顿现象，您可能需要进一步分析并收集 JavaScript CPU 配置文件。CPU 配置文件会显示执行时间花费在页面的哪些函数上。在 加快 JavaScript 执行速度 中了解如何创建 CPU 配置文件。

问题

下表对一些常见 JavaScript 问题和潜在解决方案进行了说明：

问题	示例	解决方案
大开销输入处理程序影响响应或动画。	触摸、视差滚动。	让浏览器尽可能晚地处理触摸和滚动，或者绑定侦听器（请参阅 Paul Lewis 运行时性能检查单中的大开销输入处理程序 ）。
时机不当的 JavaScript 影响响应、动画、加载。	页面加载后用户向右滚动、setTimeout/setInterval。	优化 JavaScript 执行 ：使用 requestAnimationFrame 、使 DOM 操作遍布各个帧、使用网络工作线程。
长时间运行的 JavaScript 影响响应。	DOMContentLoaded 事件 由于 JS 工作过多而停止。	将纯粹的计算工作转移到 网络工作线程 。如果您需要 DOM 访问权限，请使用 requestAnimationFrame （另请参阅 优化 JavaScript 执行 ）。
会产生垃圾的脚本影响响应或动画。	任何地方都可能发生垃圾回收。	减少编写会产生垃圾的脚本（请参阅 Paul Lewis 运行时性能检查单中的动画垃圾回收 ）。

样式

样式更改开销较大，在这些更改会影响 DOM 中的多个元素时更是如此。 只要您将样式应用到元素，浏览器就必须确定对所有相关元素的影响、重新计算布局并重新绘制。

相关指南：

• 缩小样式计算的范围并降低其复杂性

工具

进行 Timeline 记录 。检查大型 Recalculate Style 事件的记录（以紫色显示）。

点击 Recalculate Style 事件可以在 Details 窗格中查看更多相关信息。 如果样式更改需要较长时间，对性能的影响会非常大。 如果样式计算会影响大量元素，则需要改进另一个方面。

要降低 Recalculate Style 事件的影响，请执行以下操作：

• 使用 CSS 触发器 了解哪些 CSS 属性会触发布局、绘制与合成。 这些属性对渲染性能的影响最大。
• 请转换到影响较小的属性。请参阅 坚持仅合成器属性和管理层计数 ，寻求更多指导。

问题

下表对一些常见样式问题和潜在解决方案进行了说明：

问题	示例	解决方案
大开销样式计算影响响应或动画。	任何会更改元素几何形状的 CSS 属性，如宽度、高度或位置；浏览器必须检查所有其他元素并重做布局。	避免会触发布局的 CSS。
复杂的选择器影响响应或动画。	嵌套选择器强制浏览器了解与所有其他元素有关的全部内容，包括父级和子级。	在 CSS 中引用只有一个类的元素。

相关指南：

• 缩小样式计算的范围并降低其复杂性

布局

布局（或 Firefox 中的自动重排）是浏览器用来计算页面上所有元素的位置和大小的过程。 网页的布局模式意味着一个元素可能影响其他元素；例如 <body> 元素的宽度一般会影响其子元素的宽度以及树中各处的节点，等等。这个过程对于浏览器来说可能很复杂。 一般的经验法则是，如果在帧完成前从 DOM 请求返回几何值，您将发现会出现“强制同步布局”，在频繁地重复或针对较大的 DOM 树执行操作时这会成为性能的大瓶颈。

相关指南：

• 避免布局抖动
• 诊断强制同步布局

工具

Chrome DevTools 的 Timeline 可以确定页面何时会导致强制同步布局。 这些 Layout 事件使用红色竖线标记。

“布局抖动”是指反复出现强制同步布局情况。 这种情况会在 JavaScript 从 DOM 反复地写入和读取时出现，将会强制浏览器反复重新计算布局。 要确定布局抖动，请找到多个强制同步布局警告（如上方屏幕截图所示）的模式。

问题

下表对一些常见布局问题和潜在解决方案进行了说明：

问题	示例	解决方案
强制同步布局影响响应或动画。	强制浏览器在像素管道中过早执行布局，导致在渲染流程中重复步骤。	先批处理您的样式读取，然后处理任何写入（另请参阅 避免大型、复杂的布局和布局抖动 ）。
布局抖动影响响应或动画。	形成一个使浏览器进入读取-写入-读取写入周期的循环，强制浏览器反复地重新计算布局。	使用 FastDom 内容库 自动批处理读取-写入操作。

绘制与合成

绘制是填充像素的过程。这经常是渲染流程开销最大的部分。 如果您在任何情况下注意到页面出现卡顿现象，很有可能存在绘制问题。

合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。 大多数情况下，如果坚持仅合成器属性并避免一起绘制，您会看到性能会有极大的改进，但是您需要留意过多的层计数（另请参阅 坚持仅合成器属性和管理层计数 ）。

工具

想要了解绘制花费多久或多久绘制一次？请在 Timeline 面板上启用 Paint profiler ，然后 进行记录 。

如果您的大部分渲染时间花费在绘制上，即表示存在绘制问题。

请查看 rendering settings 菜单，进一步了解可以帮助诊断绘制问题的配置。

问题

下表对一些常见绘制与合成问题及潜在解决方案进行了说明：

问题	示例	解决方案
绘制风暴影响响应或动画。	较大的绘制区域或大开销绘制影响响应或动画。	避免绘制、提升将要移动到自有层的元素，使用变形和不透明度（请参阅 降低绘制的复杂性并减少绘制区域 ）。
层数激增影响动画。	使用 translateZ(0) 过度提升过多的元素会严重影响动画性能。	请谨慎提升到层，并且仅在您了解这样会有切实改进时提升到层（请参阅 坚持仅合成器属性和管理层计数 ）。

性能分析参考

此页面是与Chrome分析工具分析性能相关的功能的综合参考。

有关如何使用Chrome DevTools分析页面性能的指导教程，请参阅 开始分析运行时性能 。

记录表现

记录运行时性能

记录运行时性能，当您要分析页面在运行时的性能，而不是加载。

1. 转到要分析的页面。

2. 单击DevTools中的“ 性能 ”选项卡。

3. 单击 记录 。

   ​

   图1 。 记录 ，概述为蓝色

   ​

4. 与页面互动。DevTools记录由于您的互动而发生的所有页面活动。

5. 再次单击 记录 ，或单击 停止 停止录制。

记录负载性能

当您要分析页面在加载时的性能而不是运行时，记录负载性能。

1. 转到要分析的页面。

2. 打开DevTools的“ 性能” 面板。

3. 单击 重新加载页面 。DevTools在页面重新加载时记录性能指标，然后在加载完成后几秒钟自动停止录制。

   ​

   图2 。 重新加载页面 ，概述为蓝色

   ​

DevTools会自动放大大部分活动发生的记录部分。

图3 。页面加载记录

在录制时拍摄截图

启用“ 屏幕截图” 复选框可在录制时捕获每个帧的屏幕截图。

图4 。该 截图 复选框

请参阅 查看屏幕截图 ，了解如何与屏幕截图交互。

录制时强制收集垃圾

在录制页面时，单击 收集垃圾 以强制垃圾回收。

图5 。收集垃圾，概述为蓝色

显示录音设置

单击 捕获设置 以显示与DevTools如何捕获性能记录有关的更多设置。

图6 。在 捕捉设置 部分，在蓝色轮廓

禁用JavaScript示例

默认情况下，记录的 主要 部分显示在录制过程中调用的JavaScript函数的详细调用堆栈。要禁用这些调用堆栈：

1. 打开 捕获设置 菜单。请参阅 显示录制设置 。
2. 启用 禁用JavaScript样本 复选框。
3. 记录页面。

图7和图8显示了禁用和启用JavaScript示例之间的区别。当采样被禁用时，记录的 主要 部分要短得多，因为它省略了所有的JavaScript调用堆栈。

图7 。JS样本被禁用时的记录示例

图8 。启用JS样本时的录制示例

在录制时对网络进行调节

在录制时调节网络：

1. 打开 捕获设置 菜单。请参阅 显示录制设置 。
2. 将 网络 设置为所需的节流水平。

在记录时节油CPU

在录制时节流CPU：

1. 打开 捕获设置 菜单。请参阅 显示录制设置 。
2. 将 CPU 设置为所需的节流水平。

调节是相对于您的计算机的功能。例如， 2x减速 选项使您的CPU运行速度比其通常能力慢2倍。DevTools无法真正模拟移动设备的CPU，因为移动设备的架构与台式机和笔记本电脑的结构非常不同。

启用先进的油漆仪器

查看详细的油漆仪表：

1. 打开 捕获设置 菜单。请参阅 显示录制设置 。
2. 选中 启用高级绘图仪器 复选框。

要了解如何与油漆信息进行交互，请参阅 查看图层 和 查看油漆分析器 。

保存录音

要保存录音，请右键单击并选择 保存配置文件 。

图9 。 保存个人信息

加载录音

要加载录音，请右键单击并选择 加载配置文件 。

图10 。 负载配置文件

清除以前的录音

录制完成后，按“ 清除录像” 可从“ 性能” 面板 清除录音 。

图11 。清晰录制，概述为蓝色

分析录音

当您 记录运行时的性能 或 记录负载性能 ，该 性能 面板提供了大量的数据分析中刚刚发生了什么表现。

选择录音的一部分

在“ 概览” 中向左或向右拖动鼠标以选择录制的一部分。该 概述 是包含部分 FPS ， CPU 和 NET 图表。

图12 。在“概览”上拖动鼠标进行缩放

使用键盘选择一部分：

1. 单击 主要 部分的背景，或其旁边的任何部分，如 交互 ， 网络 或 GPU 。此键盘工作流仅在其中一个部分处于焦点时才起作用。
2. 使用W，A，S，D键来放大，向左移动，缩小，分别向右移动。

使用触控板选择一部分：

1. 将鼠标悬停在“ 概述” 部分或“ 详细信息” 部分。该 概述 部分是包含该地区 的FPS ， CPU 和 NET 图表。的 详细 部分是包含区域 主要 部分，所述 相互作用 部分，依此类推。
2. 使用两根手指，向上滑动以缩小，向左滑动左移，向下滑动以放大，向右滑动即可向右移动。

要滚动 主 区段或其任何邻居的长火焰图表，请单击并按住上下拖动。拖动左右移动选择录音的哪一部分。

搜索活动

按Command+ F（Mac）或 Control+ F（Windows，Linux）打开“ 性能” 面板底部的搜索框。

图13 。在窗口底部的搜索框中使用正则表达式来查找以`E’开头的任何活动

浏览与您的查询匹配的活动：

• 使用上 一个 和 下一个 按钮。
• 按Shift+ Enter选择上一个或 Enter选择下一个。

修改查询设置：

• 按 区分大小写 使查询区分大小写。
• 按 正则表达式 在查询中使用 正则表达式 。

要隐藏搜索框，请按 取消 。

查看主线程活动

使用 Main 部分来查看页面主线程上发生的活动。

图14 。的 主要 部分，在蓝色的概述

在“ 摘要 ”选项卡中单击事件以查看有关其的更多信息。DevTools将所选事件概述为蓝色。

图15 。 Me “ 摘要 ”选项卡中 有关函数调用事件的更多信息

DevTools表示主要线程活动与火焰图表。x轴表示随时间的记录。y轴表示调用堆栈。上面的事件导致下面的事件。

图16 。 主要 部分的 火焰图表

在图16中，一个 click 事件 script_foot_closure.js 在第53行引发了一个函数调用。下面 Function Call 你看到一个匿名函数被调用。那个匿名函数然后调用 Me() ，然后调用 Se() ，等等。

DevTools分配脚本随机颜色。在图16中，来自一个脚本的函数调用为浅绿色。来自另一个脚本的电话是米色的。较暗的黄色代表脚本活动，紫色事件表示渲染活动。这些较暗的黄色和紫色事件在所有录音中都是一致的。

如果要隐藏JavaScript调用的详细火焰图表，请参阅 禁用JavaScript示例 。当JS样品被禁用，你只看到高级别活动，如 Event (click) 和 Function Call (script_foot_closure.js:53) 从图16。

查看表中的活动

录制页面后，您不需要仅依靠 Main 部分来分析活动。DevTools还提供了三个表格视图来分析活动。每个视图都给你一个不同的观点：

• 当您想查看导致最多工作的根活动时，请使用 “ 调用树 ”选项卡 。
• 当您想查看直接花费最多时间的活动时，请使用“ 自 底 ”选项卡 。
• 当您要按录制中发生的顺序查看 活动 时，请使用 “ 事件日志 ”选项卡 。

注意：接下来的三个部分都是引用相同的演示。您可以在“活动”选项卡演示中自己运行演示，并在 GoogleChrome / devtools-samples / perf / activitytabs.html上 查看源代码 。

根活动

以下是“ 调用树 ”选项卡，“自 底 ”选项卡和“ 事件日志” 部分中提到的 根活动 概念的说明。 **

根活动是导致浏览器做一些工作的活动。例如，当您单击页面时，浏览器将 Event 作为根活动触发活动。这 Event 可能会导致一个处理程序执行，等等。

在 主要 部分的火焰图表中，根活动位于图表的顶部。在“ 调用树” 和“ 事件日志” 选项卡中，根活动是顶级项目。

有关根活动的示例，请参阅 “调用树”选项卡 。

“呼叫树”选项卡

使用“ 调用树 ”选项卡查看哪些 根活动 导致最多的工作。

“ 呼叫树 ”选项卡仅在录制的所选部分显示活动。请参阅 选择录音的一部分， 了解如何选择部分。

图17 。“ 呼叫树 ”选项卡

在图17中，在物品的顶层 活动 柱，例如 Event ， Paint ，和 Composite Layers 是根活动。嵌套表示调用堆栈。例如，在图17中 Event 引起的 Function Call ，引起的 button.addEventListener ，引起的 b ，等等。

自我时间代表直接在该活动中花费的时间。 总时间 表示在该活动或其任何孩子中花费的时间。

单击“ 自我时间” ，“ 总时间 ”或“ 活动” 以按该列对表进行排序。

使用 过滤器 文本框按活动名称过滤事件。

默认情况下，“ 分组 ”菜单设置为“ 无分组” 。使用 分组 菜单根据各种条件对活动表进行排序。

单击 显示最重叠堆栈 以显示 活动 表右侧的另一个表。点击活动填充 最重堆栈 表。在 最重的堆栈 表显示您所选择的活动的孩子们把执行时间最长的一次。

自下而上的选项卡

使用“ 自下而上 ”选项卡查看哪些活动直接占用了大部分时间。

“ 自下而上 ”选项卡仅在录制的所选部分显示活动。请参阅 选择录音的一部分， 了解如何选择部分。

图18 。在 自下而上 标签

在图18 的 主要 部分火焰图中，您可以看到几乎几乎所有的时间都花费在执行三个调用 wait() 。因此，图18的“ 自 底 ”选项卡中的顶部活动是 wait 。在图18的火焰图中，呼叫之下的黄色 wait 实际上是数千个 Minor GC 呼叫。因此，您可以看到在 自下而上 选项卡中，下一个最昂贵的活动是 Minor GC 。

“ 自我时间” 列表示在其所有事件中直接在该活动中花费的总计时间。

“ 总时间” 列表示在该活动或其任何子项中花费的聚合时间。

事件日志选项卡

使用“ 事件日志 ”选项卡可以按照录制过程中发生的顺序来查看 活动 。

“ 事件日志 ”选项卡仅在录制的所选部分显示活动。请参阅 选择录音的一部分， 了解如何选择部分。

图19 。在 事件日志 选项卡

“ 起始时间” 列表示相对于录制开始的活动开始点。例如， 1573.0 ms 图19中所选项目的开始时间 表示活动开始后1573 ms。

“ 自我时间” 列表示直接在该活动中花费的时间。

“ 总时间” 列表示直接在该活动或其任何子项中花费的时间。

单击 开始时间 ， 自身时间 或 总时间 以按该列对表进行排序。

使用 过滤器 文本框按名称过滤活动。

使用“ 持续时间 ”菜单过滤出花费少于1毫秒或15毫秒的活动。默认情况下，“ 持续时间 ”菜单设置为“ 全部” ，表示显示所有活动。

禁用 加载 ， 脚本 ， 渲染 或 绘图 复选框，以过滤掉这些类别中的所有活动。

查看GPU活动

在 GPU 部分查看GPU活动。

图20 。该 GPU 部分，在蓝色轮廓

查看栅格活动

在“ 栅格” 部分中查看栅格活动。

图21 。该 栅格 部分的蓝色轮廓

查看互动

使用“ 交互” 部分查找和分析录制过程中发生的用户交互。

图22 。在 互动 部分，在蓝色轮廓

互动底部的红线代表等待主线程花费的时间。

单击交互以在“ 摘要 ”选项卡中查看有关它的更多信息。

分析每秒帧数（FPS）

DevTools提供了多种分析每秒帧数的方法：

• 使用 的 FPS 图表 在记录期间获得FPS的概述。
• 使用 “ 帧” 部分 查看特定帧占用多长时间。
• 当页面运行时，使用 FPS仪表 实时估计FPS。请参阅 查看与FPS仪表实时帧每秒 。

FPS图表

在 FPS 图表提供了在记录期间的帧速率的概述。一般来说，绿色条越高，帧率越高。

FPS图表上方的红色条是一个警告，即帧速率降低到可能损害用户体验。

图20 。FPS图表，蓝色概述

框架部分

“ 帧” 部分将告诉您具体帧的花费多长时间。

将鼠标悬停在一个框架上以查看具有更多信息的工具提示。

图21 。悬停在一个框架上

单击一个框架可以在“ 摘要 ”选项卡中查看有关框架的更多信息 。DevTools以蓝色勾勒所选框。

图22 。在“ 摘要 ”选项卡中 查看一个框架

查看网络请求

展开“ 网络” 部分以查看在录制期间发生的网络请求的瀑布。

图23 。在 网络 部分，在蓝色轮廓

请求的颜色如下：

• HTML：蓝色
• CSS：紫色
• JS：黄色
• 图片：绿色

在“ 摘要 ”选项卡中单击请求以查看有关信息的更多信息。例如，在图23中， “摘要 ”选项卡显示有关在“ 网络” 部分中选择的蓝色请求的更多信息。

请求左上角的一个较深蓝色的方块意味着它是一个较高优先级的请求。浅蓝色方块意味着较低优先级。例如，在图23中，蓝色的选择的请求是较高优先级的，其上的绿色优先级较低。

在图24中，请求 www.google.com 由左侧的一行表示，中间的条形表示为黑色部分和浅色部分，右侧表示线条。图25显示了 网络 面板的“ 定时 ”选项卡中相同请求的相应表示。这两个表示如何映射到彼此： **

• 左边的一切都是一 Connection Start 组包含事件的事情。换句话说，这是以前的一切 Request Sent ，独家。
• 酒吧的灯光部分是 Request Sent 和 Waiting (TTFB) 。
• 酒吧的黑暗部分是 Content Download 。
• 正确的路线基本上是等待主线程的时间。这不在“ 时间 ”选项卡中显示。

图24 。 www.google.com 请求 的线条表示

图25 。请求 的 Timing 选项卡表示 www.google.com

查看内存指标

启用 内存 复选框以查看上次录制中的内存指标。

图26 。该 内存 复选框，在蓝色轮廓

“开发工具” 在 “摘要 ”选项卡上方显示新的“ 内存” 图表。 NET 图表下面还有一个新的图表，称为 HEAP 。的 HEAP 图表提供了相同的信息作为 斯·海亚普 中线路 存储器 图表。 **

图27 。“ 汇总 ”选项卡 上方的内存指标

图表上的彩色线条映射到图表上方的彩色复选框。禁用复选框以从图表中隐藏该类别。

图表仅显示当前选择的录制区域。例如，在图27中，“ 存储器” 图表仅显示记录开始的内存使用情况，最多可达1000ms。

查看记录部分的持续时间

在分析 网络 或 主要部分 时，有时您需要更准确地估计某些事件需要多长时间。按住Shift，单击并按住，然后向左或向右拖动以选择录制的一部分。在您选择的底部，DevTools显示该部分花费了多长时间。

图28 。将 488.53ms 在所选部分的底部戳指示多久那部分了

查看截图

请参阅在 录制时捕获屏幕截图， 以了解如何启用屏幕截图。

将鼠标悬停在“ 概述”上 ，以查看在录制过程中该页面的显示方式。该 概述 是包含了部分 CPU ， FPS 和 NET 图表。

图29 。查看屏幕截图

您还可以通过单击 框架 部分中的 框架 来查看屏幕截图。在“ 摘要 ”选项卡中，DevTools显示一个小版本的屏幕截图。

图30 。在“ 框架” 部分中单击 195.5ms 框架后，该 框架 的屏幕截图将显示在“ 摘要 ”选项卡中

在“ 摘要 ”标签中单击缩略图以放大屏幕截图。

图31 。在“ 摘要 ”选项卡中单击缩略图后，DevTools将放大屏幕截图

查看图层信息

查看有关框架的高级图层信息：

1. 启用先进的油漆仪器 。
2. 在“ 帧” 部分中选择一个帧。DevTools在“新建 图层” 选项卡中的“ 事件日志 ”选项卡旁显示有关其图层的信息。

图32 。“ 图层” 选项卡

将鼠标悬停在图层上以在图中突出显示。

图33 。突出显示层 ＃39

移动图：

• 点击 平移模式 沿X轴和Y轴移动。
• 单击 旋转模式 沿Z轴旋转。
• 单击 重置变换 将图重置为其原始位置。

查看油漆分析仪

查看有关paint事件的高级信息：

1. 启用先进的油漆仪器 。
2. 在 主要 部分选择一个 油漆 事件。 **

图34 。“ 油漆分析器 ”选项卡

使用“渲染”选项卡分析渲染性能

使用“ 渲染 ”选项卡的功能可以帮助您可视化页面的渲染性能。

打开“ 渲染 ”选项卡：

1. 打开 命令菜单 。
2. 开始输入 Rendering 并选择 Show Rendering 。DevTools显示DevTools窗口底部的“ 渲染 ”选项卡。

图35 。“ 渲染 ”选项卡

使用FPS仪表实时查看每秒帧数

在 FPS米 是出现在你的视口的右上角的叠加。当页面运行时，它提供FPS的实时估计。打开 FPS仪表 ：

1. 打开“ 渲染 ”选项卡。请参阅 使用“渲染”选项卡分析渲染性能 。
2. 启用 FPS仪表 复选框。

图36 。FPS仪表

用油漆闪烁实时查看绘画事件

使用油漆闪烁获取页面上所有油漆事件的实时视图。每当页面的一部分被重新绘制时，DevTools会将该部分概括为绿色。

启用油漆闪烁：

1. 打开“ 渲染 ”选项卡。请参阅 使用“渲染”选项卡分析渲染性能 。
2. 启用 油漆闪烁 复选框。

图37 。 油漆闪烁

查看层与图层边框的叠加

使用“ 图层边框 ”查看页面顶部的图层边框和图块的叠加层。

启用图层边框：

1. 打开“ 渲染 ”选项卡。请参阅 使用“渲染”选项卡分析渲染性能 。
2. 启用“ 图层边框” 复选框。

图38 。 层边界

实时查找滚动性能问题

使用滚动性能问题来标识具有与滚动相关的事件侦听器的页面的元素，这些元素可能会损害页面的性能。DevTools概述了潜在问题的元素。

查看滚动性能问题：

1. 打开“ 渲染 ”选项卡。请参阅 使用“渲染”选项卡分析渲染性能 。
2. 启用 滚动性能问题 复选框。

图39 。 滚动性能问题 表明有一个 mousewheel 包含整个视口的事件监听器可能会影响滚动性能

时间线事件参考

时间线事件模式可以显示记录时触发的所有事件。使用时间线事件参考可以详细了解每一个时间线事件类型。

常见的时间线事件属性

某些详细信息存在于所有类型的事件中，而一些仅适用于特定的事件类型。本部分列出了不同事件类型的通用属性。特定于特定事件类型的属性列在这些事件类型遵循的参考中。

属性	显示时间
Aggregated time	对于带 嵌套事件 的事件，每个类别的事件所用的时间。
Call Stack	对于带 子事件 的事件，每个类别的事件所用的时间。
CPU time	记录的事件所花费的 CPU 时间。
Details	有关事件的其他详细信息。
Duration (at time-stamp)	事件及其所有子事件完成所需的时间，时间戳是事件发生的时间（相对于记录开始的时间）。
Self time	事件（不包括任何子事件）花费的时间。
Used Heap Size	记录事件时应用使用的内存大小，以及自上次采样以来已使用堆大小的增减 (+/-) 变化。

Loading 事件

本部分列出了属于加载类别的事件及其属性。

事件	说明
Parse HTML	Chrome 执行其 HTML 解析算法。
Finish Loading	网络请求已完成。
Receive Data	请求的数据已被接收。存在一个或多个 Receive Data 事件。
Receive Response	请求的初始 HTTP 响应。
Send Request	网络请求已被发送。

Loading 事件属性

属性	说明
Resource	请求的资源的网址。
Preview	请求的资源的预览（仅图像）。
Request Method	用于请求的 HTTP 方法（例如，GET 或 POST）。
Status Code	HTTP 响应代码。
MIME Type	请求的资源的 MIME 类型。
Encoded Data Length	请求的资源的长度（以字节为单位）。

Scripting 事件

本部分列出了属于脚本类别的事件及其属性。

事件	说明
Animation Frame Fired	预定的动画帧被触发，其回调处理程序被调用。
Cancel Animation Frame	预定的动画帧被取消。
GC Event	发生垃圾回收。
DOMContentLoaded	浏览器触发 DOMContentLoaded 。当页面的所有 DOM 内容都已加载和解析时，将触发此事件。
Evaluate Script	脚本已被评估。
Event	JavaScript 事件（例如，“mousedown”或“key”）。
Function Call	发生顶级 JavaScript 函数调用（只有浏览器进入 JavaScript 引擎时才会出现）。
Install Timer	已使用 setInterval() 或 setTimeout() 创建定时器。
Request Animation Frame	requestAnimationFrame() 调用已预定一个新帧。
Remove Timer	之前创建的定时器已被清除。
Time	一个脚本调用了 console.time()
Time End	一个脚本调用了 console.timeEnd()
Timer Fired	使用 setInterval() 或 setTimeout() 创建的定时器已被触发。
XHR Ready State Change	XMLHTTPRequest 的就绪状态已发生变化。
XHR Load	XMLHTTPRequest 已结束加载。

Scripting 事件属性

属性	说明
Timer ID	定时器 ID。
Timeout	定时器指定的超时。
Repeats	指定定时器是否重复的布尔值。
Function Call	已调用一个函数。

Rendering 事件

本部分列出了属于渲染类别的事件及其属性。

事件	说明
Invalidate layout	页面布局被 DOM 更改声明为无效。
Layout	页面布局已被执行。
Recalculate style	Chrome 重新计算了元素样式。
Scroll	嵌套视图的内容被滚动。

Rendering 事件属性

属性	说明
Layout invalidated	对于 Layout 记录，导致布局失效的代码的堆叠追踪。
Nodes that need layout	对于 Layout 记录，被标记为需要在重新布局启动前布局的节点的数量。正常情况下，这些代码是被开发者代码声明为无效的代码，以及向上追溯到重新布局根目录的路径。
Layout tree size	对于布局记录，重新布局根目录下节点（Chrome 启动重新布局的节点）的总数。
Layout scope	可能的值为“Partial”（重新布局边界是 DOM 的一部分）或“Whole document”。
Elements affected	对于 Recalculate 样式记录，受样式重新计算影响的元素的数量。
Styles invalidated	对于 Recalculate 样式记录，提供导致样式失效的代码的堆叠追踪。

Painting 事件

本部分列出了属于打印类别的事件及其属性。

事件	说明
Composite Layers	Chrome 的渲染引擎合成了图像层。
Image Decode	一个图像资源被解码。
Image Resize	一个图像的大小相对于其原生尺寸发生了变化。
Paint	合成的图层被绘制到显示画面的一个区域。将鼠标悬停到 Paint 记录上会突出显示已被更新的显示画面区域。

Painting 事件属性

属性	说明
Location	对于 Paint 事件，绘制矩形的 x 和 y 坐标。
Dimensions	对于 Paint 事件，已绘制区域的高度和宽度。

加速执行 JavaScript

使用 Chrome DevTools CPU 分析器识别开销大的函数。

TL;DR

• 使用 CPU 分析器准确地记录调用了哪些函数和每个函数花费的时间。
• 将您的配置文件可视化为火焰图。

记录 CPU 分析

如果您在 JavaScript 中注意到出现卡顿，请收集 JavaScript CPU 分析。CPU 分析会显示执行时间花费在页面中哪些函数上。

1. 转到 DevTools 的 Profiles 面板。
2. 选择 Collect JavaScript CPU Profile 单选按钮。
3. 按 Start 。
4. 根据您要分析的内容不同，可以重新加载页面、与页面交互，或者只是让页面运行。
5. 完成后，按 Stop 按钮。

您也可以使用 Command Line API 对命令行产生的分析进行记录和分组。

查看 CPU 分析

完成记录后，DevTools 会使用记录的数据自动填充 Profile 面板。

默认视图为 Heavy (Bottom Up) 。此视图让您可以看到哪些函数对性能影响最大并能够检查这些函数的调用路径。

更改排序顺序

要更改排序顺序，请点击 focus selected function 图标 ( ) 旁的下拉菜单，然后选择下列选项中的一项：

Chart。显示记录按时间顺序排列的火焰图。

Heavy (Bottom Up)。按照函数对性能的影响列出函数，让您可以检查函数的调用路径。 这是默认视图。

Tree (Top Down)。显示调用结构的总体状况，从调用堆栈的顶端开始。

排除函数

要从您的 CPU 分析中排除函数，请点击以选择该函数，然后按 exclude selected function 图标 ( )。

已排除函数的调用方由排除函数的总时间管理。

点击 restore all functions 图标 ( ) 可以将所有排除的函数恢复到记录中。

以火焰图形式查看 CPU 分析

火焰图视图直观地表示了一段时间内的 CPU 分析。

记录 CPU 分析 后， 更改排序顺序 为 Chart ，以便以火焰图形式查看记录。

火焰图分为以下两部分：

1. 概览 。整个记录的鸟瞰图。 条的高度与调用堆栈的深度相对应。 所以，栏越高，调用堆栈越深。
2. 调用堆栈 。这里可以详细深入地查看记录过程中调用的函数。 横轴是时间，纵轴是调用堆栈。 堆栈由上而下组织。所以，上面的函数调用它下面的函数，以此类推。

函数的颜色随机，与其他面板中使用的颜色无关。 不过，函数的颜色在调用过程中始终保持一致，以便您了解执行的模式。

高调用堆栈不一定很重要，只是表示调用了大量的函数。 但宽条表示调用需要很长时间完成。 这些需要优化。

在记录的特定部分上放大

在概览中点击、按住并左右拖动鼠标，可放大调用堆栈的特定部分。 缩放后，调用堆栈会自动显示您选定的记录部分。

查看函数详情

点击函数可在 Sources 面板中查看其定义。

将鼠标悬停在函数上可显示其名称和计时数据。提供的信息如下：

• Name 。函数的名称。
• Self time 。完成函数当前的调用所需的时间，仅包含函数本身的声明，不包含函数调用的任何函数。
• Total time 。完成此函数和其调用的任何函数当前的调用所需的时间。
• URL 。形式为 file.js:100 的函数定义的位置，其中 file.js 是定义函数的文件名称， 100 是定义的行号。
• Aggregated self time 。记录中函数所有调用的总时间，不包含此函数调用的函数。
• Aggregated total time 。函数所有调用的总时间，不包含此函数调用的函数。
• Not optimized 。如果分析器已检测出函数存在潜在的优化，会在此处列出。

如何使用 Timeline 工具

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

TL;DR

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

Timeline 面板概览

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

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

您可以在 火焰图 上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件。

1. Details 。选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息。

Overview 窗格

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

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

深色部分表示传输时间（下载第一个和最后一个字节之间的时间）。

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

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

做记录

要记录 页面加载 ，请打开 Timeline 面板，打开想要记录的页面，然后重新加载页面。 Timeline 面板会自动记录页面重新加载。

要记录 页面交互 ，请打开 Timeline 面板，然后按 Record 按钮 ( ) 或者键入键盘快捷键 Cmd+E (Mac) 或 Ctrl+E(Windows / Linux)，开始记录。记录时， Record 按钮会变成红色。执行页面交互，然后按 Record 按钮或再次键入键盘快捷键停止记录。

完成记录后，DevTools 会猜测哪一部分记录与您最相关，并自动缩放到那一个部分。

记录提示

• 尽可能保持记录简短 。简短的记录通常会让分析更容易。
• 避免不必要的操作 。避免与您想要记录和分析的活动无关联的操作（鼠标点击、网络加载，等等）。例如，如果您想要记录点击 Login 按钮后发生的事件，请不要滚动页面、加载图像，等等。
• 停用浏览器缓存 。记录网络操作时，最好从 DevTools 的 Settings 面板或 Network conditions 抽屉式导航栏停用浏览器的缓存。
• 停用扩展程序 。Chrome 扩展程序会给应用的 Timeline 记录增加不相关的噪声。 以 隐身模式 打开 Chrome 窗口或者创建新的 Chrome 用户个人资料 ，确保您的环境中没有扩展程序。

查看记录详细信息

在 火焰图 中选择事件时， Details 窗格会显示与事件相关的其他信息。

一些标签（如 Summary ）适用于所有事件类型。其他标签则仅对特定事件类型可用。 请参阅 Timeline 事件参考 ，了解与每个记录类型相关的详细信息。

在记录期间捕捉屏幕截图

Timeline面板可以在页面加载时捕捉屏幕截图。此功能称为 幻灯片 。

在您开始记录之前，请在 Controls 窗格中启用 Screenshots 复选框，以便捕捉记录的屏幕截图。 屏幕截图显示在 Overview 窗格下方。

将您的鼠标悬停在 Screenshots 或 Overview 窗格上可以查看记录中该点的缩放屏幕截图。 左右移动鼠标可以模拟记录的动画。

分析 JavaScript

开始记录前，请启用 JS Profile 复选框，以便在您的时间线记录中捕捉 JavaScript 堆栈。 启用 JS 分析器后，您的火焰图会显示调用的每个 JavaScript 函数。

分析绘制

开始记录前，请启用 Paint 复选框，以便获取有关 Paint 事件的更多数据分析。 启用绘制分析并点击 Paint 事件后，新 Paint Profiler 标签会出现在 Details 窗格中，后者显示了许多与事件相关的更精细信息。

渲染设置

打开主 DevTools 菜单，然后选择 More tools > Rendering settings 访问渲染设置，这些设置在调试绘制问题时非常有用。渲染设置会作为一个标签显示在 Console 抽屉式导航栏（如果隐藏，请按 esc 显示抽屉式导航栏）旁边。

搜索记录

查看事件时，您可能希望侧重于一种类型的事件。例如，您可能需要查看每个 Parse HTML 事件的详细信息。

在 Timeline 处于焦点时，按 Cmd+F (Mac) 或 Ctrl+F (Windows / Linux) 以打开一个查找工具栏。键入您想要检查的事件类型的名称，如 Event 。

工具栏仅适用于当前选定的时间范围。选定时间范围以外的任何事件都不会包含在结果中。

利用上下箭头，您可以按照时间顺序在结果中移动。所以，第一个结果表示选定时间范围内最早的事件，最后一个结果表示最后的事件。每次按向上或向下箭头会选择一个新事件，因此，您可以在 Details 窗格中查看其详细信息。按向上和向下箭头等同于在 火焰图 中点击事件。

在 Timeline 部分上放大

您可以放大显示一部分记录，以便简化分析。使用 Overview 窗格可以放大显示一部分记录。 放大后， 火焰图 会自动缩放以匹配同一部分。

要在 Timeline 部分上放大，请执行以下操作：

• 在 Overview 窗格中，使用鼠标拖出 Timeline 选择。
• 在标尺区域调整灰色滑块。

选择部分后，可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移。

保存和打开记录

您可以在 Overview 或 火焰图 窗格中点击右键并选择相关选项，保存和打开记录。

诊断强制同步布局

了解如何使用 DevTools 诊断强制同步布局。

在本指南中，您将学习如何通过确定和解决实时演示中的问题调试 强制同步布局 。 演示使用 requestAnimationFrame() 对图像进行动画处理，这是处理基于帧的动画的推荐方法。不过，动画中会有大量的卡顿。 您的目标是确定卡顿的原因并解决问题，以便演示以流畅的 60 FPS 运行。

收集数据

首先，您需要捕获数据，以便准确了解页面运行时会发生什么。

1. 打开 演示 。
2. 打开 DevTools 的 Timeline 面板。
3. 启用 JS Profile 选项。稍后分析火焰图时，您可以通过此选项准确地查看调用了哪些函数。
4. 点击页面上的 Start 启动动画。
5. 点击 Timeline 面板上的 Record 按钮启动 Timeline 记录。
6. 等待两秒。
7. 再次点击 Record 按钮停止记录。

完成记录后，您在 Timeline 面板上应看到如下所示的内容。

确定问题

现在，您已获取数据，可以着手弄清楚它们了。

您可以在 Timeline 记录的 Summary 窗格中一眼看出浏览器在渲染上花费的时间最多。 一般来说，如果您可以 优化页面布局操作 ，就可以减少花费在渲染上的时间。

现在，请将注意力转移到 Overview 窗格下方的粉色条形上。 这些表示帧。将鼠标悬停在上面可以查看与帧相关的更多信息。

完成这些帧需要较长的时间。要使动画流畅，您需要达到 60 FPS。

现在，可以准确地诊断哪里出错了。使用您的鼠标，在调用堆栈上 放大 。

堆栈的顶端是 Animation Frame Fired 事件。只要触发此事件，就会调用传递至 requestAnimationFrame() 的函数。在 Animation Frame Fired 下方，您会看到 Function Call ，在它的下方，您会看到 update 。您可以推断名为 update() 的方法是 requestAnimationFrame() 的回调。

注：这是您之前启用 JS Profile 选项的作用。 如果停用，您就会看到 Function Call ，后面是所有紫色小事件（稍后介绍），不包含具体调用了哪些函数的详情。

现在，请将注意力转移到 update 事件下方的所有紫色小事件上。 许多这些事件的顶部为红色。那是警告标志。 将鼠标悬停在这些事件上方，您会看到 DevTools 在警告您页面可能会被强制自动重排。 强制自动重排是强制同步布局的另一种说法。

现在，可以看一下导致全部强制同步布局的函数。 点击其中一个布局事件可以选择它。现在，在 Summary 窗格中，您会看到与此事件有关的详细信息。 点击 Layout Forced ( update @ forcedsync.html:457 ) 下面的链接跳转到函数定义。

现在，您在 Sources 面板中应看到函数定义。

update() 函数是 requestAnimationCallback() 的回调处理程序。 处理程序会根据每个图像的 offsetTop 值计算其 left 属性。 这将强制浏览器立即执行新布局，以便确保其提供正确的值。在每个动画帧期间强制布局是导致页面上出现动画卡顿的原因。

现在，您已经确定了问题，可以尝试在 DevTools 中直接解决问题。

在 DevTools 中应用修复

此脚本内已嵌入 HTML，因此，您无法通过 Sources 面板对其进行编辑（不过，可以在 Sources 面板中编辑格式为 *.js 的脚本）。

不过，要测试您的更改，可以在 Console 中重新定义函数。从 HTML 文件复制函数定义，并将其粘贴到 DevTools 的 Console 中。删除使用 offsetTop 的语句并取消注释其下面的语句。 完成后，按 Enter 。

重启动画。您可以直观地验证现在顺畅多了。

使用另一个记录验证

最好使用另一个记录来验证动画确实比之前更快且性能更好。

效果好多了。

开始分析Chrome DevTools中的网络性能

了解如何使用Chrome DevTools网络面板了解页面在逐步交互式教程中缓慢加载的原因。

步骤1：设置DevTools

假设您正在从移动用户那里收到您网站上特定页面缓慢的报告。你的工作是使页面快速。

1. 单击 打开缓慢页面 。该页面将在新选项卡中打开。

   打开慢页

2. 当页面对焦时，请按 Command+ Option+ I（Mac）或 Control+ Shift+ I（Windows，Linux）打开页面上的DevTools。

3. 在DevTools中，单击 网络 选项卡。

   ​

   图1 。Chrome DevTools网络面板在您要诊断的缓慢页面旁边打开。

   ​

   ​

   注意：对于其余的屏幕截图，DevTools被拆除 到一个单独的窗口 ，以便您可以更好地看到它的内容。

   ​

4. 启用 捕获屏幕截图 ，启用后会变成蓝色。DevTools在页面加载期间捕获截图。

步骤2：模拟移动用户的体验

在笔记本电脑或桌面上测试网络性能可能会欺骗。您的互联网连接比移动用户快得多，您的浏览器缓存以前访问的资源。

1. 选中 禁用高速缓存 复选框。启用此复选框后，DevTools不会从缓存中提供任何资源。这更准确地模拟了用户在查看您的页面时遇到的首次用户体验。
2. 从当前说 没有限制 的下拉菜单中，选择 Regular 2G 。DevTools控制网络连接，以模拟正常的2G体验。这就是移动用户如何在连接不良的地方体验您的网站。

图2 。Chrome DevTools网络面板设置为模拟移动用户的体验。截图，缓存禁用和限制分别以蓝色概述，从左到右。

这是一个最坏的情况。如果您可以在此设置下快速加载页面，那么所有用户都将快速上手！

步骤3：分析请求

找出通过重新加载页面并分析进入的请求来使页面变慢的内容。

部分A：查找渲染阻止脚本

当浏览器遇到 <script> 标签时，它必须暂停渲染并立即执行该脚本。查找页面加载不需要的脚本，并标记它们异步或延迟其执行以加快加载时间。

1. 按Command+ R（Mac）或 Control+ R（Windows，Linux）重新加载页面。在良好的Wi-Fi连接上，该页面需要10秒以上才能完整加载。

   ​

   图3 。Chrome DevTools网络面板，重新加载页面后。

   ​

2. 请注意值 DOMContentLoaded 在 摘要窗格 ，在网络面板的底部。您应该看到至少4秒的值。当你看到这个事件像这样发火时，请注意脚本，这些脚本会拖延主文档的加载和解析。

3. 单击 main.js 进一步调查该请求。DevTools显示一组新的选项卡，提供有关此请求的更多信息。

4. 单击 预览 选项卡查看请求的源代码。您可以看到脚本挂起4000ms。通过使用 async 属性标记该脚本并将其移动到文档的底部， <body> 可以加载该页面，而无需等待该脚本。

   ​

   图4 。 main.js 在预览窗格中查看源代码。

   ​

请参阅 解析器阻塞与异步JavaScript 以了解有关渲染阻止脚本的更多信息。

B部分：查找大量请求

当页面加载时，您是否注意到DevTools标志需要很长时间才能加载？它不阻止负载，但它使页面 看起来 很慢。页面 显示 速度快时，用户喜欢它。

1. 单击 关闭 ，以便您可以再次看到“ 请求”窗格 。

2. 双击左上方的屏幕截图。

3. 按右箭头键扫描屏幕截图。屏幕截图下方的时间表示屏幕截图被拍摄的时间。屏幕截图需要几秒钟才能加载。这意味着文件可能太大了。

4. 点击屏幕截图以外的任何位置将其最小化。

5. 悬停在 瀑布 上的 logo-1024px.png 请求。该请求花费大部分时间下载图像。这证实图像太大了。

   ​

   图5 。瀑布为 logo-1024px.png 。

   ​

步骤4：验证更新页面上的修补程序

你刚刚完成 假设您已经对该页面进行了两次更改：

• 您将脚本移动到底部，并将 <body> 其标记 async 为防止其阻止页面加载。
• 您将徽标转换为SVG以减小其大小。

剩下的就是测试更新的页面，以验证您的修复确实使页面加载速度更快。

1. 单击 打开快速页面 。固定页面将在新选项卡中打开。

   打开快速页面

2. 设置DevTools与以前一样。屏幕截图和缓存禁用应该打开，网络限制应该设置为 Regular 2G 。

3. 重新加载页面。页面加载速度更快。

   ​

   图6 。在应用修补程序后，记录页面的加载。该页面大约需要10秒才能完美显现。现在只需要大约1秒钟。

   ​

注意：虽然页面加载速度更快，但仍然不可用约5秒钟。这是因为它仍然运行挂起页面主线程的脚本。

下一步

做得好。您现在是Chrome DevTools网络专家的真正专家。好吧，也许不是专家。你确实有一个很好的技能和知识基础。

• 请参阅 关键渲染路径 ，以了解有关避雷网页加载的理论的更多信息。
• 请参阅 网络问题指南 ，了解如何发现更多网络问题。
• 有关 网络面板功能 的全面列表，请参阅 网络面板参考 。

网络问题指南

指南介绍如何在Chrome DevTools的“网络”面板中检测网络问题或优化机会。

请参阅 入门 ，了解“网络”面板的基础知识。

排队或停滞的请求

症状

六个请求正在同时下载。之后，一系列请求排队或停滞。前六个请求中的一个完成后，队列中的一个请求开始。

图1 。“网络”面板中排队或停播的一系列请求的示例。在 瀑布中 ，您可以看到前六个请求同时 logo-1024px.png 启动。随后的请求停止，直到原来的六个完成。

原因

单个域上的请求数量太多。在HTTP / 1.0或HTTP / 1.1连接上，Chrome每个主机最多允许六个同时TCP连接。

修复

• 如果您必须使用HTTP / 1.0或HTTP / 1.1，请执行域分片。
• 使用HTTP / 2。不要使用HTTP / 2的域分片。
• 删除或推迟不必要的请求，以便关键请求可以提前下载。

慢时间到第一个字节（TTFB）

症状

请求花费很长时间等待从服务器接收第一个字节。

图2 。具有慢时间到第一个字节的请求的示例。在长长的绿条 瀑布 表明 wait 请求等待很长的时间。

原因

• 客户端和服务器之间的连接速度很慢。
• 服务器响应缓慢。在本地托管服务器以确定连接或服务器是否缓慢。如果在本地服务时仍然有一个缓慢的TTFB，则服务器速度很慢。

修复

• 如果连接速度较慢，请考虑在CDN上托管您的内容或更改托管服务提供商。
• 如果服务器速度较慢，请考虑优化数据库查询，实现缓存或修改服务器配置。

内容下载缓慢

症状

请求需要很长时间才能下载。

图3 。一个需要很长时间下载的请求的例子。 瀑布 旁边 的长条蓝色的酒吧 elements-panel.png 意味着需要很长时间才能下载。

原因

• 客户端和服务器之间的连接速度很慢。
• 正在下载大量内容。

修复

• 考虑在CDN上托管您的内容或更改托管服务提供商。
• 通过优化您的请求发送较少的字节。

贡献知识

有一个网络问题应该添加到本指南？

• 发送推文。
• 通过电子邮件发送邮件列表线程 google-chrome-developer-tools@googlegroups.com 。
• 在docs repo上 打开一个问题 。

网络分析参考

在Chrome DevTools网络分析功能的全面参考中，探索分析页面加载方式的新方法。

注意：此参考基于Chrome 58.如果您使用其他版本的Chrome，则DevTools的UI和功能可能不同。检查 chrome://help 您正在运行的Chrome版本。

记录网络请求

默认情况下，只要DevTools打开，DevTools会记录“网络”面板中的所有网络请求。

图1 。网络面板

停止录制网络请求

要停止录制请求：

• 单击 停止 在网络面板上 记录网络日志 。它变为灰色，表示DevTools不再记录请求。
• 当网络面板对焦时，请按Command+ E（Mac）或 Control+ E（Windows，Linux）。

清除请求

单击“网络”面板上的“ 清除 ”以清除“请求”表中的所有请求。

图2 。清晰，概述为蓝色

在页面加载中保存请求

要在页面加载中保存请求，请选中“网络”面板上的“ 保留日志” 复选框。DevTools保存所有请求，直到禁用 保存日志 。

图3 。保存日志复选框，以蓝色概述

在页面加载期间捕获截图

捕获屏幕截图，分析用户在等待页面加载时看到的内容。

要启用屏幕截图，请单击“网络”面板上的“ 捕获屏幕截图 ”。启用后会变成蓝色。

在网络面板对焦时捕获屏幕截图时重新加载页面。

捕获后，您可以通过以下方式与屏幕截图进行交互：

• 将鼠标悬停在屏幕截图上，以查看捕获截图的点。“概述”窗格中将显示一条黄线。
• 点击屏幕截图的缩略图，以过滤捕获截图后发生的任何请求。
• 双击缩略图放大。

图4 。悬停在屏幕截图上。“概览”窗格中的黄色垂直线和“瀑布”代表截图被捕获的时间。

重播XHR请求

要重播XHR请求，请右键单击请求表中的请求，然后选择 Replay XHR 。

图5 。选择Replay XHR

更改加载行为

通过禁用浏览器缓存来模拟首次访问者

要模拟首次使用者如何体验您的网站，请勾选[ 停用快取 ]核取方块。DevTools禁用浏览器缓存。这更准确地模拟了第一次用户的体验，因为在重复访问时从浏览器缓存提供请求。

图6 。禁用缓存复选框，以蓝色概述

从网络条件抽屉禁用浏览器缓存

如果要在其他DevTools面板中工作时禁用缓存，请使用网络条件抽屉。

1. 打开 网络条件抽屉 。
2. 选中或取消选中 禁用缓存 复选框。

手动清除浏览器缓存

要随时手动清除浏览器缓存，请右键单击“请求”表中的任意位置，然后选择“ 清除浏览器缓存” 。

图7 。选择清除浏览器缓存

模拟离线

有一类新的网络应用程序，称为 渐进式Web应用程序 ，可以在 服务人员 的帮助下离线 运行 。当您构建这种类型的应用程序时，能够快速模拟没有数据连接的设备是非常有用的。

检查 离线 复选框以模拟完全脱机的网络体验。

图8 。离线复选框，以蓝色概述

模拟网络连接速度慢

从 网络调节 菜单中模拟2G，3G和其他连接速度。

图9 。网络调节菜单，概述为蓝色

您可以从各种预设中进行选择，例如Regular或Good 2G。您还可以通过打开网络限制菜单并选择 自定义 > 添加来添加 自己的自定义预设。

“ 网络 ”选项卡旁边显示一个警告图标，以提醒您启用限流功能。

从网络条件抽屉模拟慢速网络连接

如果要在其他DevTools面板中工作时节省网络连接，请使用网络条件抽屉。

1. 打开 网络条件抽屉 。
2. 从 网络调节 菜单中选择所需的连接速度。

手动清除浏览器Cookie

要随时手动清除浏览器Cookie，请右键单击“请求”表中的任意位置，然后选择“ 清除浏览器Cookie” 。

图10 。选择清除浏览器Cookie

覆盖用户代理

要手动覆盖用户代理：

1. 打开 网络条件抽屉 。
2. 取消选中 自动选择 。
3. 从菜单中选择用户代理选项，或在文本框中输入自定义选项。

过滤请求

根据属性过滤请求

使用 过滤器 文本框通过属性过滤请求，例如请求的域或大小。

如果看不到文本框，则可能会隐藏“过滤器”窗格。请参阅 隐藏过滤器窗格 。

图11 。“过滤器”文本框，以蓝色概括

您可以通过将每个属性与空格分开来同时使用多个属性。例如， mime-type:image/gif larger-than:1K 显示大于一千字节的所有GIF。这些多属性过滤器等同于AND操作。目前不支持OR操作。

以下是支持的属性的完整列表。

• domain 。只显示来自指定域的资源。您可以使用通配符（ * ）来包含多个域。例如， *.com 显示所有域名的资源 .com 。DevTools将自动完成下拉菜单与其遇到的所有域进行填充。
• has-response-header 。显示包含指定HTTP响应头的资源。DevTools使用所遇到的所有响应标头填充自动完成下拉列表。
• is 。使用 is:running 找 WebSocket 资源。
• larger-than 。显示大于指定大小的资源（以字节为单位）。设置值 1000 等于设置值 1k 。
• method 。显示通过指定的HTTP方法类型检索的资源。DevTools使用所遇到的所有HTTP方法填充下拉列表。
• mime-type 。显示指定MIME类型的资源。DevTools使用其遇到的所有MIME类型填充下拉列表。
• mixed-content 。显示所有混合内容资源（ mixed-content:all ）或仅显示当前显示的内容（ mixed-content:displayed ）。
• scheme 。显示通过未受保护的HTTP（ scheme:http ）或受保护的HTTPS（ scheme:https ）检索的资源。
• set-cookie-domain 。显示具有与指定值匹配的属性的 Set-Cookie 标题 Domain 的资源。DevTools填充所有遇到的cookie域的自动完成。
• set-cookie-name 。显示具有 Set-Cookie 与指定值匹配的名称的标题的资源。DevTools填充自动完成所遇到的所有cookie名称。
• set-cookie-value 。显示具有 Set-Cookie 与指定值匹配的值的标题的资源。DevTools填充自动完成所遇到的所有cookie值。
• status-code 。只显示其HTTP状态码与指定代码匹配的资源。DevTools使用所遇到的所有状态代码填充自动完成下拉菜单。

按类型过滤请求

要通过请求类型过滤请求，请单击“网络”面板上的 XHR ， JS ， CSS ， Img ， Media ， Font ， Doc ， WS （WebSocket）， Manifest 或 其他 （此处未列出的任何其他类型）按钮。

如果看不到这些按钮，则可能会隐藏“过滤器”窗格。请参阅 隐藏过滤器窗格 。

要同时启用多个类型的过滤器，请按住Command （Mac）或Control（Windows，Linux），然后单击。

图12 。使用类型过滤器来显示JS，CSS和Doc [ument]资源。

按时间过滤请求

在“概述”窗格上单击并向左或向右拖动，以仅显示在该时间范围内处于活动状态的请求。过滤器是包容性的。显示在突出显示的时间内处于活动状态的任何请求。

图13 。过滤任何在2500ms左右不活动的请求

隐藏数据URL

数据URL 是嵌入到其他文档中的小文件。您在“请求”表中看到的任何请求 data: 都是数据URL。

检查“ 隐藏数据URL” 复选框以隐藏这些请求。

图14 。隐藏数据URL复选框

排序请求

默认情况下，请求表中的请求按启动时间排序，但您可以使用其他条件对表进行排序。

按列排序

单击请求中任何列的标题，以对该列进行排序。

按活动阶段排序

要更改瀑布如何排序请求，请右键单击“请求”表的标题，将其悬停在“ 瀑布”上 ，然后选择以下选项之一：

• 开始时间 。发起的第一个请求位于顶部。
• 响应时间 。开始下载的第一个请求位于顶部。
• 结束时间 。完成的第一个请求位于顶部。
• 总时长 。具有最短连接设置和请求/响应的请求位于顶部。
• 延迟 。等待最短时间响应的请求位于顶部。

这些描述假设每个相应的选项从最短到最长排序。点击“ 瀑布” 列的标题会反转顺序。

图15 。按总时间排序瀑布。每个酒吧的较轻部分是等待花费的时间。较暗的部分是用于下载字节的时间。

分析请求

只要DevTools打开，它会将所有请求记录在“网络”面板中。使用“网络”面板分析请求。

查看请求日志

使用“查询”表查看DevTools已打开时所发出的所有请求的日志。点击或悬停请求会显示更多关于它们的信息。

图16 。请求表，以蓝色概述

“请求”表默认显示以下列：

• 名称。资源的文件名，或资源的标识符。

• 状态。HTTP状态码。

• 类型。所请求资源的MIME类型。

• 发起人

  。以下对象或进程可以启动请求：

  • 分析器 。Chrome的HTML解析器。
  • 重定向 。HTTP重定向
  • 脚本 。一个JavaScript函数。
  • 其他 。一些其他过程或操作，例如通过链接导航到页面或在地址栏中输入URL。

• 尺寸。响应标头的组合大小加上服务器发送的响应主体。

• 时间。总持续时间，从请求开始到收到响应中的最后一个字节。

• 瀑布 。每个请求活动的视觉分解。

添加或删除列

右键单击“请求”表的标题，然后选择一个隐藏或显示它的选项。当前显示的选项在它们旁边有复选标记。

图17 。向“请求”表中添加列。

添加自定义列

要将自定义列添加到“请求”表中，右键单击“请求”表的标题，然后选择“ 响应标头” >“ 管理标题列” 。

图18 。将自定义列添加到“请求”表中。

查看请求相对于彼此的时间

使用瀑布来查看请求相对于彼此的时间。默认情况下，瀑布由请求的开始时间组织。所以，比左边更远的请求开始比那些更右边的请求开始。

请参阅 按活动阶段排序， 以查看可以排序瀑布的不同方式。

图19 。“请求”窗格的“瀑布”列。

分析WebSocket连接的框架

要查看WebSocket连接的帧：

1. 单击“ 请求”表的“ 名称” 列下的WebSocket连接的URL 。
2. 单击 框架 选项卡。该表显示最后100帧。

要刷新表，请在“请求”表的“ 名称” 列下重新单击WebSocket连接的 名称 。

图20 。“框架”选项卡，以蓝色概括

该表包含三列：

• 数据 。消息有效载荷。如果消息是纯文本，则显示在此处。对于二进制操作码，此列显示操作码的名称和代码。支持以下操作码：连续帧，二进制帧，连接关闭帧，Ping帧和Pong帧。
• 长度 。消息有效负载的长度（以字节为单位）。
• 时间 。消息收到或发送的时间。

消息根据其类型进行颜色编码：

• 外发短信是浅绿色的。
• 收到的短信是白色的。
• WebSocket操作码为浅黄色。
• 错误是浅红色的。

查看响应正文的预览

要查看响应正文的预览：

1. 在“请求”表的“ 名称” 列下单击请求的URL 。
2. 单击 预览 选项卡。

此选项卡主要用于查看图像。

图21 。预览选项卡，以蓝色概述

查看响应体

查看请求的响应正文：

1. 在“请求”表的“ 名称” 列下单击请求的URL 。
2. 单击 标题 选项卡。

图22 。“响应”选项卡，以蓝色概述

查看HTTP头

查看有关请求的HTTP头数据：

1. 在“ 请求”表的“ 名称” 列下单击请求的URL 。
2. 单击 标题 选项卡。

图23 。标题标签，以蓝色勾画

查看HTTP头源

默认情况下，“标题”选项卡按字母顺序显示标题名称。按照接收的顺序查看HTTP头名称：

1. 打开您感兴趣的请求的 标题 选项卡。请参阅 查看HTTP头 。
2. 单击 查看源 ，旁边的 请求头 或 响应头 部分。

查看查询字符串参数

要以人类可读格式查看URL的查询字符串参数：

1. 打开您感兴趣的请求的 标题 选项卡。请参阅 查看HTTP头 。
2. 转到 查询字符串参数 部分。

图24 。查询字符串参数部分，概述为蓝色

查看查询字符串参数源码

查看请求的查询字符串参数源：

1. 转到查询字符串参数部分。请参阅 查看查询字符串参数 。
2. 点击 查看源 。

查看URL编码的查询字符串参数

要以人类可读的格式查看查询字符串参数，但保留编码：

1. 转到查询字符串参数部分。请参阅 查看查询字符串参数 。
2. 点击 查看URL编码 。

查看饼干

查看在请求的HTTP标头中发送的Cookie：

1. 在“请求”表的“ 名称” 列下单击请求的URL 。
2. 单击 Cookies 选项卡。

有关每个列的说明，请参阅 字段 。

图25 。Cookies标签，蓝色

查看请求的时间细分

查看请求的时间细分：

1. 在“请求”表的“ 名称” 列下单击请求的URL 。
2. 单击 时间 选项卡。

请参阅 预览时间细分 ，以便更快速地访问此数据。

有关可在“时间”选项卡中看到的每个 阶段 的更多信息，请参阅 定时故障阶段 。

图26 。时间标签，蓝色概述

以下是有关每个阶段的更多信息。

有关另一种访问此视图的方式，请参阅 查看时间细分 。

预览时间细分

要查看请求的时间细分的预览，将鼠标悬停在“请求”表的“ 瀑布” 列中的请求条目上。

请参阅 查看请求的时间细分， 以便访问不需要悬停的数据。

图27 。预览请求的时间细分

定时分解阶段解释

以下是有关“时间”选项卡中可能看到的每个阶段的更多信息：

• 排队

  。浏览器在以下情况下排队请求：

  • 有较高优先级的请求。
  • 已经有六个TCP连接打开这个来源，这是极限。仅适用于HTTP / 1.0和HTTP / 1.1。

• 失速。由于 排队 中描述的任何原因，请求可能会停止。

• DNS查找。浏览器解析请求的IP地址。

• 代理谈判。浏览器正在使用 代理服务器 协商请求。

• 请求发送。请求正在发送。

• ServiceWorker准备。浏览器正在启动服务工作者。

• 请求ServiceWorker。该请求被发送给服务工作者。

• 等待（TTFB）。浏览器正在等待响应的第一个字节。TTFB代表时间到第一个字节。

• 内容下载。浏览器正在接收响应。

查看发起者和依赖关系

要查看请求的发起者和依赖关系，请保存Shift 并将其悬停在“请求”表中的请求上。DevTools颜色启动器为绿色，依赖为红色。

图28 。查看请求的发起者和依赖关系

当“请求”表按时间顺序排列时，您悬停的请求之上的第一个绿色请求是依赖关系的启动器。如果还有另一个绿色请求，那么这个更高的请求是发起者的发起者。等等。

查看加载事件

DevTools显示的时机 DOMContentLoaded 和 load 事件在网络面板上的多个位置。该 DOMContentLoaded 事件为蓝色，而 load 事件是红色的。

图29 。网络面板中的 DOMContentLoaded 和 load 事件的位置

查看请求总数

“请求”总数列在“摘要”窗格中的“网络”面板的底部。

注意：此数字仅跟踪从DevTools打开以来已记录的请求。如果在DevTools打开之前发生其他请求，则不会计算这些请求。

图30 。自DevTools打开以来的总请求数

查看总下载大小

“网络”面板底部的“摘要”窗格中列出了请求的总下载大小。

注意：此数字仅跟踪从DevTools打开以来已记录的请求。如果在DevTools打开之前发生其他请求，则不会计算这些请求。

图31 。请求的总下载大小

导出请求数据

保存请求作为HAR与内容

要以HAR格式保存请求内容：

1. 右键单击“请求”表中包含请求的行。
2. 选择 另存为HAR与内容 。

图32 。选择另存为HAR内容

将一个或多个请求复制到剪贴板

在“ 请求”表的“ 名称” 列下，右键单击请求，将其悬停在“ 复制”上 ，然后选择以下选项之一：

• 复制链接地址 。将请求的URL复制到剪贴板。
• 复制响应 。将响应正文复制到剪贴板。
• 复制为cURL 。将请求复制为cURL命令。
• 全部复制为cURL 。将所有请求复制为cURL命令链。
• 全部复制为HAR 。将所有请求复制为HAR数据。

图33 。选择复制响应

更改“网络”面板的布局

展开或折叠“网络”面板UI的部分，专注于对您很重要的部分。

隐藏“过滤器”窗格

默认情况下，DevTools显示“ 过滤器”窗格 。单击“ 过滤器” 将其隐藏。

图34 。隐藏过滤器，概述为蓝色

使用大的请求行

默认情况下，DevTools在“ 请求”窗格中 使用小行。单击 使用大的请求行 来使用大行。

图35 。大型请求行，以蓝色概括

图36 。“请求”窗格中的小请求行的示例

图37 。“请求”窗格中的大请求行的示例

隐藏概述窗格

默认情况下，DevTools显示“ 概述”窗格 。单击 隐藏概览 以隐藏它。

图38 。隐藏概述，概述为蓝色

测量资源加载时间

使用 Network 面板测量您的网站网络性能。

Network面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie，等等。

TL;DR

• 使用 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 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。

记录网络活动

在 Network 面板打开时，DevTools 在默认情况下会记录所有网络活动。 要记录活动，只需在面板打开时重新加载页面，或者等待当前加载页面上的网络活动。

您可以通过 record 按钮指示 DevTools 是否记录。 显示红色 ( ) 表明 DevTools 正在记录。 显示灰色 ( ) 表明 DevTools 未在记录。 点击此按钮可以开始或停止记录，也可以按键盘快捷键 Cmd/Ctrl+e。

在记录期间捕捉屏幕截图

Network面板可以在页面加载期间捕捉屏幕截图。此功能称为 幻灯片 。

点击 摄影机 图标可以启用幻灯片。图标为灰色时，幻灯片处于停用状态 ( )。如果图标为蓝色，则说明已启用 ( )。

重新加载页面可以捕捉屏幕截图。屏幕截图显示在 概览 上方。

将鼠标悬停在一个屏幕截图上时， Timeline 将显示一条黄色竖线，指示帧的捕捉时间。

双击屏幕截图可查看放大版本。在屏幕截图处于放大状态时，使用键盘的向左和向右箭头可以在屏幕截图之间导航。

查看 DOMContentLoaded 和 load 事件信息

Network面板突出显示两种事件： DOMContentLoaded 和 load 。

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

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

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

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

查看单个资源的详细信息

点击资源名称（位于 Requests Table 的 Name 列下）可以查看与该资源有关的更多信息。

可用标签会因您所选择资源类型的不同而不同，但下面四个标签最常见：

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

查看网络耗时

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

生命周期按照以下类别显示花费的时间：

• Queuing
• Stalled
• 如果适用：DNS lookup、initial connection、SSL handshake
• Request sent
• Waiting (TTFB)
• Content Download

将鼠标悬停到 Timeline 图表内的资源上时，您也可以看到相同的信息。

相关指南：

• 了解 Resource Timing

查看 HTTP 标头

点击 Headers 可以显示该资源的标头。

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

点击每一部分旁边的 view source 或 view parsed 链接，您能够以源格式或者解析格式查看响应标头、请求标头或者查询字符串参数。

您也可以点击相应部分旁边的 view URL encoded 或 view decoded 链接，以网址编码或解码格式查看查询字符串参数。

预览资源

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

查看 HTTP 响应内容

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

查看 Cookie

点击 Cookies 标签可以查看在资源的 HTTP 请求和响应标头中传输的 Cookie 表。 只有传输 Cookie 时，此标签才可用。

下面是 Cookie 表中每一列的说明：

• Name 。Cookie 的名称。
• Value 。Cookie 的值。
• Domain 。Cookie 所属的域。
• Path 。Cookie 来源的网址路径。
• Expires / Max-Age 。Cookie 的 expires 或 max-age 属性的值。
• Size 。Cookie 的大小（以字节为单位）。
• HTTP 。指示 Cookie 应仅由浏览器在 HTTP 请求中设置，而无法通过 JavaScript 访问。
• Secure 。如果存在此属性，则指示 Cookie 应仅通过安全连接传输。

查看 WebSocket 框架

点击 Frames 标签可以查看 WebSocket 连接信息。

只有选定资源发起 WebSocket 连接时，此标签才会显示。

下表对 Frames 标签上表格中的每一列进行了说明：

• Data 。消息负载。如果消息为纯文本，将在此处显示。 对于二进制操作码，此字段将显示操作码的名称和代码。 支持以下操作码：
• 延续框架
• 二进制框架
• 连接关闭框架
• Ping 框架
• Pong 框架
• Length 。消息负载的长度（以字节为单位）。
• Time 。消息创建时的时间戳。

消息根据其类型进行彩色编码：

• 传出文本消息为浅绿色。
• 传入文本消息为白色。
• WebSocket 操作码为浅黄色。
• 错误为浅红色。

有关当前实现的说明：

• 要在每条新消息到达后刷新 Frames 表，请点击左侧的资源名称。
• Frames 表格仅保留最后 100 条 WebSocket 消息。

查看资源发起者和依赖项

按住 Shift 并将鼠标悬停在资源上，可以查看其发起者和依赖项。 本部分将您悬停的资源称为 目标 。

目标上方的第一个绿色编码资源为目标的发起者。 如果上方存在第二个也是绿色编码的资源，那么该资源将是发起者的发起者。 目标下方红色编码的任何资源都是目标的依赖项。

下方的屏幕截图中，目标是 dn/ 。此目标的发起者为以 rs=AA2Y 开头的脚本。 发起者 ( rs=AA2Y ) 的发起者为 google.com 。 最后， dn.js 是目标 ( dn/ ) 的依赖项。

请记住，对于具有大量资源的页面，您可能无法看到所有的发起者或依赖项。

排序请求

默认情况下， Requests Table 中的资源按照每个请求的开始时间排序，最早的请求位于顶部。

点击列标头可以按照该标头下每个资源的值对表格排序。 再次点击相同的标头可以将排序顺序更改为升序或降序。

Timeline列与其他列不同。点击此列时，它将显示一个由多个排序字段组成的菜单：

• Timeline 。按每个网络请求的开始时间排序。这是默认排序方式，与按 Start Time 选项排序相同。
• Start Time 。按每个网络请求的开始时间排序（与按 Timeline 选项排序相同）。
• Response Time 。按每个请求的响应时间排序。
• End Time 。按每个请求完成的时间排序。
• Duration 。按每个请求的总时间排序。选择此过滤器可以确定哪些资源的加载时间最长。
• Latency 。按请求开始与响应开始之间的时间排序。 选择此过滤器可以确定哪些资源至第一字节 (TTFB) 的时间最长。

过滤请求

Network面板提供了多种方式来过滤要显示哪些资源。 点击 Filter 按钮 ( ) 可以隐藏或显示 Filters 窗格。

使用内容类型按钮可以仅显示选定内容类型的资源。

注：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时启用多个过滤器。

Filter文本字段看似非常强大。如果您在其中输入任意字符串， Network 面板仅会显示文件名与给定字符串匹配的资源。

Filter文本字段还支持各种关键词，这样，您可以按照各种属性对资源排序，例如使用 larger-than 关键字按文件大小进行排序。

下文列表说明了所有关键字。

• domain 。仅显示来自指定域的资源。您可以使用通配符字符 ( * ) 来包含多个域。 例如， *.com 将显示来自以 .com 结尾的所有域名的资源。 DevTools 会使用它遇到的所有域填充自动填充下拉菜单。
• has-response-header 。显示包含指定 HTTP 响应标头的资源。 DevTools 会使用它遇到的所有响应标头填充自动填充下拉菜单。
• is 。使用 is:running 可以查找 WebSocket 资源。
• larger-than 。显示大于指定大小的资源（以字节为单位）。 将值设为 1000 等同于设置为 1k 。
• method 。显示通过指定 HTTP 方法类型检索的资源。 DevTools 会使用它遇到的所有 HTTP 方法填充下拉菜单。
• mime-type 。显示指定 MIME 类型的资源。DevTools 会使用它遇到的所有 MIME 类型填充下拉菜单。
• mixed-content 。显示所有混合内容资源 ( mixed-content:all )，或者仅显示当前显示的资源 ( mixed-content:displayed )。
• scheme 。显示通过未保护 HTTP ( scheme:http ) 或受保护 HTTPS ( scheme:https ) 检索的资源。
• set-cookie-domain 。显示具有 Set-Cookie 标头并带有与指定值匹配的 Domain 属性的资源。 DevTools 会使用它遇到的所有 Cookie 域填充自动填充下拉菜单。
• set-cookie-name 。显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。 DevTools 会使用它遇到的所有 Cookie 名称填充自动填充下拉菜单。
• set-cookie-value 。显示具有 Set-Cookie 标头并且值与指定值匹配的资源。 DevTools 会使用它遇到的所有 Cookie 值填充自动填充下拉菜单。
• status-code 。仅显示 HTTP 状态代码与指定代码匹配的资源。 DevTools 会使用它遇到的所有状态代码填充自动填充下拉菜单。

上面的一些关键字都提及自动填充下拉菜单。要触发自动填充菜单，请在键入关键字时后面加一个冒号。 例如，在下面的屏幕截图中，输入 domain: 触发了自动填充下拉菜单。

复制、保存和清除网络信息

在 Requests Table 中点击右键可以复制、保存或删除网络信息。 某些选项取决于上下文，因此，如果您希望操作单个资源，则需要右键点击该资源所在的行。

下面的列表说明了每一个选项。

• Copy Response 。将选定资源的 HTTP 响应复制到系统剪贴板。
• Copy as cURL 。以 cURL 命令字符串的形式将选定资源的网络请求复制到系统剪贴板。请参阅 以 cURL 命令形式复制请求 。
• Copy All as HAR 。以 HAR 数据形式将所有资源复制到系统剪贴板。HAR 文件包含用于说明网络“瀑布”的 JSON 数据结构。多款第三方 工具 可以依据 HAR 文件中的数据重建网络瀑布。请参阅 网页性能工具： HTTP 归档 (HAR) ，了解更多信息。
• Save as HAR with Content 。将所有网络数据及每一个页面资源保存到 HAR 文件。 二进制资源（包括图像）以 Base64 编码文本的形式编码。
• Clear Browser Cache 。清除浏览器缓存。 提示 ：您也可以从 Network Conditions 抽屉式导航栏中启用或停用浏览器缓存。
• Clear Browser Cookies 。清除浏览器的 Cookie。
• Open in Sources Panel 。在 Sources 面板中打开选定资源。
• Open Link in New Tab 。在新标签中打开选定资源。您也可以在 Network 表中双击资源名称。
• Copy Link Address 。将资源网址复制到系统剪贴板。
• Save 。保存选定的文本资源。仅在文本资源上显示。
• Replay XHR 。重新发送选定的 XMLHTTPRequest 。仅在 XHR 资源上显示。

以 cURL 命令形式复制一个或所有请求

cURL 是一种用于进行 HTTP 事务的命令行工具。

在 Requests Table 中右键点击某个资源，将鼠标悬停在 Copy 上，然后选择 Copy as cURL ，复制 Network 面板检测到的所有资源的 cURL 请求的字符串。

选择 Copy as cURL ，复制 Network 面板检测到的所有资源的 cURL 请求的字符串。

当您复制全部时，过滤将被忽略（例如，如果您过滤 Network 面板仅显示 CSS 资源，然后按 Copy All as cURL ，您将获取所有检测到的资源，而不只是 CSS）。

自定义 Network 面板

默认情况下， Requests Table 会使用小行显示资源。点击 Use large resource rows 按钮 ( ) 可以增大每一行的大小。

大行可以让某些列显示两个文本字段：主要字段和次要字段。 列标头指示次要字段的含义。

添加和移除表格列

右键点击 Requests Table 中的任一标题可以添加或移除列。

导航时保留网络日志。

默认情况下，每当您重新加载当前页面或者加载不同的页面时，网络活动记录会被丢弃。启用 Preserve log 复选框可以在这些情况下保存网络日志。 新记录将附加到 Requests Table 的底部。

其他资源

要详细了解如何优化您的应用的网络性能，请参阅下面的资源：

• 使用 PageSpeed Insights 确定可以应用到您网站的性能最佳做法，以及使用 PageSpeed 优化工具 将应用这些最佳做法的流程自动化。
• Google Chrome 中的高性能网络 讨论了 Chrome 网络内部机制，以及您如何充分利用它们让您的网站更快。
• gzip 压缩的工作原理 提供了 gzip 压缩的高级概览，并介绍了这种压缩为什么是一种不错的方法。
• 网页性能最佳做法 提供了更多用于优化您的网页或应用的网络性能的提示。

解决内存问题

了解如何使用 Chrome 和 DevTools 查找影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收。

TL;DR

• 使用 Chrome 的任务管理器了解您的页面当前正在使用的内存量。
• 使用 Timeline 记录可视化一段时间内的内存使用。
• 使用堆快照确定已分离的 DOM 树（内存泄漏的常见原因）。
• 使用分配时间线记录了解新内存在 JS 堆中的分配时间。

概览

在 RAIL 性能模型的精髓中，您的性能工作的焦点应是用户。

内存问题至关重要，因为这些问题经常会被用户察觉。 用户可通过以下方式察觉内存问题：

• 页面的性能随着时间的延长越来越差。 这可能是内存泄漏的症状。 内存泄漏是指，页面中的错误导致页面随着时间的延长使用的内存越来越多。
• 页面的性能一直很糟糕。 这可能是内存膨胀的症状。 内存膨胀是指，页面为达到最佳速度而使用的内存比本应使用的内存多。
• 页面出现延迟或者经常暂停。 这可能是频繁垃圾回收的症状。 垃圾回收是指浏览器收回内存。 浏览器决定何时进行垃圾回收。 回收期间，所有脚本执行都将暂停。因此，如果浏览器经常进行垃圾回收，脚本执行就会被频繁暂停。

内存膨胀：如何界定“过多”？

内存泄漏很容易确定。如果网站使用的内存越来越多，则说明发生内存泄漏。 但内存膨胀比较难以界定。 什么情况才算是“使用过多的内存”？

这里不存在硬性数字，因为不同的设备和浏览器具有不同的能力。 在高端智能手机上流畅运行的相同页面在低端智能手机上则可能崩溃。

界定的关键是使用 RAIL 模型并以用户为中心。了解什么设备在您的用户中深受欢迎，然后在这些设备上测试您的页面。如果体验一直糟糕，则页面可能超出这些设备的内存能力。

使用 Chrome 任务管理器实时监视内存使用

使用 Chrome 任务管理器作为内存问题调查的起点。 任务管理器是一个实时监视器，可以告诉您页面当前正在使用的内存量。

1. 按 Shift+Esc 或者转到 Chrome 主菜单并选择 More tools > Task manager ，打开任务管理器。

1. 右键点击任务管理器的表格标题并启用 JavaScript memory 。

下面两列可以告诉您与页面的内存使用有关的不同信息：

• Memory 列表示原生内存。DOM 节点存储在原生内存中。 如果此值正在增大，则说明正在创建 DOM 节点。
• JavaScript Memory 列表示 JS 堆。此列包含两个值。 您感兴趣的值是实时数字（括号中的数字）。 实时数字表示您的页面上的可到达对象正在使用的内存量。 如果此数字在增大，要么是正在创建新对象，要么是现有对象正在增长。

使用 Timeline 记录可视化内存泄漏

您也可以使用 Timeline 面板作为调查的起点。 Timeline 面板可以帮助您直观了解页面在一段时间内的内存使用情况。

1. 在 DevTools 上打开 Timeline 面板。
2. 启用 Memory 复选框。
3. 做记录 。

提示：一种比较好的做法是使用强制垃圾回收开始和结束记录。 在记录时点击 Collect garbage 按钮 ( ) 可以强制进行垃圾回收。

要显示 Timeline 内存记录，请考虑使用下面的代码：

var x = [];

function grow(){
  for (var i = 0; i < 10000; i++) {
    document.body.appendChild(document.createElement('div'));
  }
  x.push(new Array(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);

每次按代码中引用的按钮时，将向文档正文附加 1 万个 div 节点，并将一个由 100 万个 x 字符组成的字符串推送到 x 数组。运行此代码会生成一个类似于以下屏幕截图的 Timeline 记录：

首先，我们来说明一下用户界面。 Overview 窗格中的 HEAP 图表（ NET 下方）表示 JS 堆。 概览 窗格下方是 计数器 窗格。从这里，您可以看到内存使用按 JS 堆 （与 Overview 窗格中的 HEAP 图表相同）、文档、DOM 节点、侦听器和 GPU 内存细分。停用对应的复选框可以将其在图表中隐藏。

现在，我们将根据屏幕截图来分析代码。如果查看节点计数器（绿色图表），您会看到它与代码完全匹配。节点计数以离散步长方式增大。 您可以假定节点计数的每次增大都是对 grow() 的一次调用。 JS 堆图表（蓝色图表）的显示并不直接。为了符合最佳做法，第一次下降实际上是一次强制垃圾回收（通过按 Collect garbage 按钮实现）。随着记录的进行，您会看到 JS 堆大小高低交错变化。这种现象是正常的并且在预料之中：每次点击按钮，JavaScript 代码都会创建 DOM 节点，在创建由 100 万个字符组成的字符串期间，代码会完成大量工作。这里的关键是，JS 堆在结束时会比开始时大（这里“开始”是指强制垃圾回收后的时间点）。在实际使用过程中，如果您看到这种 JS 堆大小或节点大小不断增大的模式，则可能存在内存泄漏。

使用堆快照发现已分离 DOM 树的内存泄漏

只有页面的 DOM 树或 JavaScript 代码不再引用 DOM 节点时，DOM 节点才会被作为垃圾进行回收。 如果某个节点已从 DOM 树移除，但某些 JavaScript 仍然引用它，我们称此节点为“已分离”。已分离的 DOM 节点是内存泄漏的常见原因。此部分将教您如何使用 DevTools 的堆分析器确定已分离的节点。

下面是一个已分离 DOM 节点的简单示例。

var detachedNodes;

function create(){
  var ul = document.createElement('ul');
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li');
    ul.appendChild(li);
  }
  detachedTree = ul;
}

document.getElementById('create').addEventListener('click', create);

点击代码中引用的按钮将创建一个包含 10 个 li 子级的 ul 节点。 这些节点由代码引用，但不存在于 DOM 树中，因此它们已分离。

堆快照是确定已分离节点的一种方式。顾名思义，堆快照可以为您显示拍摄快照时内存在您页面的 JS 对象和 DOM 节点间的分配。

要创建快照，请打开 DevTools 并转到 Profiles 面板，选择 Take Heap Snapshot 单选按钮，然后按 Take Snapshot 按钮。

快照可能需要一些时间处理和加载。完成后，请从左侧面板（名称为 HEAP SNAPSHOTS ）中选择该快照。

在 Class filter 文本框中键入 Detached ，搜索已分离的 DOM 树。

展开三角符号以调查分离的树。

以黄色突出显示的节点具有 JavaScript 代码对它们的直接引用。 以红色突出显示的节点则没有直接引用。只有属于黄色节点的树时，它们才处于活动状态。 一般而言，您需要将注意力放在黄色节点上。 修复代码，使黄色节点处于活动状态的时间不长于需要的时间，您也需要消除属于黄色节点树的红色节点。

点击黄色节点对其进行进一步调查。在 Object 窗格中，您可以看到与正在引用该节点的代码相关的更多信息。 例如，在下面的屏幕截图中，您可以看到 detachedTree 变量正在引用该节点。要解决这一特定的内存泄漏，您需要研究使用 detachedTree 的代码并确保在不需要时，此代码可以移除其对节点的引用。

使用分配时间线确定 JS 堆内存泄漏

分配时间线是您可以用于跟踪 JS 堆中内存泄漏的另一种工具。

要显示分配时间线，请考虑使用下面的代码：

var x = [];

function grow(){
  x.push(new Array(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);

每次按代码中引用的按钮时，都会向 x 数组添加一个由 100 万个字符组成的字符串。

要记录分配时间线，请打开 DevTools，然后转到 Profiles 面板，选择 Record Allocation Timeline 单选按钮，按 Start 按钮，执行您怀疑导致内存泄漏的操作。完成后，按 stop recording 按钮 ( )。

记录时，请注意分配时间线上是否显示任何蓝色竖线（如下面的屏幕截图所示）。

这些蓝色竖线表示新内存分配。新内存分配中可能存在内存泄漏。 您可以在竖线上放大，将 Constructor 窗格筛选为仅显示在指定时间范围内分配的对象。

展开对象并点击它的值，可以在 Object 窗格中查看其更多详情。 例如，在下面的屏幕截图中，通过查看新分配对象的详细信息，您可以看到它被分配到 Window 作用域中的 x 变量。

按函数调查内存分配

使用 Record Allocation Profiler 类型可按 JavaScript 函数查看内存分配。

1. 选择 Record Allocation Profiler 单选按钮。如果页面上有一个工作线程，您可以使用 Start 按钮旁的下拉菜单选择它作为分析目标。
2. 按 Start 按钮。
3. 在您想调查的页面上执行操作。
4. 完成所有操作时按 Stop 按钮。

DevTools 按函数显示内存分配明细。默认视图为 Heavy (Bottom Up) ，将分配了最多内存的函数显示在最上方。

发现频繁的垃圾回收

如果感觉页面经常暂停，则可能存在垃圾回收问题。

您可以使用 Chrome 任务管理器或者 Timeline 内存记录发现频繁的垃圾回收。 在任务管理器中， Memory 或 JavaScript Memory 值频繁上升和下降表示存在频繁的垃圾回收。在 Timeline 记录中，JS 堆或节点计数图表频繁上升和下降指示存在频繁的垃圾回收。

确定问题后，您可以使用分配时间线记录找出内存正在分配到什么地方，以及哪些函数导致分配。

内存术语

本部分将介绍内存分析中的常用术语，适用于不同语言的各种内存分析工具。

此处介绍的术语和概念适用于 Chrome DevTools 堆分析器 。如果您之前使用过 Java 、.NET 或其他内存分析器，那么本部分内容对您来说将是全新的。

对象大小

将内存视为具有原语类型（如数字和字符串）和对象（关联数组）的图表。形象一点，可以将内存表示为一个由多个互连的点组成的图表，如下所示：

对象可通过以下两种方式占用内存：

• 直接通过对象自身占用。
• 通过保持对其他对象的引用隐式占用，这种方式可以阻止这些对象被垃圾回收器（简称 GC ）自动处置。

使用 DevTools 中的堆分析器（一种用于检查在“Profiles”下发现的内存问题的工具）时，您会看到多个信息列。 Shallow Size 和 Retained Size 这两个列比较引人注目，但它们表示什么呢？

浅层大小

这是对象自身占用内存的大小。

典型的 JavaScript 对象会将一些内存用于自身的说明和保存中间值。通常，只有数组和字符串会有明显的浅层大小。不过，字符串和外部数组的主存储一般位于渲染器内存中，仅将一个小包装器对象置于 JavaScript 堆上。

渲染器内存是渲染检查页面的进程的内存总和：原生内存 + 页面的 JS 堆内存 + 页面启动的所有专用工作线程的 JS 堆内存。尽管如此，即使一个小对象也可能通过阻止其他对象被自动垃圾回收进程处理的方式间接地占用大量内存。

保留大小

这是将对象本身连同其无法从 GC 根 到达的相关对象一起删除后释放的内存大小。

GC 根由 句柄 组成，这些句柄在从原生代码引用 V8 外部的 JavaScript 对象时创建（本地或全局）。所有此类句柄都可以在 GC 根 > 句柄作用域 和 GC 根 > 全局句柄 下的堆快照内找到。本文档对句柄的介绍没有深入到浏览器实现的细节，可能让您感到困惑。您不必担心 GC 根和句柄。

存在很多内部 GC 根，其中的大部分都不需要用户关注。从应用角度来看，存在以下种类的根：

• Window 全局对象（位于每个 iframe 中）。堆快照中有一个距离字段，表示从 window 出发的最短保留路径上的属性引用数量。
• 文档 DOM 树，由可以通过遍历文档到达的所有原生 DOM 节点组成。并不是所有的节点都有 JS 包装器，不过，如果有包装器，并且文档处于活动状态，包装器也将处于活动状态。
• 有时，对象可能会被调试程序上下文和 DevTools 控制台保留（例如，在控制台评估后）。在调试程序中清除控制台并移除活动断点，创建堆快照。

内存图从根开始，根可以是浏览器的 window 对象或 Node.js 模块的 Global 对象。您无法控制此根对象的垃圾回收方式。

任何无法从根到达的对象都会被 GC 回收。

注：浅层大小和保留大小列均以字节为单位表示数据。

对象保留树

堆是一个由互连的对象组成的网络。在数学领域，此结构被称为“图表”或内存图。图表由通过 边缘 连接的 节点 组成，两者都是给定标签。

• 节点 （ 或对象 ）使用 构造函数 （用于构建节点）的名称进行标记。
• 边缘 使用 属性 的名称进行标记。

了解 如何使用堆分析器记录分析 。我们可以从下面的堆分析器记录中看到一些引人注目的参数，例如距离：距离是指与 GC 根之间的距离。如果相同类型的几乎所有对象的距离都相同，只有少数对象的距离偏大，则有必要进行调查。

支配项

支配对象由一个树结构组成，因为每个对象都有且仅有一个支配项。对象的支配项可能缺少对其所支配对象的直接应用；也就是说，支配项的树不是图表的生成树。

在下面的图表中：

• 节点 1 支配节点 2
• 节点 2 支配节点 3 、4 和 6
• 节点 3 支配节点 5
• 节点 5 支配节点 8
• 节点 6 支配节点 7

在下面的示例中，节点 #3 是 #10 的支配项，但 #7 也存在于从 GC 到 #10 的每一个简单路径中。因此，如果对象 B 存在于从根到对象 A 的每一个简单路径中，那么对象 B 就是对象 A 的支配项。

V8 详细信息

分析内存时，了解堆快照的显示方式非常有用。本部分将介绍一些特定于 V8 JavaScript 虚拟机 （V8 VM 或 VM）的内存相关主题。

JavaScript 对象表示

存在三种原语类型：

• 数字（例如 3.14159..）
• 布尔值（true 或 false）
• 字符串（例如“Werner Heisenberg”）

它们无法引用其他值，并且始终是叶或终止节点。

数字可以存储为：

• 中间 31 位整型值（称为 小整型 ( SMI )），或
• 堆对象，作为 堆数字 引用。堆数字用于存储不适合 SMI 格式的值（例如 双精度 ），或者在需要将值“包装”起来时使用（例如在值上设置属性）。

字符串可以存储在以下位置：

• VM 堆 中，或
• 渲染器内存 中（外部）。将创建一个 包装器对象 并用于访问外部存储空间，例如，外部存储空间是存储脚本源和从网页接收（而不是复制到 VM 堆上）的其他内容的位置。

新 JavaScript 对象的内存分配自专用的 JavaScript 堆（或 VM 堆 ）。这些对象由 V8 的垃圾回收器管理，因此，只要存在一个对它们的强引用，它们就会一直保持活动状态。

原生对象是 JavaScript 堆之外的任何对象。与堆对象相反，原生对象在其生命周期内不由 V8 垃圾回收器管理，并且只能使用其 JavaScript 包装器对象从 JavaScript 访问。

Cons 字符串是一种由存储并联接的成对字符串组成的对象，是串联的结果。 cons 字符串 内容仅根据需要进行联接。一个示例便是需要构造已联接字符串的子字符串。

例如，如果您将 a 与 b 串联，您将获得一个字符串 (a, b)，它表示串联结果。如果您稍后将 d 与该结果串联，您将得到另一个 cons 字符串 ((a, b), d)。

数组- 数组是一个具有数字键的对象。它们在 V8 VM 中广泛使用，用于存储大量数据。用作字典的成套键值对采用数组形式。

典型的 JavaScript 对象可以是两个数组类型之一，用于存储：

• 命名属性，以及
• 数字元素

数字元素如果属性数量非常少，可以将其存储在 JavaScript 对象自身内部。

映射- 一种用于说明对象种类及其布局的对象。例如，可以使用映射说明用于 快速属性访问 的隐式对象层次结构。

对象组

每个原生对象组都由保持对彼此的相互引用的对象组成。例如，在 DOM 子树中，每个节点都有一个指向其父级的链接，并链接到下一个子级和下一个同级，形成一个互连图。请注意，原生对象不会在 JavaScript 堆中表示 - 这正是它们的大小为什么为零的原因。相反，创建包装器对象。

每个包装器对象都会保持对相应原生对象的引用，用于将命令重定向到自身。这样，对象组会保持包装器对象。不过，这不会形成一个无法回收的循环，因为 GC 非常智能，可以释放包装器对象不再被引用的对象组。但是，忘记释放单个包装器将保持整个组和关联的包装器。

如何记录堆快照

了解如何使用 Chrome DevTools 的堆分析器记录堆快照以及如何查找内存泄漏。

Chrome DevTools 的堆分析器可以按页面的 JavaScript 对象和相关 DOM 节点显示内存分配（另请参阅 对象保留树 ）。使用分析器可以拍摄 JS 堆快照、分析内存图、比较快照以及查找内存泄漏。

拍摄快照

在 Profiles 面板上，选择 Take Heap Snapshot ，然后点击 Start 或者按 Cmd + E 或 Ctrl + E：

快照最初存储在渲染器进程内存中。当您点击快照图标进行查看时，它们将根据要求传输到 DevTools 中。

在快照加载到 DevTools 中并解析后，快照名称下方将出现一个数字，显示 可到达 JavaScript 对象 的总大小：

注：只有可到达对象才会包含到快照中。此外，拍摄快照始终从垃圾回收开始。

清除快照

按 Clear all profiles 图标可以（同时从 DevTools 和渲染器内存）移除快照：

关闭 DevTools 窗口不会从渲染器内存中删除配置文件。重新打开 DevTools 时，之前拍摄的所有快照都会重新显示在快照列表中。

示例：查看此 离散对象 示例，并使用堆分析器对其进行分析。您应看到多个（对象）项目分配。

查看快照

从不同角度查看不同任务的快照。

Summary 视图可以显示按构造函数名称分组的对象。使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用）。此视图特别适用于 跟踪 DOM 泄漏 。

Comparison 视图可以显示两个快照之间的不同。使用此视图可以比较两个（或多个）内存快照在某个操作前后的差异。检查已释放内存的变化和参考计数让您可以确认是否存在内存泄漏及其原因。

Containment 视图允许您探索堆内容。此视图提供了一种更好的对象结构视图，有助于分析全局命名空间 (window) 中引用的对象以找出是什么让它们始终如影随形。使用此视图可以分析闭包以及在较低级别深入了解您的对象。

Dominators 视图可以显示 支配树 ，并且对于查找聚集点非常有用。此视图有助于确认对对象的意外引用已消失，以及删除/垃圾回收正在运行。

要在视图间切换，请使用视图底部的选择器：

注：并不是所有属性都存储在 JavaScript 堆上。不会捕捉使用执行原生代码的 getter 实现的属性。另外，也不会捕捉数字等非字符串值。

Summary 视图

快照最初会在 Summary 视图下打开并显示对象概览，可以将此视图展开以显示实例：

顶级条目为“概览”行。这些行显示：

• Constructor 表示使用此构造函数创建的所有对象。
• 对象实例数 显示在 # 列中。
• Shallow Size 列显示通过特定构造函数创建的所有对象浅层大小的总和。浅层大小是指对象自身占用的内存大小（一般来说，数组和字符串的浅层大小比较大）。另请参阅 对象大小 。
• Retained Size 列显示同一组对象中最大的保留大小。某个对象删除后（其依赖项不再可到达）可以释放的内存大小称为保留大小。另请参阅 对象大小 。
• Distance 显示使用节点最短简单路径时距根节点的距离。

在上面的视图中展开一个概览行后，将显示其所有实例。对于每一个实例，其浅层大小和保留大小将显示在相应的列中。@ 字符后面的数字是对象的唯一 ID，您可以使用此 ID 以对象为基础比较堆快照。

请注意，黄色对象具有 JavaScript 引用，红色对象则是引用自具有黄色背景的对象的已分离节点。

各个构造函数（组）条目在堆分析器中与什么对应？

• （全局属性） – 全局对象（例如“window”）与其引用的对象之前的中间对象。如果对象使用构造函数 Person 创建且由某个全局对象占用，那么保留路径将类似于 [global] >（全局属性）> Person。这与常规相反，常规情况下对象直接引用彼此。我们出于性能原因而采用中间对象。全局项会定期修改，而属性访问优化则非常适合不适用于全局项的非全局对象。
• （根） – 保留树中的根条目是引用选定对象的条目。这些条目也可能是引擎出于其自身目的创建的引用。引擎具有引用对象的缓存，但所有此类引用非常弱，并且如果没有很强的引用，无法阻止对象被回收。
• （闭包） – 通过函数闭包对一组对象的引用计数
• （array、string、number、regexp） – 不同对象类型的列表，这些类型具有引用 Array、String、Number 或正则表达式的属性。
• （已编译代码） – 简单地说就是与已编译代码相关的任何内容。脚本与函数类似，但对应于

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• zyplayer-doc 1.0.0 发布，统一的开发文档管理工具
• zyplayer-doc 1.0.0 发布，统一的开发文档管理工具
• 开发工具分享
• JavaScript开发工具大全
• 开发工具之 VSCode
• 用 Go 开发接口服务--环境搭建和开发工具选择

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。