Chrome 开发工具指南

谷歌 Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。

适用人群

这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作. 通过本教程，你将学会如何使用这些工具，并且学会如何通过它来分析调试提供的 Demo 。

学习前提

在你继续本教程之前，你必须对简单的术语有一定的了解，比如源码，文档等等。因为在你的组织下处理各级软件项目，如果你有软件工作的知识在软件开发和软件测试流程那是最好的。

参考英文：https://developer.chrome.com/devtools/index

最新英文地址：https://developers.google.com/web/tools/setup/?hl=en

谷歌浏览器开发工具综述

谷歌开发工具(以下用开发者工具简称），是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。

注意：如果你是一个网页开发者同时想要获得最新版本的开发工具，那么你应该使用谷歌浏览器（金丝雀）Canary 版。

使用开发工具

要使用开发工具，直接打开一个网页或者谷歌浏览器的一个网页应用。另一种方式：

• 选择浏览器位于浏览器窗口右上方的菜单栏的工具目录，选择开发者工具选项。

• 右击页面任何位置并选择审查元素。

开发工具将会在浏览器的下方打开。

有一些快捷键也可以用来打开开发工具： Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I)。

Ctrl + Shift + J ( 或在 Mac 上使用 Cmd + Opt + J) 打开开发者工具同时集中焦点于控制台。

Ctrl + Shift + C (或在 Mac 上使用 Cmd + Shift + C) 在审查模式下打开开发者工具或是在开发者工具已经打开的情况下开启查阅选项。

学习使用快捷键可以为你每天的工作流节省时间。

开发者工具窗口

开发者工具窗口的顶部工具栏中排列着任务相关的组。每个工具栏项目和相应的面板让你能够使用网页或应用程序的特定信息来工作，包括 DOM 元素，资源，和源。

图为开发者工具中的颜色选择器。

总体而言，有八个主要的工具可供查看开发工具：

• 元素

• 资源

• 网络

• 源

• 时间表

• 简介

• 审核

• 控制台

你可以使用 Ctrl + [ 和 Ctrl + ] 快捷键在面板之间移动。

查阅 DOM 和格式

元素面板让你看到一个 DOM 树的全部相关信息，并允许你检查以及在传输过程中编辑 DOM 元素。当你需要确认页面某些方面的 HTML 代码段时，你会经常访问元素标签。例如，你对图像的 HTML id 属性和值是什么感到好奇的时候。

在 DOM 中查看标题元素。

关于查阅 DOM 和格式

利用控制台进行工作

JavaScript 控制台为开发者提供了测试 Web 页面和应用程序两个主要功能,其中包括：

• 在开发过程中记录诊断信息。

• 一个可与文档和工具交互的 shell 提示符。

您可以使用控制台编程接口提供的方法来记录诊断信息。如 console.log() 或 console.profile()。

您可以直接在控制台中评估表达式，并使用命令行提供的方法。这些包括使用 $() 命令选择元素或通过 profile() 方法启动 CPU 分析器命令。

在 JS 控制台上评估一些命令。

关于工作的控制台

JavaScript 的调试

由于 JavaScript 应用程序复杂性的增加，开发商需要强大的调试工具来帮助开发者快速发现问题的原因和并找出有效的解决方法。Chrome 开发工具包含了一些有用的工具来使得调试 JavaScript 更加轻松。

一个在控制台输出日志的条件断点。

关于如何应用调试工具调试 JavaScript

提高网络性能

网络面板提供了有关已经下载和加载过的资源的详细分析。在优化页面的基本过程中，确定和找到那些请求通常要比预计的时间更长。

网络请求的上下文菜单。

想了解更多关于如何提高你的网络性能的知识，请点击

审计

审计面板可以像加载页面时那样分析一个页面。然后提供关于减少页面加载时间的建议和优化，以此提高感知（和真实）的响应。要进一步的了解该功能，我们推荐使用 pagespeed 。

提高渲染性能

在加载和使用你的网页应用程序或网页时，时间轴面板给你关于时间开销的完整概述。包括从加载资源到解析 JavaScript，以及计算方式在内的所有事件，都会重新绘制在一个时间表中。

一个有着多种时间的时间轴示例。

关于如何提高渲染性能

JavaScript 和 CSS 的性能

配置面板允许您为网络应用程序或页面配置执行时间和内存使用量。这些有助于你理解资源的消耗，以帮助你优化你的代码。提供的分析器有：

• CPU 分析器会显示你页面上的 JavaScript 函数的执行时间
• 堆内存分配器 显示页面的 JavaScript 对象和 DOM 节点。
• JavaScript 配置文件会显示脚本的执行时间。

堆快照的示例。

关于使用JavaScript和CSS如何提高性能

监视存储

资源面板允许你监视页面中加载的资源。它可以让你使用 HTML5 的本地存储，数据库，缓存，appcache，等。

Web Starter Kit 的 JavaScript 文件会显示在资源面板中。

要关于监视存储的内容，请点击

进一步阅读

还有一些其他的开发工具文档内容，这些内容会有对你有用的东西。具体包括：

• 堆分析
• 中央处理器
• 设备模式与移动仿真
• 远程调试
• 视频工具

更多资源

获得更多

您也可以在 @chromiumdev 上寻求我们的帮助或使用论坛问个问题。

在控制台中的样式输出。

确定在 Google+ 上检查谷歌浏览器开发页面。

参与

提交一个 bug 错误或工具的特征请求，请在 http://crbug.com 使用问题追踪。请同时提到“工具”的错误总结中。

crbug.com 的错误报告类选择器。

请直接回馈给我们以让开发者工具变得更好。

调试扩展

想使用工具来调试 Chrome 扩展插件？观看开发和调试扩展插件。该教程也可以用于调试。

开发工作流程

开发者工作流程一般来说就是需要通过一些步骤来达到一个目标。当作者拥有了开发者工具，这就可以优化工作流程以较少的时间来完成常规任务，比如锁定文件或者函数，持续编写脚本或者样式表，保存经常使用的片段或者仅仅是重新布置一下布局，让其更贴合你得需求。

在这一节中，我们将讲解一些小技巧，让你在使用 DevTools 时的工作流程变得更加高效。

Dock-To-Right 提供了垂直编辑

你可能发现开发者工具在底部时，提供了一些水平空间，可是垂直方向上留下的空间很少。右边的锚点允许你将开发者工具放到窗口右边。这样你就可以在左边窗口可以查看当前的页面，而将测试的东西放在了屏幕的右侧。

这样的好处在于：

• 你可能在一个宽屏的显示器上工作，而且你希望可以最大化空间去检查和测试你的代码
• 你可以改变并分开你的布局，使其小于 400 px（当前 Chrom 的最小尺寸）并测试调整后的布局。
• 比较长脚本使用垂直空间更方便调试

导航到一个你想要排错的 URL 然后按住位于开发者工具左手边底部布局的按钮。在 dock-to-right 和 dock-to-window 之间切换，

注意：开发者工具将会记住你最后一次的选项，所以你可以自己在两种方式间切换。

这将调整屏幕以显示可用的布局选项。一旦你已经选中了一个偏好，布局将会立刻改变来响应这个更改。

注意：每一个选项卡都有它自己相应的布局形式。这就意味着可能某个选项卡工具是在屏幕右侧而另外一个选项卡则在窗口底部。

搜索，导航和过滤

过滤一个脚本，样式表或者根据文件名过滤一个片段

对于一个开发者的工作流程来说，能够快速定位一个特殊的文件是非常有必要的。通过使用下面的快捷键，开发者工具可以使你搜索全部的脚本，样式表和文件片段：

• Ctrl + o (windows,Linux)
• Cmd + o (Mac OS X)

这个工具与当前正在使用的控制台无关。对于Todo app，使用下面这些快捷键中的某一个将会带我们进入 Sources 面板并且提供一个列出所有可检查文件的搜索框。

在这里，我们可以过滤出特定的文件（例：文件命中包含script）或者选中一个文件，预览或者编辑。

注意:在所有的对话中，我们均提供驼峰匹配。比如：打开FooBarScript.js，你可以只写 FBaSc，这样可以节省时间。

当前文件中的文本搜索

在当前的文件中搜索一个特殊的字符串可以使用以下的快捷键：

• Ctrl + F (Windows,Linux)
• Cmd + F (Mac OS X)

一旦已经输入了一个关键字到搜索框中，点击回车会调转到第一个匹配的结果。继续点击回车将会在结果中进行跳转，或者你也可以点击搜索框旁边的 up 和 down 箭头按钮来进行跳转。

在当前的文件中进行文字替换

开发者工具支持当前文件中定位文字，此外也同样支持用新的值来替换替换单个或者所有文字。选中 “Relpace” 将会出现第二个输入区域来填写用于替换的文本。

在所有文件中搜索文字

如果你希望在所有加载的文件中搜索特定的文字，你可以用下面的快捷键来加载搜索框界面：

• Ctrl + Shift + F (Windows,Linux)
• Cmd + Opt + F (Mac OS X)

这里同时提供了正则表达式和敏感大小写的搜索方式。

使用正则表达式搜索

使用正则表达式进行搜索，就是在搜索处填入表达式，然后选中 Regular Expression 最后点击回车。

在上面的图中我们可以看见如何搜索所有匹配

中内容的例子。

在文件中过滤一个函数或者是一个选择器

你应该还想要更多功能，这样就可以在一个文件中导航到（或者搜索到）特殊的 JavaScript 函数或者是 CSS 规则文件。

要导航到你选中的文件，进入源面板。然后你就可以使用下面的快捷键来打开一个对应函数/特定选择器的一个选择框：

• Ctrl + Shitf + O (Windows,Linux)
• Cmd + Shitf + O (Mac OS X)

基于选中文件的类型，你将会看见所有的 JavaScript 或者是 CSS 样式定义。开始输入你要搜索的函数名称或者是 CSS 定义时就会过滤出一个列表的结果，或者是直接选择一个结果，进入到定义这个内容的文件中。

跳转到指定行号

开发者工具同时也可以在编辑器中直接跳转到指定行号。要启动行号输入框，只需要选中你要查找的文件，然后使用下面的快捷键来启动：

• Ctrl + L (Windows)
• Cmd + L (Mac OS X)
• Ctrl + G (Linux)

实时编辑脚本和样式

开发工具支持实时编辑脚本和样式，不需要重新加载页面就可以看到效果。这对于测试设计的更改，原生 JavaScript 函数或者代码块很有帮助。

脚本

JavaScript 可以直接在 Sources 面板中进行编辑。打开指定的脚本进行编辑，或者：

1. 在元素面板的视图中点击相应脚本的链接（例：\）

   

2. 或者从 Scources 子面板中选择脚本的文件名：

这会在右边的面板上显示一个新的标签，里面的源文件将会是语法高亮的。

对于脚本的更改只会在评估时间执行，也就是说对代码的修改不是在页面加载后进行的话，将不会产生效果。修改后的代码会在下一个阶段执行，比如鼠标滑过监听或者点击事件的回调更改后可以快速进行测试。

获取更多有关 JavaScript 在 Sources 面板进行调试的信息，请关联阅读在 JavaScript 排错 文档。同时也可以查看 在线编辑器上的短屏幕截取和断点排错。

提示：工作空间对于本地文件的持续编辑也是支持的。查看更多

样式

下面有一个和编辑样式类似的工作流。打开开发者工具，选择元素面板。在右边，一些子面板将会被显示出来，其中就包括样式面板。检查在页面上的某个元素将会在风格面板上显示一组已经被应用到当前节点的属性，并且会按选择器进行排序。

在 "element.style" 部分会显示在页面标记中通过样式属性设置的相关属性。

下一个部分是 ”Matched CSS Rules“，这里会显示匹配相应节点的选择器，他们的属性和值，甚至是其源文件名，以及读取该样式的行号。选择器匹配的节点将会被设置为黑色，其他的将会显示成灰色。这么做最大的好处就是在于我们在阅读时可以更好的区分选择器筛选出来的东西。

在一个子面板中改变任何 CSS 属性，比如一个元素的边界和尺寸，将会将会立刻生效并且在主显示窗口中显示。

 

返回 ”Matched CSS Rules“ 面板，点击在规则旁边的样式表的链接也可以引导你进入 "Sources" 面板。这会显示完整的样式表并且会直接定位到相关的 CSS 规则的行号处。

在这里，你可以向使用常规编辑器那样更改文件，并且浏览器会实时显示更改后的效果。

另存为

如果你对于做出的更改感到满意，你可以保存文件。

为此，首先要确认你是否源面板下的文本编辑视图中做出的更改：

或者是在 ”Element->Style panle“(for SASS/CSS）中点击文件名称（例如：style.css）。

接下来，右键点击文件名或者直接点击文本编辑器内任意位置，然后选择"Save As"。这将弹出一个允许你保存的菜单。

之后提交的更改（在同样的菜单中保存的或者是使用 Ctrl/Cmd + S 快捷键）都会保存到同一个位置中。

本地修改

开发工具同样维护了所有对本地文件做出的历史修改。如果你已经编辑了一段脚本或者样式表并且使用了开发工具进行保存，你可以在 Sources 右键一个文件名（或者在 source 区域）然后选择 ”Local modifications“ 来查看历史记录。

一个本地修改面板将会显示：

• 不同的更改
• 更改文件的时间
• 被修改文件所在的域名

此外还有一些链接。revert 会将文件上所有的更改回复到它原始的状态，并且移除更改历史。

Apply original content 将有效地重复同一操作，但是会维护视图中的修改历史，以免你希望回溯到某个特定更改后。

最终，apply version content 将会应用全部更改，并提供时间集上的特定修改记录。

自定义 JavaScript 片段

有时候你想能够保存小的脚本，书签和实用的工具好让这些工具可以让你在调试的时候可以用的上。Snippets 是一个新的可以在这个开发流程中使用的开发者工具，它允许你在源面板中创建，存储和执行 JavaScript。现在可以在Chrome Canary 中获取。

以下是 Snippets 比较有用的情况：

• 书签 所有你的书签可以作为片段进行存储，特别是那些你可能想编辑的。
• 实用工具 调试工具可以和当前页面进行交互，并且可以保存和调试。一个社区企划的列表已经被提供。
• Debugging Snippets 提供了一个语法高亮显示并且可持续的多行控制台，这样使得调试代码比单行要更加便捷。
• Monkey-patching code 你想要在运行时修复的代码可以通过 Snipptes 来完成，尽管多数时候你可能只是在源面板中实时编辑代码。

Brian Grinstead 提供了一个存放有用 Snippets 给开发者的地方，就在 bgrins.github.io/devtools-snippets

开始

用 Snippets 开始，导航到 Sources 面板。如果你没有做出任何改动，你将会看到默认的布局，就像下面一样：

点击在上面左边角落的切换键可以显示展开后的面板。这里你应该已经看见了 Sources，Content scripts 和一个新的标签，Snippets。点击它然后进入 Snippets。

创建 Snippets

Snippets 通过两个面板来工作。左侧的面板（与 Sources 相似）是文件列表，选择一个 snippets 文件将会在右边的编辑器中打开它。这和你在源面板中选中脚本或者样式表是类似的。

在文件列表中右键点击并选择 "New" 会创建一个新的 snippet 文件。

Snippet 文件名称

Snippet 文件名称是被自动创建的，但是当 snippets 文件创建之后，你同样也可以自行更改文件名。

这之后只要想再次更改文件名，只需在文件列表中再次右键，选中 “Rename”。如果你需要的话也可以选择 “Remove” 。

编辑和执行 Snippets

从文件列表中选择一个 Snippets 文件，然后在你的右侧的编辑器中打开。这里你可以写或者粘贴任何 JavaScript 代码（换句话说就是你的 Snippet），包括函数和表达式。

如果一个文件名以 * 结尾，那么就意味着这个文件已经被修改，但是没有保存。

要执行这个 Snippet，在文件列表上右键在该文件，然后选择 ”Run“。或者你可以点击 *Run（>）* 按钮。

如果这个 snippet 会有控制台输出，编辑器下的控制台会输出相关内容。

注意：使用键盘快捷键也可以执行一个 snippet-选中你的 snippet ，之后使用 Ctr / Cmd + Enter 来运行它。这和使用 Run（>）按钮的行为是一样的-当前仅仅在 Source 控制台，但是之后将会跳转到到 debugger 控制台。

如果你想在控制台中，执行 snippet 的一些特殊行中的代码，你可以在编辑器中选中这些代码，然后右键，选择 "Evaluate in Console" 选项来进行执行。键盘上的快捷键是 Ctrl + Shift + E。

选中 Run 后，输出的表达式将会在编辑器下方的控制台中输出。

本地修改

对于每一个 Source，Snippet 也支持浏览本地更改并回滚到一个特定时间点的更改。

保存更改后在编辑器中右键，然后选择 “Local modifications” 就可以使用该功能。

断点，观察表达式以及更多功能

其他你在 Sources 面板中使用的功能，比如添加观察表达式，断点，收起变量和保存文件同样也可以在 Snippet 中使用。

请阅读 Sources 面板这一章来了解更多关于这些功能的更多内容。

保存 Snippets

Snippets 可以被保存并且之后依旧能够通过开发者工具中的  Snippets 选项卡来使用，或者直接导出一个新的文件。在文本编辑中右键打开编辑菜单以获取 Snippet 的保存选项。

Save 会将变更保存到已有的 Snippets 文件中，而 Save As 将会允许你将这个 Snippets 保存到新的文件路径中。

注意：Snippets 保存在开发者工具的本地存储中。当使用 Sava/Save As的时候，你可以将这个 Snippets 绑定到任何位置的文件中，就像保存其他脚本一样。

Snippets 导航

就像在 Sources 中的脚本和样式表一样，Snippets 也可以使用我们之前提到的相应的键盘快捷键，比如导航到特定的 Snippets 文件，函数，或者行号。

使用控制台

利用控制台可以让你：

• 日志诊断信息可以帮你分析 web 页面或者应用上的错误
• 输入命令来与文档以及 Chrome 开发者工具进行交互

你可能也会自己评估一般的 JavaScript 表达式。这个文档提供了一个控制台的预览和常规使用的概述。你可以浏览 Console API 和 Conmmand Line API 引用材料来理解更多的功能。

基础操作

打开控制台

Javascript 控制台可以在两个地方打开。控制台面板是主要的进入点。它同样也可以在其他任何面板中通过使用抽屉来打开。打开控制面板，用下面的选择下面提供的一种方式：

• 使用键盘快捷键 Command + Option + J（Mac） 或者 Control + Shitf + J（Windows/Linux）。
• 选择  > More Tools > JavaScript Console.

 一个干净的控制台界面

要打开抽屉式控制台，你需要在键盘上按下 Esc 键或者点击开发者工具窗口右上角的 Show Drawer 按钮。

 在元素面板上的抽屉式控制台

清除控制台历史信息

要清除控制台历史信息，你需要这么做：

• 在控制台中右键或者按住 Ctrl 点击然后从上下文菜单中选择 Clear Console
• shell 提示符中输入 clear() 命令行 API。
• 在 Javascript 中执行 console.clear() 调用控制台 API。
• 使用键盘快捷键 Cmd + K,^ + L(Mac)Ctrl + L（ Linux 和 Windows ）。

信息栈

控制台会将以栈的形式持续输出相同的信息。这使得提供给你的信息会尽可能的简短。

禁止时间戳（默认）	允许时间戳

两种栈状态的例子

测试控制台模式的简单代码

msgs = ['hello', 'world', 'there'];
for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)])

选择帧

控制台可以在页面的不同帧中运行。主页是文档的最外层帧。以 iframe 元素为例，它将会创造出它自己的上下文框架。你也可以通过使用在过滤按钮旁边的下拉框来指定这个帧。

 选择一个次要的帧

 这张图片展示了窗口源在顶级帧和选中的次要帧中改变。

使用控制台 API

控制台 API 是一组方法的集合，它由开发者工具定义的全局 console 对象提供。API 的其中一个主要目的就是在你的应用运行的时候输出日志信息到控制台中。你也可以在控制台中为输出信息分组，以减少视觉混乱。

向控制台输出

console.log() 方法会使用一个或者多个表达式来作为参数，之后会将他们当前的值输出到控制台中。

一个简单的向控制台输出的例子：

var a = document.createElement('p');
a.appendChild(document.createTextNode('foo'));
a.appendChild(document.createTextNode('bar'));
console.log("Node count: " + a.childNodes.length);

 一个在控制台中输出的例子

多个参数会串联到有限行中。

多个参数的 console.log()

console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());

 多重参数的 console.log() 的输出。

错误和警告

错误和警告就跟一般的日志信息的显示一样。不同的地方在于 error() 和 warn() 通过它们自己样式来吸引注意力。console.error() 方法展示的是一个红色的图标并且伴有红色的信息文字。console.warn() 方法展示的是黄色的图标和黄色的信息文字。

使用控制台 warn 和 error 方法。

使用 error() 方法。

function connectToServer() {console.error("Error: %s (%i)", "Server is  not responding",500);
}
connectToServer();

connectToServer() 如何在控制台中显示。

使用 warn() 方法

if(a.childNodes.length < 3 ) {console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}

 警告输出的例子。

断言

console.assert() 方法仅仅只当它的第一个参数为 false 时才显示一个错误信息字符串（它的第二个参数）

一个简单的断言并且如何展示的例子。

在下面的代码中，如果在列表中的子节点的数量超过 500，将会在控制台中引起错误信息。

console.assert(list.childNodes.length < 500, "Node count is > 500");

 一个失败断言如何在控制台中显示。

过滤控制台的输出

你可以通过过滤器选项中的安全级别来过滤控制台的输出。通过控制面板的左上角的过滤器图标来激活过滤器。下面的过滤器选项是可以选择的：

ALL	显示所有控制台输出
Errors	只显示 console.error() 输出的信息
Warnings	只显示 console.warn() 输出的信息
Info	只显示 console.info() 输出的信息
Logs	只显示 console.log() 输出的信息
Debug	只显示 console.timeEnd() 和 console.debug() 输出的信息

 过滤器只显示错误级别的信息。

输出分组

你可以通过分组命令把相关联的输出信息分在一起。group 命令通过一个字符串的参数来给你的组命名。控制台将会把所有所有的输出信息组合到一块。要结束分组，你只需要调用 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 groupconsole.group("Authorizing user '%s'", user);if (authorized) {console.log("User '%s' was authorized.", user);}// End nested groupconsole.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");

 控制台中的嵌套分组输出信息。

当你对输出信息进行多次分组以后，你就不用直接看到全部的输出信息了，这是非常有用的。你可以通过调用 groupCollapsed()，代替之前使用的 group() 来自动为信息分组。

console.groupCollapsed() 的使用方式

示例代码：

console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {...
}
console.groupEnd();

groupCollapsed() 输出信息

浏览结构化数据

table() 方法提供一个简单的方法来查看相似数据对象。这将给一个数据提供属性并且创建一个头。行数据将会从每一个索引属性值中获取。

控制台中一个使用 2 个数组的示例的显示。

示例代码：

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"]);

示例代码的输出:

字符串的替换和格式化

任何日志方法的第一个参数可能都会包含一个或者多个格式说明符。一个说明符由一个 % 符号和后面跟着的字符组成，这个字符用来定义用于格式化的值。这个参数跟随的字符串就是占位符中所要显示的。

下面的例子使用了字符串和数字格式来插入要输出的字符串。你将会看到在控制台中 Sam 有 100 个点。

console.log("%s has %d points", "Sam", 100);

完整的格式化说明符如下：

%s	格式化成 string
%i 或者 %d	格式化成 integer
%f	格式化成一个浮点类型
%o	格式化成一个可扩展的 DOM 元素。就跟在元素面板中看到的一样
%o	格式化成一个可扩展的 JavaScript
%c	通过第二个参数来申请一个 CSS 风格的输出字符串

这个例子使用了数字占位符来格式化 document.childNodes.length 的值。它也同样使用了浮点类型的占位符来格式化 Date.now();

代码如下：

console.log("%s has %d points", "Sam", 100);

示例替代的输出

示例代码的输出预览

将 DOM 元素格式化成 JavaScript 对象

当你想要在控制台中记录一个 DOM 元素，就显示成了 XML 格式。在元素面板中也会是同样的显示。要显示 JavaScript 格式的信息，你可以使用 dir() 方法或者是在 log() 中使用占位符来替换成你的 JavaScript。

两种不同显示的区别：

log() 视图	dir() 视图

使用 CSS 样式来更改控制台输出形式

CSS 格式说明符可以修改在控制台中输出的样式。以你要修饰的文字配上占位符开始，然后在第二个参数中写上你要展示的风格。

更改日志样式

示例代码：

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

 示例代码的输出结果。

计算时间开销

通过 time() 方法可以启动一个计时器。你必须输入一个字符串来识别时间的标记。当你要结束计算的时候，使用 timeEnd() 方法，并且传递一个相同的字符串给构造器。控制台会在 timeEnd() 方法结束的时候，记录下标签以及时间的花销。

关于 JavaScript 执行时间的示例代码以及输出：

示例代码：

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");

在控制台上的输出结果：

当 time() 方法正在执行期间，将会生成一个 时间轴 记录并为其做出注解。这对于追踪应用的使用以及其来源非常有用。

 time() 执行时间轴上的注解是如何显示的。

制作时间轴

时间轴面板提供了关于引擎时间开销的完整概述。你可以在控制台中调用 timeStamp() 添加一个标记到时间轴中。这是将你的应用的事件和其他事件相关联的一个简单的办法。

注意：只有在时间轴记录正在运行的时候 timeStamp() 方法才能使用。

timeStamp() 在下面的地方给时间轴做注解：

• 在时间轴的总结和详细视图中的黄色垂线处
• 在事件列表中添加了一个记录

示例代码如下：

function AddResult(name, result) {console.timeStamp("Adding result");var text = name + ': ' + result;var results = document.getElementById("results");results.innerHTML += (text + "<br>");
}

 时间轴中的时间戳

在 JavaScript 中设置断点

调试器 声明将会开启一个调试会话。这就相当于在这一行中的脚本上设置一个断点。

使用 brightness() 开启调试会话。

示例代码：

brightness : function() {debugger;var r = Math.floor(this.red*255);var g = Math.floor(this.green*255);var b = Math.floor(this.blue*255);return (r * 77 + g * 150 + b * 29) >> 8;
}

示例代码的输出：

记录语句的执行

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]);

示例代码使出的内容：

使用命令行 API

命令行比一个简单的日志输出目录要强大的多。它在当前网页中，同样是一个全终端的提示。命令行 API有以下的一些特征：

• 方便选择 DOM 元素的函数
• 用来控制 CPU 检测的函数
• 一些控制台 API 的匿名方法
• 显示器事件
• 给一个物体注册视图事件的监听

计算表达式

当你按下 Enter 的时候，控制台将会计算任何你提供的 JavaScript 表达式。有两种完成方式，一种是全自动，一种是使用tab。只要你输入一个表达式，就会提供名称提示。如果有多个匹配的选项，使用 ↑ 和 ↓ 来在它们之间循环。按下 → 将会选择当前的选项。如果只有一个选项，按下 Tab 键也会选中当前的选项。

 一些示例表达式在控制台的显示

选择元素

有一些选择元素的快捷键。相比普通的使用方式，这些快捷键为你节省了大量时间。

$()	返回第一个匹配 CSS 选择器的元素。这也是 document.quertSelector() 的快捷方式
$$()	返回包含所有匹配 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 元素，开发者工具将会跳转到元素面板并且显示那个元素。如果你提供一个 JavaScript 引用，那么将会转到概述面板。

当这段代码在你的页面上执行，它将会抓取数字，然后将其显示在元素面板。这是采取了 $_ 属性的优点来估算这个输出的表达式。

$('[data-target="inspecting-dom-elements-example"]')
inspect($_)

使用最近选择的元素和对象

控制台存储了最近的 5 个元素和对象。一旦你在元素面板中选中了元素，或者是在概述面板中选中了一个对象，就会被记录在历史栈中。$x 提供了一个进入历史栈的入口。要注意的是计算机是从 0 开始计数的。这就意味着最先选中的是 $0,而最后选中的是 $4。

监听事件

monitorEvents() 方法让开发者工具记录特定目标的日志信息。第一个参数是监听的对象。如果第二个参数没有提供参数，则所有事件都返回。为了具体说明你要监听的事件，你需要提供一个字符串或者一个字符串数组作为第二个参数。

在页面的 body 上监听点击时间。

monitorEvents(document.body, "click");

如果开发者工具支持的某个事件类型映射到了标准事件名称上，那么该类型的时间会被监听。控制台 API 有一个完整的从事件到事件类型上的映射。

停止对 body 对象的监听，可以调用 unmonitorEvents() 方法并且告诉它要停止监听的对象。

停止对 body 对象的监听

unmonitorEvents(document.body);

控制 CPU 检测

profile() 函数会开启 JavaScript CPU 检测。你也可以通过输入一个字符串来为检测命名。要停止检测就调用 profileEnd() 方法。

创建一个没有命名的检测。

profile()
profileEnd()

示例检测：

如果你提供了一个标签，该标签会被当做标题。如果你创建了多个配置文件，并且它们用的是同一个标签，那么它们将会被分到统一组下。

示例代码：

profile("init")
profileEnd("init")
profile("init")
profileEnd("init")

在配置面板上的结果：

多个 CPU 配置文件可以同时操作。并且，你不需要按照创建顺序关闭它们。

按照相同的顺序嵌套的关闭语句：

profile("A")
profile("B")
profileEnd("A")
profileEnd("B")

按照交替的顺序嵌套的关闭语句：

profile("A")
profile("B")
profileEnd("B")
profileEnd("A")

设置

在开发者工具的设置窗口中的常规选项卡里你可以修改四个控制台设置。

Hide network message	让控制台不输出有关网路问题的日志信息。比如： 404 和 500 系列的问题将不会被记录。
Log XMLHTTPRequests	决定控制台是否要记录每一个 XMLHttpRequest。
Preserve log upon navigation	决定在导航到其他页面的时候控制台历史记录是否要删除
Show timestamps	如果有一个语句调用了控制台，该选项将会显示每个调用的时间戳。这同时也会使 message stacking 失效

总结

Chrome 开发者工具提供了一个强大的控制台。现在你应该已经知道了如何开始使用这个工具来存储信息以及获取元素。该工具的实用性为你提供了无限的可能性，以此工具为基石，你可以构筑你的 web 乐园。

技巧和窍门

控制台

编写多行命令

当你进入控制台的多行编写模式时，你可以像标准文字编辑器那样使用文本块。Shitf + Enter 允许你从控制台进入多行模式。

当你编写的 JavaScript 远比单行文字要复杂的时候，这是非常有用的。一但你创建了一个文字编写区域，在命令的最后按 Enter 就会开始运行。

关于多行控制台支持持久性问题，请阅读Snippets-该特征可以保存并执行开发工具中可用的特定 JavaScript 片段。

检查元素模式的快捷启动方式

Ctrl + Shitf + C 或者 Cmd + Shift + C 将会在检查元素模式中打开开发者工具（或者选择让它获取焦点），这样你就可以立即检查当前页面。同时焦点全部都会返回到该页面上。在 Mac 上，使用 Cmd + Shift + C 也可以达到相同的效果。

更多：使用控制台 | 开发者工具文档

对 console.table 命令的支持

这个命令记录了任何使用列表布局的数据。下面是一些例子，包括如何使用：

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

也有另一个 columns 可选参数，它会以字符串数组的形式展示。下面，我们定义了一个 family 对象，其中包含很多 “Person”，之后选择一行来显示：

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.table(family, ["firstName", "lastName"]);

更多:对 console.table 命令的支持已经上线 | G+

预览控制台日志对象

日志输出的对象可以使用 console.log() 方法直接在开发工具中预览，而不需要更多的操作。

传递多个参数来指定控制台日志样式

就像我们之前在文档中说过的，你可以使用 %c 给你的控制台添加样式，就像你在 Firebug 中一样。比如：

console.log("%cBlue!", "color: blue;");

同样也支持多种样式:

console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');

更多：在开发者工具上让日志有自己的风格 | G+

清理控制台历史的快捷键

打开控制台，你可以通过 Ctrl + L 或者 Cmd + L 快捷键 来快速的清理控制台历史.控制台中的 console.clear() 命令通过 JavaScript 的控制台 API 来完成清除工作，就和 shell 下的 clear() 一样。

成为一个键盘忍者

在开发者工具上，你可以使用 ? 来打开通用设置，从那里你可以定位到快捷键面板来查看所有支持的快捷键

通过控制台使用元素

选择一个元素然后在控制台中输出 $0，它将会使用脚本来执行。如果在这个页面上已经有 jQuery 对象，你可以使用 $($0) 来重新选择这个页面上的元素。

你也可以在任何一个元素上右键然后点击 Reveal in Elements Panel，这样就可以在DOM 中找到它。

通过 XPath 表达式查询 DOM

XPath 是一个在文档中选择节点的查询语言，一般来说返回一个节点的集合，字符串，boolean,或者数字。你可以在 Javascript 开发者工具控制台中使用 XPath 表达式来查询 DOM。

$x(xpath) 命令允许你执行一个脚本。下面的例子将会展示如何通过 $x('//img') 来搜索图片：

然而，该函数同样能够接受第二个参数，该参数是关于路径上下文的，比如：$x(xpath,context)。这就允许我们选择一个详细的上下文（也就是一个内嵌帧）然后使用 XPath 来查询。

var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);

在详细的内嵌帧中查询图片

获取控制台最后的结果

使用 $_helper 会允许你获取控制台的最后结果。我们可以用另外一个 XPath 的例子来证明这个：

使用 console.dir

console.dir(object) 命令将会以一个可扩展的 JavaScript 对象形式列出所有提供的对象的所有属性。下面的例子展示了 document.body 下的一个表示属性的可扩展对象。

在具体的帧中运行 JS 控制台

开发者工具底部是下拉选项，它将根据你当前标签的上下文改变。当你在控制台面板的时候，下拉列表允许你选择一个控制台能够操作的帧上下文。在下拉框中选择你的帧，然后你会马上在右侧找到它。

当导航到一个新的页面时停止清理控制台

有时候要跳转到一个新的页面上时，你想保持在控制台上的日志信息。要实现这个，只要在控制台右键，然后选择 "Preserve Log upon Navigation"。当你从当前页面导航到一个不同的页面时，控制台历史信息将不会被清除。

使用 console.time() 和 console.timeEnd() 进行标准循环

console.time() 用一个特定的标签开启一个新的计时器。当用相同的标签调用 console.timeEnd() 的时候计时器停止，在控制台上会显示两次记录间流逝的时间。在不调用函数的情况下，该方法用于衡量循环或者代码非常有用：

使用 console.profile() 和 console.profileEnd() 来进行配置

打开开发者工具，调用 console.profile() 来开始一个 Javascript CPU 配置。一般来说一个配置只能标记一个标签，就像下面的 console.("Processing") 一样。要结束这个配置，调用 console.profileEnd()。

每一个配置文件运行后都会添加到 Profiles 面板中

同时也会添加到 console.profiles[] 数组中，以供后续的查看：

查看更多有关控制台技巧，请进入使用控制台。

• 通过控制台 API提供的方法来记录程序的诊断信息，比如 console.log() 或者是 console.profile（）
• 命令行 API提供的方法,比如选择元素的 $() 命令，或者开启 CPU 配置的 profile() 命令。

时间轴

利用时间轴帧模式配置帧

时间轴面板提供了关于加载你的 web 应用时花费时间的预览，比如进入 DOM 事件花费的时间，提交页面布局或者在屏幕渲染元素的花费。它也允许你进入三个单独的方面来查明为什么你的应用会很慢，这三个界面是：时间，帧以及实际内存使用。

时间轴默认情况下并不会显示任何数据。但是通过打开你的 app，然后点击在窗口底部的圆圈 ，来开启一个 session 的记录。或者使用 Ctrl + E 或者 Cmd + E 的快捷键也会开始一个录制的标记。

这个录制按钮将会从灰色变为红色，时间轴也会开始捕获你的 app。在你的 app 中完成几个动作后再次按下按钮来停止录制。

帧模式让你洞察到进行中的任务，你的应用程序会按帧（更新）在屏幕上显示。在这个模式中，阴影的垂直区域标尺对应重新计算的样式，合成等等。每一个垂直长条的透明部分表示空闲时间，至少是在你页面上的空闲时间。

举个例子，你的第一帧需要 15 毫秒，但是执行第二帧需要 30 毫秒。一个常见的情况是帧的刷新率是同步的，所以第二帧将稍微比 15 毫秒多一点去渲染。这里，3 号帧丢失了 “true” 硬件帧并且已经提交给了后面一帧，因此第二帧的时长其实相当于双倍了。

如果你的应用并没有很多的动画在其中，并且在执行输入事件的时候浏览器需要执行大量重复的动作，那么使用帧是个好办法。当你有足够的时间在帧内执行完这样的事件，那么你的应用响应能力会更高，并且将会有良好的用户体验。

当我们设定为 60 fps时，我们有最多 16.66 ms来做点事情。这点时间并不算多，所以让尽可能提升你动画的性能是十分重要的。

更多：利用时间轴开发工具提升性能|开发者工具文档

使用警告定位到指定的布局事件

在时间轴中，如果你在记录视图中看见一个黄色的图标，就说明你的一些代码触发了强制/同步布局事件。

你希望避免这些不必要的布局触发器，因为他们能够显著影响到你的页面的性能。

更多：时间轴警告是一种性能的味道 | G+

通过别人来分享和分析一段时间轴记录

你可以浏览和并且跟其他开发者分享时间轴，这要感谢一个有用的导入/导出插件。使用 Ctrl + E 或者 Cmd + E 来开始/结束记录然后在时间轴上右键，选择 Save Timeline data。该菜单还支持重新浏览已经导出的时间轴数据。

给时间轴记录做注释

使用 console.timeStamp() 函数可以给你的时间轴记录添加注解。这就帮你把你的 web 中的代码和另外一个窗口或者浏览事件关联在了一起。

更多：开发者工具控制台 API-制作时间轴 | 开发者文档

你的应用可以通过调用 console.timeStamp() 函数来对你的时间轴记录进行注释。这就使你可以轻易的将代码和另一个窗口以及浏览事件绑定在一起。在下面的记录中，时间轴被标记为 “Adding Result”。下面来看看通过使用控制台来制作时间轴的例子。

FPS 计数器/HUD 展示

real-time FPS 计数器是一个用来视图化帧速和躲闪的工具。该工具可以通过进入设置菜单然后选中 ”Show FPS meter“ 来使用。

当这个工具开始运转，你将会看到在右下角有一个黑色的盒子，同时还有帧的统计数字。该计数器可以在实时编辑中用于诊断你的页面为什么掉帧，而不必在时间轴视图间来回切换。

更多：使用开发者工具的绘制模式来分析长时间绘制事件 | HTML5Rocks

需要谨记的是如果你只是追踪 FPS 计数器可能会使你没有注意到的断断续续的跳帧现象。在使用 content 的时候一定要注意。如果 FPS 在桌面上的效果与在设备上的效果不一样，这也没有意义。所以要特别的小心在性能上的配置。

更多配置使用时间轴的实用技巧，请跳转到利用时间轴来进行性能描述：

• 一个只要应用运行就会记录并分析所有活动的地方，这是开始调查你的应用性能问题的最好的地方。
• 深入了解帧速，记录中生成的几种类型以及 Chrome 计算页面元素的位置和大小时的布局流程。

概述

通过 3 snapshot 技术来查找 Javascript 内存漏洞

1. 打开开发者工具选择概述面板
2. 在你的页面进行一些引起漏洞的操作
3. 生成一个新的堆快照
4. 重复步骤 2 和步骤 3 三次
5. 选择最后的堆快照
6. 将过滤器从”所有对象“改为”快照 1 和 2 之间的对象“
7. 你现在应该已经可以看到漏洞对象的集合。你可以选择其中的一个并在对象保留树中来查看其包含内容的列表，这有助于找到泄露的原因。

更多：BloatBusters-在 Gmail 中消除内存漏洞

理解堆检测中的节点

红色节点是处于生命周期的，因为他们是分离的 DOM 树中的一部分，并且树中有一个节点被 JavaScript （或者是一个闭包变量，一些属性）引用。

黄色节点表示一个从 DOM 节点，引用的一个对象的属性或者一个数组元素。应该有一系列从 DOM 窗口到元素的属性(比如 window.foo.bar[2].baz)。

更多所：理解堆概述中的节点 | G+

理解在 CPU 概述中的时间开销

在 CPU 概述中，”（idel）“，时间是当前标记的。花费在非浏览器中的程序是（”program“）。

堆配置视图的更多了解

一个我们经常问的问题：在开发者工具 > Profile > Heap sanpshot 中，Comparison，Dominator，Containment 以及 Summary 视图的区别是什么。这些视图提供了对分析器中数据的更多视角，就像下面一样：

Comparsion 视图通过显示已经被垃圾回收器正确清理的对象来帮助你追踪内存漏洞。通常用于比较某次操作前后的两份（或更多）内存快照。具体内容是通过检查变化区释放的内存和引用计数来确认内存泄漏的存在以及造成泄露的原因。

Dominators 视图用于确认垃圾回收正常工作时出现的本不该存在于对象上的引用（也就是说他们）。

Summary 视图可帮助您在利用构造器名称分组的基础上捕获对象（和它们的内存使用）。这个视图通常对追踪 DOM 漏洞很有帮助。

Containment 视图提供了一个更好的对象构建视图，它帮助我们通过全局的命名空间（也就是窗口）来分析对象，找出是什么是他们一直保持存在。它允许分析程序闭包并从底层深入你的对象。

更多：驯服独角兽：在谷歌浏览器中对 JavaScript 的内存的简单剖析

更多内存剖析技巧，请参考内存性能剖析:

• 该文章会叫你如何使用分析堆内存来找出你的应用中的内存漏洞
• 可以深入查看不同视图的数据 - 包括 Summary 视图，Comparison 视图，Containment 视图以及 Dominator 视图。

源

在 DOM 修改器上调试

右键点击一个元素然后选中 “Break on Subtree Modification”:不论什么时候脚本穿过了元素并且修改了他们，调试器都能够自动的运转起来，以便告诉你正在发生什么：

另外值得一提的是，暂停内嵌样式属性的修改，对于调试 DOM 动画非常有用 。

追踪未捕获异常

从 Sources 面板中，双击暂停脚本执行按钮会在未捕获异常发生时中断代码执行，并保留调用堆栈和应用程序的当前状态-有些人将之称为紫色暂停。

使用 console.log 的条件断点活动

我们知道开发者工具支持条件断点，只需要你在想要的行上点击一下设置一个断点，就跟普通的设置断点一样。

你可以在某一行右键然后选择 "Edit Breakpoint"，然后就出现了一个表达式编辑区域。把你需要的条件写在这里（比如：如果表达式的返回值为真，则断点将会在这里停止）

一个普通的表达式可能是这个样子：x === 5，然而 console.log 声明同样是完全有效的输入。

这个方法十分有效，并且我们也可以轻易的看见在断点上调用的 console.log 语句：

由于 console.log 没有一个真正的返回值，不确定的条件断点不会导致执行被暂停，你的代码将继续运行。这非常像一个通过硬编码来执行 console.log 表达式而不直接修改你的代码。

更多：JavaScript 断点活动 | randomthink.net

格式化 JavaScript

开发者工具支持格式化精简后的 JavaScript 以便阅读。要格式化，你需要：

• 进入 Sources 面板，然后从脚本列表中选择你想要格式化脚本。
• 然后点击在开发者工具底部的格式化按钮(用大括号来标记)
• 你的代码应该已经排版好了

格式化之前：

格式化之后：

重点观察一个表达式或者一个变量的值

在一次调试会话中，为了避免重复编写一个你要多次查看的变量或者表达式，你可以把它添加到 “Watch Expression” 列表中。当你修改它们之后可以刷新或者直接运行代码来查看改变后的效果。 

查看内部属性

假设你定了一个变量，其值为 s 并且对它执行下面的操作：

s.substring(1, 4)  // returns 'ell'

你认为 s 是一个字符串么？事实上不一定。它也可能是一个字符串对象的包装。试试看下面的观察表达式：

"hello"
Object("hello")

第一个是字符串常量，第二个是一个完整的对象。令人困惑是，这两个值几乎是一模一样的。但是第二个有一个真正的属性，你也可以自行设置。

展开属性列表你就会注意到，它为什么不是一个完整的对象：它会有一个内在的属性 [[PrimitiveValue]],这里面存储着字符串原本的值。你并不能通过你的代码来访问这个属性，但是你现在可以通过开发者工具的调试工具来查看它。

更多： 通过开发者工具学习 Javascript 概念 | GitHub

简化调试 XHRs

从调试器中打开 "XHR 断点"选项，当开始一个 XHR 请求时你可以指定你的代码跳入任何一个 URL (甚至是一个子字符串)。甚至是告诉它加载每一个 XHR 时都中断。

取消注册在元素上的事件处理器

随着 “Element” 标签的打开，找到在 DOM 树中的元素，然后点击要选择的节点。注意：你也可以通过使用控制台 API 中的 getEventListener(targetNode) 来实现。

在右侧，点击展开 “Event Listeners” 选项。在那里你会找到所有注册在元素上的事件监听列表。

Esc 键显示控制台

当在 Sources 面板中调试的时候，你有时候会希望同时进入控制台。这时你只需要简单的点击下 escape 键就可以打开控制台了。

你可以在这个控制台编写执行 JavaScript 来查看预期效果，但是更好的地方是如果你在一个断点初暂停，已经执行的 JS 将会在当前暂停的上下文中。

提升在断点处暂停时的效率

当你的脚本在一个断点处暂停时，会有一些有用的参数供你使用。

你可能会知道通过 “Continue”，“Step Over”,"Step Into" 以及 “Step Out” 来控制代码的执行，但是这些按钮都有键盘快捷键。学习这些会让你的在代码中导航时更加高效。

观察表达式（在侧边栏的右侧）将会将会监视表达式，所以你不必总是跳回控制台（例如 X===Y）。调用堆栈显示了从系统开始运行一直到当前位置时经历过的函数调用。

在 Scope Variables，你可以在任何函数上右键然后使用 “Jump to definition” 来进入定义这个函数的脚本内部。

DOM 断点展示了任何在元素面板中右键一个节点时使用 “Break on” 做出的更改。这对调试监听器是否已经正确的添加到节点上以及当他们被调用时发生了什么很有帮助。

XHR 断点面板也同样十分有用，因为它可以为 XMLHttpRequests 设置断点。通过输入一个你想要查看 URL 子字符串来具体说明断点。

在异常中暂停

你可能想在抛出一个异常的时候暂停 JavaScript 的执行，并检查调用栈，范围变量和您的应用程序的状态。

在脚本面板的顶部有一个暂停按钮,它可以让你选择不同的异常处理模式。你可能不想暂停所有的异常，除非你正在调试的代码是被 try/catch 包裹着的。

全部脚本文本上的搜索

如果你想在所有加载在一个页面上的文件中查找一个指定的字符串，你可以通过下面的快捷键调用搜索面板：

• Ctr + Shift + F（Windows,Linux）
• Cmd + Opt + F（Mac OSX）

这个搜索同时支持正则表达式和区分大小写。

通过开发者工具和源映射调试 CoffeeScript

源映射提供了一个语言无关的方法来将编译过的工程代码映射到你原来的开发环境中编写的源代码。

当分析产品代码的时候，代码通常已经被缩小过（以防一个语言被翻译成编译过的 JavaScript），这就使你很难找到哪一行代码是映射到你原本的代码中的。

在编译阶段，源映射（source map）可以保存这个信息以允许你调试产品代码，并且会将你原本文件中的行号返回给你。这使得整个世界都不同了，因为你可以再阅读产品代码的同时进行调试了，不管它是在 CoffeeScript 中或是其它分位置 - 只要它具有一个源映射，你就可以轻松调试。

要在 Chrome 中启用源映射：

• 打开 Setting cog > General
• 选择 “Enable source maps”

下面：

• 要将你的 CoffeeScript 编译到 JavaScript，执行这条命令：coffee -c myexample.coffee
• 安装 CoffeeScript Redux
• 创建一个源映射文件 example.js.map ，这个文件应该保存映射信息：$ coffee-redux/bin/coffee --source-map -i example.coffee > example.js.map
• 确保生成的 JavaScript 文件，example.js，在最后一行已经有映射到源文件的 url，就像这样：//# sourceMappingURL=example.js.map

当你开始调试你的 CoffeeScript 代码的时候，应该感谢这个声明，是它让开发者工具知道了你的源文件在哪里。

然后，您可以利用这个源映射，在您的优化 / 缩小阶段使用类似 UglifyJS2 的工具引用第一个源映射（ CS 到 JS ），并把它所映射的简化后的 JavaScript 文件返回到 CoffeeScript 上，而不是直接传给编译后的 JavaScript 的输出位置。这就允许你直接调试产品代码，并且改动会直接返回到 CoffeeScript 源代码中。

更多：NetTuts-Source Maps 101

更多有用的创作工作流程技巧，请转到创作和开发工作流程:

• 在这里你可以学习如何优化你的开发工作流程以节省一些常规操作所花的时间，比如定位到文件或者某个函数，持续编辑脚本或样式表以及简化调整布局的过程。
• 学习有关新特性的内容，比如 Snippet，该特性可以用于保存并执行开发工具内置的特定的 JavaScripts 片段。

元素

启用尺子

在 Setting > General > Show rulers 下可以启用一个尺子，当你鼠标悬停在某个元素上或者选中一个元素的时候，它会显示出来。

CSS 属性的自动完成

开发者工具支持 CSS 属性以及值的自动完成（包括那些需要前缀的），这对于决定为当前元素设置什么属性是很有帮助的。

当你开始为属性或者值输出一个名称的时候就会弹出建议，而且你也可以使用右键在可用的属性列表中滚动。要知道，选中的选项会直接应用到页面样式表中因此它的效果是可以直接看到的。

在样式面板中，使用已命名的字段（比如：“red”）,HSL，HEX 或者 RGB 值可以定义颜色。如果需要的话，你可以按住 shift/鼠标点击以在这些值之间迭代选择。

如果你想要展示所有支持的属性，你可以使用 Ctrl + space 来展示一个建议列表。

建议列表是和特定内容相关的并且在特定情况下（比如，针对字体的时候）数字，已命名或者带前缀的值也是也可以显示出来的。

在开发者工具中的颜色选择器

开发者工具中包含了一个内置的颜色选择器，当你点击任何有效颜色的预览方块时，就会显示出来。

你可以 Shift + 点击，来更改选中颜色的格式。

添加新的 CSS 样式

在 CSS 规则的代码块(包括 "element.style")内点击任何地方都可以添加一个新的 CSS 属性，并且该属性会立即应用到当前页面。

一旦你已经成功添加了一个属性，你可以按下 tab 键来设置下一个属性。

点击  按钮，新的选择器将会被添加到右边的 Style 子面板中。这样可以定义一个选择器，同样地，你可以用这种方式添加新的属性以及值。

注意：你也可以通过单击一个选择器的名称来编辑 Style 面板中的任何选择器。一旦名称发生改变，选择器已经存在的属性将会被添加到新的选择器定义的元素中。

新的伪类选择器可以通过一种类似的方式来添加，就是将他们加入到选择器的名称之后。同样需要注意的是点击新建选择器按钮旁边的 “toggle element states”  按钮后，将转换到 "Force element state" 面板中。

返回到 “Matched CSS Rules” 面板中，点击规则后面样式表的链接将会进入 Sources 面板。在该面板中会显示完整的样式表定义，并且会跳转到相应规则所在的行。

在元素面板中拖曳

在元素面板中你可以拖拽一个元素来改变他在父类中的位置，或者将它移动到文档中一个完全不同的地方。

强制元素状态

想要强制元素适应某种特定状态？

• 右键一个子元素然后选择 “Inspect Element”
• 在元素面板中右键其父元素，并选择 “Force Element State”
• 可以选择其中一个：active，:hover，：focus，：visited 来强制进入其中一种状态。

通过开发者工具编写并调试 Sass

注意：要在 Chrome 中编写 Sass 你必须要有 3.3.0（预览版)版本的 Sass 编译器，这是现在仅有的支持源映射的版本。

调整一个含有预编译的 CSS 样式的文件可以算是一种挑战，因为在开发工具中对 CSS 样式做出的修改并不会返回到 Sass 源文件中。这意味着，当你做出更改后，如果你希望这些改动能够生效，那就必须返回到源文件中通过外部编辑器手动做出更改。

最近 Sass 开发工作流做出了改进，使得这不再是问题。要获取 Sass 支持：

1. 确认你有在开发者工具使用 about:flags 的经验
2. 接下来，进入 Setting cog > Experiment 然后启用 “Sass stylesheet debugging”（注意，这个特性很快将会结束实验阶段） 
3. 进入 General menu > Settings > Check 选中 “Enable source maps” 和 “Auto-reload CSS upon Sass save“。  你可以将超时为默认值。这取决于 Sass 编译器需要花费多长时间编译，你可能需要调整这个自动重载的延迟。如果有必要你也可以让自动重加载失效，改用手动刷新页面。
4. 导航到你想在 Chrome 上对 Sass 进行调试的工程页面（通过开发者工具打开）
5. 接下来，通过使用下面的标示开启 Sass 编译器（也可以指定一个目标 CSS 编译器）：sass --watch --sourcemap sass/styles.scss:styles.css。这将会让 Sass 观察你对 Sass 源文件的更改，然后为每一个生成的 CSS 文件创建源映射文件（.map）。接下来，你看到的就像是在控制台中的一样： 这就证明了 Sass 调试器确实在工作
6. 如果按照预期启动了工作，你可以进入元素面板。首先你将会注意到你的样式的文件名现在显示的是相应的 .scss 源文件，并且源文件中对应的行号也显示出来了。 
7. 在这里点击文件名将会直接进入到 Sources 面板中去，并且会高亮显示相应选择器所在的行。现在你就可以再开发工具内调整 Sass 源文件了，并且该内置编辑器支持语法高亮。 
8. 如果你想要在 Source 面板中编辑一个 Sass 文件，首先需要确保的就是开发工具能够知道相应文件存在于本地文件系统的哪个位置。在编辑器中右键，然后选择 ”Save As“ 可以用当前正在编辑的文件重写原本的文件。由于自动重加载已经开启并且 Sass 已经在后台运行，所以我们做的更改会马上的显示在 Chrome 和开发者编辑器中。 

更多有关使用元素和样式的技巧，请进入编辑样式和 Dom

• 在这里，你可以学习如何查看页面的实际结构。比如，你可能对一个图片是否有 HTML id 属性很好奇，并且想知道这个属性的值是什么。
• 了解如何观察 DOM 树中的每一个信息，包括检查以及快速编辑 DOM 元素。如果你需要确认页面某个部分的 HTML 片段时你可能会经常访问元素选项卡。

网络

重新发出 XHRs 请求

也许你可能知道，网络面板会展示你的页面上所有的请求，包括 XHRs。在请求上右键点击会显示上下文菜单，之后选择 “Replay XHR”，就可以重新发出 XHRs 请求(POST 或者 GET)

清除网络缓存和 cookies

在网络面板的任何地方，右键点击/ 按住 Ctrl 键然后点击会弹出菜单，在菜单中选择 Clear Browser Cache / Network Cache。

记录一个追踪栈 & 导出 waterfall

• 点击 “record” 捕捉一个多页面痕迹
• 要导出 meta-data 请求：右键然后选择 “Copy Entry as HAR”
• 要导出全部 waterfall：右键然后选择 “Copy All as HAR”

更多：等等，开发者工具可以做什么？| Igvita.com

使用网络时间轴上的 large resource rows 查看更多细节

通过启动在网络面板底部的 “Use large resource rows” 图标，你可以在面板中显示 campact/smaller resource rows 视图中看不到的额外信息。

对比 smaller resource rows 视图：

以及 larger row 的情况：

在网络面板上获取更多信息的技巧

左键点击网络面板中时间轴列的头部，可以访问更多网络请求的细节。你可以在以下的选择中选择一个：

• 时间轴

• 开始时间

• 响应时间

• 结束时间

• 持续时间

• 等待时间

浏览灰色的文字来深入查看：

• 每次请求的 HTTP 网络定义是什么？

• 每次请求第一个字节是什么时候？

• 什么才是响应时间最慢的资源？

• 什么是持续时间最短的资源？

在网络面板中的任何一行的头部右键，你可以启用或者禁用列。默认情况下有 3 列不会显示：

• Coolies

• Domain

• Set-Cookies

WebSocket 检查

在网络面板中，你可以使用底部窗口的过滤器来观察 WebSocket 信息帧。

比如：进入 Echo 实例中，在网络面板底部选择 “WebSocket” 过滤器然后点击 “Connect” 按钮。你通过 “Send” 按钮发送的任何信息都可以用 “Frames” 子面板观察到。

绿色表示来自你客户端的信息。WebSocket 的观察十分的有效，它允许你在观察 WebSocket handshake 的同时查看 WebSocket 的独立帧。

更多：等等，开发者工具可以做什么？ | Igvita.com

更多：使用开发者工具观察 Websocket | Kaazing

在网络面板中查找和过滤 XHRs

当你在网络面板中观察网络请求时，可以通过键盘上的特殊键来缩小查找范围。使用 Ctrl + F 或者 Cmd + F 可以让整个过程更轻松。

在搜索输入框中，输入你要搜索的关键字，那些请求中有文件名/ URL 与之匹配的就会高亮显示。结果显示出来后，你可以使用输入框旁边的上下按钮来选择你需要的那一项。

尽管这很有用，但是如果它能够只显示和你搜索的关键字相匹配的选项的话就会更有用。"Filter" 选项就可以做到这一点，下面请看例子：

更多：评估网络性能 | 开发者工具文档

获取网络堆栈内部状态

"about:net-internals" 页面是一个特殊的 URL，它存放了网络堆内部状态的一个临时视图。这对调试性能和连接问题十分有帮助。这里面包括请求性能的信息，代理设置以及 DNS 缓存。

同样需要注意的是 about:net-internals/#tests 是可以对一个特殊的 URL 进行测试的。

更多计算网络性能的技巧，请前往评估网络性能

• 在这里可以学习如何在你的应用中深入查看网络选项。包括时间数据详情，HTTP 请求和相应头，cookies，WebSocket 数据以及更多。
• 学习哪个资源开始加载的时间最慢？哪个资源占需要最长的加载时间（持续时间）？谁开启了一个网络请求？等等。

设置

模仿触摸事件

触摸是一种在电脑上很难测试的输入方式，因为大多数桌面上不支持触摸输入。在移动端上测试则会延长你的开发周期，一旦你做出了改变，你就需要上传到服务器然后切换到设备上测试。

这个问题的一个解决方法是在你的开发机器上模拟一个触摸事件。对单点触摸来说，Chrome 开发者工具支持单个触摸事件的模拟，这使得在电脑上调试移动应用变得更加简单。

要开启触控仿真：

1. 打开开发者工具中的 overrides 菜单
2. 滚动然后选中 "Enable touch events"

现在我们可以像标准桌面事件那样调试触控事件，也可以在源面板中设置事件监听断点。

更多：开发者工具设备模式 | DevTools 文档

模拟 UA 字符串 & 设备视图

通常在桌面上启动一个样品然后在你想支持的设备上处理具体移动设备部分会更加容易一些，设备模拟器可以帮助我们使这个过程更加简单。

开发者工具支持包括本地 User Agent 以及尺寸的重载在内的设备仿真。这就使开发者可以在不同的设备和操作系统上调试移动端的显示效果。

现在你可以模拟确切设备的尺寸，比如 Galaxy Nexus 以及 iPhone 等来测试你的查询驱动设计。

更多：开发者工具的设备模式 | 开发者工具文档

模拟地理信息

在一个支持地理信息支持的 HTML5 应用中，调试不同经纬度下的输出是十分有用的。

开发者工具支持重写 navigator.geolocation 的位置信息，也可以模拟一个模拟地理位置。

重写地理位置

1. 进入到地理信息实例中。
2. 允许页面使用你的位置。这样可以获取精确位置。
3. 打开在开发者工具中的重写菜单。
4. 选中 ”Override Geolocation“ 然后输入 Lat = 41.4949819，Lat = -0.1461206。

1. 刷新页面。这个例子会使用你重写后的位置信息来定位。

1. 现在选中 "Emulate position unavailable" 选项。
2. 刷新页面。页面就会提示你查找你的位置信息失败。

更多：开发者工具模拟移动设备 | DevTools Docs

Dock-to-right 的视图调试

Dock-to-right 模式同样对在一个缩小的视图中预览你页面的表现是很有帮助的。要使用这个：

• 通过长按开发者工具窗口底部的布局选择器图标来开启 dock-to-right 模式。
• 你现在可以拖拽窗口分配器然后左右拖拽来改变视图的宽度，然后触发你的媒体查询断点。

让 JavaScript 失效

点击右下角的设置齿轮，然后在 Setting > General 中启用 ”Disable Javascript“。当开发者工具已经打开并且这个选项也被选中，那么当前页面 JavaScript 脚本就会失效。

如果需要该功能，同样的也可以通过 "-disable-javascript" 命令来启动 Chrome。

通用

在标签中快速切换

Cmd + ] 和 Cmd + [(或者 Ctrl + ] 和 Ctrl + [)快捷键允许你轻松地在开发者工具的不同标签之间切换。使用他们就可以避免手动选择标签。

尝试改进后的 dock-to-right

改进后的元素面板和源面板是水平分开放置的，并且，只要你打开了 dock-to-right 模式，你就可以在 Chrome 测试版中体验该特性：

然而，如果你已经有一个非常宽的屏幕并且不想使用这个屏幕，只需要在设置面板中取消选中 ”Split panels vertically when docked to right“ 选项即可。

更多：3 步获取一个更好的 Dock-to-Right 体验 | G+

使用 Disable Cache 让缓存失效

在设置齿轮下面，你可以启用 Disable cache 选项来使磁盘缓存失效。这对开发来说用处是巨大的，但是开发者工具必须是可见并打开的才能实现这个功能。

检查 Shadow DOM

含有 Shadow DOM 的元素并不会在元素标签中显示。

1. 使 Show Shadow DOM 的复选框生效。
2. 重启开发者工具

你可以稍微看看里面的 Shadow DOM。比如，你可以在 HTML 5 块中看一下 Shadow DOM 标题。

预览所有可检查的页面

如果你发现你自己已经会使用 remote 调试了，你可能想试试 ”about:inspect“，它会展示在 Chrome 中展示所有可检查的标签/扩展插件。点击 ”inspect“ 来选择一个页面然后加载开发工具并且跳转到相应页面。

详细观察哪个站点有应用缓存

通过访问 "about:appcache-internals",你可以看到有关应用缓存的信息。这允许你查看当最后做出更改的时候哪些站点是有缓存的，以及他们占用了多少空间。你也可以在这里移除这些缓存：

在网络/控制台面板中选择多重过滤器

你可能已经意识到在网络和控制台面板中也是可以使用过滤器的，这允许你基于不同的标准缩小数据的范围。

你可能不知道的是你可以使用快捷键（ Cmd/Ctrl + 点击）来选择过滤器并将其应用到视图中。下面你可以看到在多个面板键的行为：

清除缓存然后硬重载

如果你请求一个硬刷新，在开发者工具打开的情况下点击并按住 Chromes 的刷新按钮。你应该会看见一个下拉菜单，它允许你进行清除缓存和并进行硬重载。这有助节省时间！

注意：这个现在只对 Windows 和 ChromeOS 有用

深入理解 Chrome 任务管理器

Chrome 中的任务管理可以让你深入了解任何选项卡对应的 GPU，CPU 以及 JavaScript 内存使用状况，CSS 和脚本缓存使用状况。

按照下面的步骤来打开任务管理：

1. 在浏览器工具栏中点击 Chrome 菜单。
2. 选择工具。
3. 选择任务管理器。
4. 从那里，你可以通过右键点击任何一行来进入扩展视图或者通过右键来结束一个程序。

扩展工具

利用开发者工具测试 iOS 应用

PonyDebugger 是一个客户端的库同时也是一个使用 Chrome 开发工具来调试应用网络状况以及管理对象上下文的网关服务器。

JSRunTime：开发者工具检索 JavaScript 对象的拓展

Andrei Kashcha 编写了一个非常有用的开发者工具扩展插件，它可以在内存中检索可用的 JavaScript 对象并生成相应的图，还可以根据值或者名称来进行匹配。

更多：JSRuntime-获取对象的开发者工具拓展插件

视频 Videos

以下的视频将帮助你学习谷歌浏览器的开发工具：

开始

下面的视频描述了如何开始使用开发工具、开发工具窗口内的面板以及交互控制台。

视频地址：https://www.youtube.com/watch?v=7cqh7MGLgaM

检测元素和资源

下面的视频介绍了如何：

• 检查元件
• 更改样式属性
• DOM 属性编辑
• 查看和编辑位置度量
• 查看网络活动的时间线
• 查看 XHR 信息。

视频地址：https://www.youtube.com/watch?v=Mhb4n0yGYT4

调试JavaScript

下面的视频介绍了图形界面的 V8 调试器如何测试：

• 设置断点
• 暂停
• 通过代码缩放
• 执行代码
• 查看当前调用堆栈和范围变量

视频地址：https://www.youtube.com/watch?v=c_oiQYirKuY

分析与优化

下面的视频介绍了如何使用内置的CPU和堆分析器了解那里的资源耗费情况，以此帮助你优化你的代码。

视频地址：https://www.youtube.com/watch?v=OxW1dCjOstE

时间轴面板

下面的视频介绍了如何使用时间轴面板来获取信息，在您加载网页应用程序或页面时，时间是怎么消耗的。

视频地址：https://www.youtube.com/watch?v=RhaWYQ44WEc

成为一个会使用 JavaScript 控制台的用户

提升对 Chrome 开发工具的掌握能力，看看 XHR 请求，学习控制台辅助函数更好地监视事件或对象。Chrome 团队的 Paul Irish将会给你介绍一下。

视频地址：https://www.youtube.com/watch?v=4mf_yNLlgic

2011 谷歌 IO 大会

下面的视频是在谷歌IO 2011 届 IO 大会上讨论 Chrome 开发工具时记录的。

视频地址：https://www.youtube.com/watch?v=N8SS-rUEZPg

2010 谷歌 IO 大会

下面的视频是在 2010 谷歌 IO 大会上的 Chrome 开发工具环节记录的。

视频地址：https://www.youtube.com/watch?v=TH7sJbyXHuk

2012 谷歌 IO 大会：Chrome开发者工具的演变

下面是 Pavel Feldman 和 Sam Dutton 提出的最新的开发工具的特点综述：移动调试，编辑，新的时间表“帧模式”等等。

视频地址：https://www.youtube.com/watch?v=3pxf3Ju2row