Chrome DevTools 更新功能介绍

时间：12-14来源：作者：点击数：

Chrome DevTools 发展迅速，我们想提醒您注意我们为一些组件引入的一些新功能和改进。也就是说，我们将讨论一些 UI 更改、高分辨率 JS 分析和新的 Workspaces 功能。

高分辨率分析现在达到 0.1 毫秒精度
工具栏上升到 Devtools 的顶部，并且 Overrides 移动到控制台抽屉
Workspaces 添加了几个功能来支持添加/删除/搜索文件

高分辨率分析

CPU 分析是一个非常有用的功能，可用于查看 Javascript 的效率。除了传统的个人资料视图之外，我们今年夏天还引入了火焰图，它直观地代表了页面随着时间的推移的 Javascript 处理。

它可用于轻松查看调用堆栈的深度以及处理各个函数所需的时间。

直到最近，传统的重（自下而上）和树（自上而下）表示，以及火焰图，都只能显示精确到 1 毫秒的过程。对于大多数应用程序来说，这很好。但是，如果您正在处理速度在 UI 中真正重要的事情，例如游戏 - 1 毫秒的分辨率可能太笨重，无法获得有意义的结果，因为是什么导致您的网站变慢或您的 UI 看起来滞后。

要启用高分辨率分析（目前仅 Canary）：

打开 DevTools 设置。
在 General 选项卡 Profiler ，打开 High resolution CPU profiling 。

这是在正常分析和高分辨率中看到的火焰图示例，我们在其中分析加载 HTML5Rocks.com 主页：

在正常的分析分辨率下，进程时间总是被四舍五入到下一个毫秒，因此只需要 0.1 毫秒或更短的进程仍会被报告为 1.0 毫秒，而其他进程可能根本不会显示在调用堆栈中。

高分辨率分析在 Javascript VM 中有很大的开销，这就是它默认关闭的原因。虽然它看起来确实比普通的分析分辨率更酷，但我们建议仅在您确实需要精度时才使用它。

Devtools UI 改进

虽然 Canary 中总是有新的东西推出，但我们想提醒您注意一些主要的 UI 变化：通常上升到 UI 顶部的按钮、时间轴导航和信息面板，以及重定位到控制台抽屉。

首先，让我们看看我们来自哪里。因为无论如何我们都在谈论时间轴，所以我会尝试用一对截图杀死前两只鸟。以下是当前 Chrome（稳定版）中的时间线：

这就是时间线现在的样子。

请注意以下事项：

工具栏和按钮现在都在屏幕的顶部，左侧的特定时间轴和右侧的一般 DevTools 都是。
时间轴记录现在在左侧面板中具有嵌套结构，您甚至可以使用键盘滚动它们。除了使用上下键上下滚动，还可以使用左右键打开和关闭嵌套记录。
现在，您选择的任何条目的时间详细信息都会显示在右侧的面板中。（您也可以将鼠标悬停在其他条目上以获取其信息。）

现在让我们来看看控制台抽屉。要打开控制台抽屉，请在 DevTools 中按 Escape 或点击控制台抽屉按钮抽屉图标抽屉从底部卷起。

默认情况下，您将在那里有 控制台 和搜索选项卡。要使用以前称为 Overrides 的功能，请打开 DevTools 设置并选中在控制台抽屉中显示仿真视图旁边的框。关闭设置框，您将 Emulation 在控制台抽屉中

你可以在那里进行所有的仿真。

进行此更改的原因是，之前，您必须进出设置以更改您的模拟覆盖，然后返回并查看您的页面。现在，您可以在仍然操纵样式的同时更改您的模拟覆盖。

改进的工作区

特别是工作区是一项可以大大简化您的创作工作流程的功能，但它并没有得到应有的喜爱。使用 Workspaces，您无需在 DevTools 中进行试验和更改，也不必将更改复制并粘贴回源文件，您可以在 DevTools 中进行更改，查看它们在浏览器中的呈现，并将它们保存到文件的持久本地版本-- 无需离开 Chrome。

如果您还没有阅读 Chrome 开发者工具革命 2013 (link:http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/)文章，请继续阅读该文章，然后返回此处了解我们在过去几个月中如何改进这些功能。

添加文件更容易

回到 2013 年革命文章时，创建新工作区 (link:http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/#toc-adding-workspace)需要将文件夹添加到工作区，然后将文件夹映射到网络资源。我们已将此过程简化为一个步骤：只需右键单击 Sources 左侧面板并选择 Add Folder to Workspace 。

这会将您启动到一个文件对话框，您可以在其中选择一个新文件夹以添加到您的工作区。（它不会将当前突出显示的文件夹添加到您的工作区。）

创建和删除文件

您现在可以将新文件添加到您在 Workspaces 本身中用于 Workspaces 的本地目录。只需右键单击左侧 Sources 面板中的文件夹，然后选择 New File。

您还可以从 Workspaces 中删除文件。右键单击左侧 Sources 面板中的文件，然后选择 Delete File。

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

刷新

现在您可以直接在工作区中创建新文件（或删除文件），Sources 目录也将自动刷新并显示这些新文件。如果没有，您始终可以右键单击文件夹并刷新从弹出菜单中

如果您碰巧更改了在另一个编辑器中打开的文件并希望更改显示在 DevTools 中，这也很有用。

跨文件搜索

我们稍微改进了跨文件搜索的界面，现在您还可以在工作区中的所有文件以及加载到 DevTools 中的所有文件中搜索字符串。您可以搜索字符串或正则表达式，我们匹配每个文件或页面中的每个出现。

要在 Workspaces 中搜索多个文件（目前在 Canary 中）：

按 Escape 键打开控制台抽屉，然后单击搜索旁边 控制台 以打开搜索窗口或按 Ctrl + Shift + F ( Cmd + Opt + F在 Mac 上）打开“搜索”窗口。
键入您的查询 搜索源 ，然后按 Enter。如果您的查询是正则表达式或需要不区分大小写，请单击相应的框。

忽略列表

如果您有大量的 .git 文件或 README.md 文件使您的结果变得混乱，那么搜索文件文本或过滤文件名可能会变得非常乏味。

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

以下是您如何查看和更改 Workspaces 中当前共享的忽略列表的方法：

打开 DevTools 设置。
单击 工作区 。
在 Common ，在 文件夹排除模式 框中，您可以查看和/或编辑模式。

我们提供了这些默认的全局排除模式：

/.git/|/.sass-cache/|/.hg/|/.idea/|/.svn/|/.cache/|/.project/|/.DSStore$|/.Trashes$|/.Spotlight-V100$|/.AppleDouble$|/.LSOverride$|/Icon$|/..*$

这个正则表达式不包括来自 Git、SVN、Mercurial 的元数据、来自 Eclipse 和 IntelliJ 的项目文件、OS X DS_Store 和 Trash 文件，以及其他一些值得忽略的东西，比如来自 Sass 的缓存。他们的整个文件夹，包括任何子文件夹，都被排除在 UI 之外，不会出现在 UI 中，也不会在搜索文件时出现。