Chrome 开发者工具更新速度很快,我们想向您介绍我们为部分组件引入的一些新功能和改进。具体而言,我们将介绍一些界面变更、高分辨率 JS 性能分析和新的 Workspaces 功能。
- 高分辨率性能分析现在的精确度可达到 0 .1 毫秒
- 工具栏移到了 DevTools 的顶部,而“替换项”移到了控制台抽屉
- Workspaces 添加了多项功能,以支持添加/移除/搜索文件
高分辨率性能分析
CPU 性能分析是一项非常实用的功能,可用于了解 JavaScript 的效率。除了传统的配置文件视图之外,我们今年夏天还推出了火焰图,可直观呈现网页 JavaScript 处理随时间的变化。 您可以使用它轻松查看调用堆栈的深度,以及各个函数的处理时间。
直到最近,传统的“重型”(自下而上)和“树状”(自上而下)表示法以及火焰图表都只能显示精确到 1 毫秒的进程。对于大多数应用来说,这样就足够了。不过,如果您正在处理的项目在界面中非常注重速度(例如游戏),则 1 毫秒的分辨率可能过于粗糙,无法获得有关导致网站运行缓慢或界面似乎存在延迟问题的有意义结果。如需启用高分辨率性能分析(目前仅适用于 Canary 版),请执行以下操作:
- 打开“开发者工具”设置。
- 在常规标签页的 Profiler 下,开启 High resolution CPU profiling。
下面是正常性能分析和高分辨率性能分析中显示的火焰图示例,其中我们对 HTML5Rocks.com 首页的加载进行了性能分析:


使用正常的性能分析分辨率时,进程时间始终会向上舍入到下一毫秒,因此,仅需 0.1 毫秒或更短时间的进程仍会报告为需要 1.0 毫秒,并且调用堆栈中可能根本不会显示其他进程。
高分辨率性能分析在 JavaScript 虚拟机中会产生大量开销,因此默认处于关闭状态。虽然它看起来比普通性能分析分辨率更酷,但我们建议您仅在确实需要精确度时才使用它。
开发者工具界面改进
Canary 中总是会推出新功能,但我们想提醒您注意一些重大的界面变更:按钮通常会移至界面顶部、时间轴导航栏和信息面板,以及“替换项”已移至控制台抽屉。
首先,我们来了解一下过往历程。既然我们在讨论时间轴,我会尝试用一对屏幕截图解决前两个问题。以下是 Chrome(稳定版)中时间轴目前的显示效果:

时间轴现在的样子如下所示。

请注意以下事项:
- 现在,工具栏和按钮都位于屏幕顶部,左侧是特定的时间轴工具栏,右侧是常规的开发者工具。
- 时间轴记录现在在左侧面板中显示了嵌套结构,您甚至可以使用键盘滚动浏览这些记录。除了使用向上键和向下键上下滚动之外,您还可以使用向左键和向右键打开和关闭嵌套记录。
- 现在,右侧面板会显示您选择的任何条目的时间详情。(您也可以将鼠标悬停在其他条目上,了解其相关信息。)
现在,我们来看看控制台抽屉。如需打开控制台抽屉,请在开发者工具中按 Esc 键或点击控制台抽屉按钮 ,抽屉便会从底部向上滚动。
默认情况下,您会在该页面上看到控制台和搜索标签页。如需使用以前称为“替换项”的功能,请打开 DevTools 设置,然后选中“在控制台抽屉中显示‘模拟’视图”旁边的复选框。关闭设置框,您将在控制台抽屉中看到 Emulation 标签页,如下面的屏幕截图所示:

您可以在其中进行所有模拟。
之所以做出这项更改,是因为以前您必须进出“设置”页面才能更改模拟替换项,然后返回查看网页。现在,您可以在更改模拟替换项的同时操控样式。
改进了工作区
尤其是工作区,这项功能可以大大简化您的创作工作流程,但却没有得到应有的关注。借助 Workspaces,您无需在 DevTools 中进行实验和更改,然后再将更改复制并粘贴回源文件,而是可以在 DevTools 中进行更改,在浏览器中查看更改,并将其保存到文件的永久性本地版本,所有这些操作都无需离开 Chrome。
如果您尚未阅读 2013 年 Chrome 开发者工具革命一文,请先阅读该文,然后再返回此处,了解我们在过去几个月内对这些功能进行了哪些改进。
更轻松地添加文件
在 2013 年《Revolutions》一文中,创建新工作区需要将文件夹添加到工作区,然后将文件夹映射到网络资源。我们已将此过程简化为单个步骤:只需在“Sources”(来源)的左侧面板中右键点击,然后选择 Add Folder to Workspace(将文件夹添加到工作区)。 系统随即会打开一个文件对话框,您可以在其中选择要添加到工作区的新文件夹。(此操作不会将当前突出显示的文件夹添加到您的 Workspaces。)

创建和移除文件
现在,您可以在 Workspaces 中向用于 Workspaces 的本地目录添加新文件。只需右键点击左侧“Sources”面板中的某个文件夹,然后选择New File(新建文件)即可。

您还可以在 Workspaces 中移除文件。在左侧的“来源”面板中,右键点击相应文件,然后选择删除文件。

您还可以选择复制文件来复制文件。
刷新
现在,您可以直接在工作区中创建新文件(或删除文件),Sources 目录也会自动刷新并显示这些新文件。如果没有,您可以随时右键点击文件夹,然后从弹出式菜单中选择刷新以强制刷新。
如果您在其他编辑器中更改了打开的文件,并希望这些更改显示在 DevTools 中,这也很有用。
跨文件搜索
我们对用于跨文件搜索的界面进行了一些优化,现在,您还可以在工作区中的所有文件以及加载到 DevTools 中的所有文件中搜索字符串。您可以搜索字符串或正则表达式,我们会匹配每个文件或网页中的每个出现情况。如需在 Workspaces 中搜索多个文件(目前仅适用于 Canary 版),请执行以下操作:
- 按 Escape 键打开控制台抽屉,然后点击 Console 旁边的 Search 标签页以打开“Search”窗口
或
按 Ctrl + Shift + F
(在 Mac 上,按 Cmd + Opt + F
)打开“搜索”窗口。
- 在搜索来源框中输入您的查询,然后按 Enter 键。如果您的查询是正则表达式或需要不区分大小写,请点击相应的复选框。

忽略列表
如果有大量 .git 文件或 README.md 文件混杂在搜索结果中,通过文件文本进行搜索或按文件名进行过滤会非常繁琐。
因此,我们在 Workspaces 中添加了“忽略列表”功能,以便您在查看和搜索工作区时排除特定文件类型或文件夹。
您可以通过以下方式在 Workspaces 中查看和更改当前的共享忽略名单:
- 打开开发者工具的设置。
- 点击工作区。
- 在常规下方的文件夹排除模式框中,您可以查看和/或修改模式。

我们附带以下默认全局排除模式:
此正则表达式会排除 Git、SVN、Mercurial 中的元数据、Eclipse 和 IntelliJ 中的项目文件、OS X DS_Store 和回收站文件,以及一些值得忽略的其他内容,例如 Sass 中的缓存。系统会从界面中排除其整个文件夹(包括所有子文件夹),使其不会显示在界面中,也不会在搜索文件时显示。
工作区专用忽略列表
如需更精确地搜索,您还可以选择排除特定工作区中的文件和文件夹,以减少搜索结果中的杂乱信息。已排除的文件夹也不会显示在 sources 目录中。
如需从工作区中排除整个文件夹,请在左侧的“来源”面板中右键点击相应文件夹,然后选择排除文件夹。如需查看给定工作区文件夹的映射和排除的文件夹,请执行以下操作:
- 打开“DevTools 设置”。
- 点击工作区。
- 突出显示您感兴趣的文件夹。
- 点击修改,系统随即会显示“修改文件系统”窗口;您可以在此窗口中添加或移除映射和/或排除的文件夹。
