Chrome 开发者工具 11 月摘要

Deanna Rubin
X

由于 Chrome 开发者工具速度飞快，因此我们想提醒您注意一些我们针对几个组件引入的新功能和改进。也就是说，我们将介绍一些界面更改、高分辨率 JS 分析以及新的 Workspace 功能。

  • 现在，高分辨率性能分析精确度达到 0 .1 毫秒
  • 工具栏移到了 Devtools 顶部，而 Overrides 移到了控制台抽屉式导航栏
  • 工作区添加了多项功能，以支持添加/移除/搜索文件

高分辨率分析

CPU 性能分析是一项非常实用的功能，可以帮助您了解 JavaScript 的运行效率。除了传统的配置文件视图之外，我们在今年夏天推出了火焰图，直观地呈现了网页在一段时间内的 JavaScript 处理情况。它可用于轻松查看调用堆栈的深度以及各个函数的处理时长。

直到最近，传统的大量（自下而上）和树（自上而下）表示法以及火焰图都只能显示精确到 1 毫秒的过程。对于大多数应用而言，这没有问题。不过，如果您要处理的是界面（例如游戏）中速度至关重要的问题，那么 1 毫秒的分辨率可能会变得太慢，以致无法找出导致网站运行缓慢或界面显示缓慢的原因。 如需启用高分辨率性能分析（目前仅限 Canary 版），请执行以下操作：

  1. 打开开发者工具设置。
  2. 在常规标签页的性能分析器下，开启高分辨率 CPU 性能分析。

下面是一个在普通分析模式下的高分辨率火焰图示例，在该图中，我们会分析加载 HTML5Rocks.com 首页的内容：

正常分辨率的火焰图。
高分辨率的火焰图。

在正常的分析分辨率下，处理时间始终向上取整到下一毫秒，因此只需不超过 0.1 毫秒的进程仍会被报告为需要 1.0 毫秒，而其他进程可能根本不会显示在调用堆栈中。

高分辨率性能剖析在 JavaScript 虚拟机中会产生大量开销，因此该功能默认处于关闭状态。虽然它看起来比一般的分析分辨率更酷，但我们建议您仅在确实需要精确度时使用。

Devtools 界面改进

虽然 Canary 中总是不断推出新功能，但我们仍想提醒您注意几个重要的界面更改：一般来说，按钮会上升到界面顶部的位置、时间轴导航和信息面板以及替换项转移到控制台抽屉。

首先，我们来了解一下从哪里来。因为我们还要谈论时间轴，所以我将尝试用两张屏幕截图截掉前两只鸟。目前，Chrome（稳定版）中的时间轴如下所示：

旧的时间轴。

时间轴现在如下所示。

新时间轴。

请注意以下几点：

  1. 现在，工具栏和按钮均位于屏幕顶部，左侧是特定时间轴控件，右侧则是常规开发者工具。
  2. 时间轴记录的嵌套结构现在位于左侧面板中，您甚至可以使用键盘滚动浏览这些记录。除了使用向上和向下箭头键上下滚动之外，您还可以使用向左键和向右键打开和关闭嵌套记录。
  3. 现在，对于您选择的条目，时间详细信息会显示在右侧的面板中。（您也可以将鼠标悬停在其他条目上以获取其信息。）

现在，我们来看看控制台抽屉式导航栏。如需打开控制台抽屉，请在开发者工具中按 Esc 键，或点击控制台抽屉按钮 抽屉图标，这样抽屉便会从底部向上卷起。

默认情况下，您会看到控制台和搜索标签页。如需使用之前称为“替换”的功能，请打开开发者工具设置，然后选中“在控制台抽屉中显示‘模拟’视图”旁边的复选框。关闭设置框，控制台抽屉式导航栏中便会出现 Emulation 标签页，如以下屏幕截图所示：

控制台抽屉和替换项。

您可以在其中进行所有模拟

进行这种更改的原因是，在以前，您必须进入和退出“设置”来更改模拟替换，然后再返回并查看您的页面。现在，您可以在更改模拟替换项的同时仍操控样式。

改进的工作区

特别是，工作区这一功能可以极大地简化创作工作流，但却没有得到应有的关注。借助工作区，您无需离开 Chrome 即可在开发者工具中试验和进行更改，无需在开发者工具中复制更改并将其粘贴到源文件中，而是可以在开发者工具中进行更改，查看它们在浏览器中呈现的效果，以及将这些更改保存到文件的永久性本地版本中。

如果您还没有阅读 Chrome 开发者工具革命 2013 年一文，请继续阅读这篇文章，然后再回来了解过去几个月我们在这些功能上做出的改进。

更轻松地添加文件

早在 2013 年革命期文章发布之时，创建新工作区需要将文件夹添加到工作区，然后将文件夹映射到网络资源。我们已将此过程简化为一步：只需在“来源”左侧面板上点击右键，然后选择将文件夹添加到工作区即可。这会启动一个文件对话框，您可以在其中选择要添加到工作区的新文件夹。（此操作不会将当前突出显示的文件夹添加到您的工作区。）

将文件夹添加到工作区。

创建和删除文件

您现在可以将新文件添加到工作区本身用于工作区的本地目录中。只需在左侧面板的“Sources”面板中右键点击某个文件夹，然后选择 New File 即可。

新文件。

您还可以在工作区中移除文件。右键点击“Sources”面板中的文件，然后选择 Delete File。

移除文件。

您还可以通过选择复制文件来复制文件。

刷新

现在，您可以直接在工作区中创建新文件（或删除文件），Sources 目录还将自动刷新并显示这些新文件。如果没有，您可以随时右键点击文件夹，然后从弹出式菜单中选择 Refresh 以强制刷新。

如果您碰巧更改了在其他编辑器中打开的文件，并希望更改显示在开发者工具中，这样做也很有用。

在所有文件中搜索

我们对跨文件搜索的界面进行了细微改进，现在您还可以在工作区的所有文件中以及加载到开发者工具中的所有文件中搜索字符串。您可以搜索字符串或正则表达式，我们会匹配每个文件或网页中每一次出现。如需在工作区（目前为 Canary 版）中搜索多个文件，请执行以下操作：

  • 按 Esc 键打开控制台抽屉，然后点击控制台旁边的搜索标签页以打开“搜索”窗口

OR

按 Ctrl + Shift + F（在 Mac 上，按 Cmd + Opt + F）打开“搜索”窗口。

  • 在搜索来源框中输入您的查询，然后按 Enter 键。如果您的查询是正则表达式或需要不区分大小写，请点击相应的框。
搜索文件。

忽略列表

如果您的结果中有大量 .git 文件或 README.md 文件混乱，搜索文件文本或通过文件名进行过滤可能会非常繁琐。

因此，我们在工作区中添加了忽略列表功能，让您可以在查看和搜索工作区时排除某些文件类型或文件夹。

下面展示了如何在工作区中查看和更改当前共享忽略名单：

  1. 打开开发者工具 Settings。
  2. 点击工作区。
  3. 在常用下的文件夹排除格式框中，您可以查看和/或修改这些格式。
排除文件格式。

我们随附了以下默认的全局排除模式：

此正则表达式会排除 Git、SVN、Mercurial 中的元数据、来自 Eclipse 和 IntelliJ 的项目文件、OS X DS_Store 和回收站文件，以及一些其他值得忽略的内容，例如 Sass 的缓存。其整个文件夹（包括所有子项）会从界面中排除，这样就不会在界面中显示，也不会在文件搜索时显示。

工作区专用忽略列表

为了更加具体，您还可以选择排除特定工作区内的文件和文件夹，以减少搜索中的杂乱现象。排除的文件夹也不会显示在源目录中。

如需从工作区中排除整个文件夹，请右键点击位于左侧的“Sources”面板中的文件夹，然后选择 Exclude Folder。 如需查看给定工作区文件夹的映射和排除的文件夹，请执行以下操作：

  1. 打开开发者工具设置。
  2. 点击工作区。
  3. 突出显示您感兴趣的文件夹。
  4. 点击修改，系统将显示“修改文件系统”窗口；您可以在此窗口中添加或移除映射和/或排除的文件夹。
排除文件夹。