Chrome DevTools 更新功能介绍

Question

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

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

高分辨率分析

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

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

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

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

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

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

Devtools UI 改进

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

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

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

请注意以下事项：

1. 工具栏和按钮现在都在屏幕的顶部，左侧的特定时间轴和右侧的一般 DevTools 都是。

2. 时间轴记录现在在左侧面板中具有嵌套结构，您甚至可以使用键盘滚动它们。 除了使用上下键上下滚动，还可以使用左右键打开和关闭嵌套记录。

3. 现在，您选择的任何条目的时间详细信息都会显示在右侧的面板中。 （您也可以将鼠标悬停在其他条目上以获取其信息。）

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

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

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

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

改进的工作区

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

如果您还没有阅读 Chrome 开发者工具革命 2013 文章，请继续阅读该文章，然后返回此处了解我们在过去几个月中如何改进这些功能。

添加文件更容易

回到 2013 年革命文章时， 创建新工作区 需要将文件夹添加到工作区，然后将文件夹映射到网络资源。 我们已将此过程简化为一个步骤：只需右键单击 Sources 左侧面板并选择 Add Folder to Workspace 。
这会将您启动到一个文件对话框，您可以在其中选择一个新文件夹以添加到您的工作区。 （它不会 将 当前突出显示的文件夹添加到您的工作区。）

创建和删除文件

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

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

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

刷新

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

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

跨文件搜索

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

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

忽略列表

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

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

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

1. 打开 DevTools 设置 。
2. 单击 工作区 。
3. 在 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 中，也不会在搜索文件时出现。

特定于工作区的忽略列表

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

要从您的工作区中排除整个文件夹，请右键单击左侧 Sources 面板中的文件夹并选择 排除文件夹。
要查看给定工作区文件夹的映射和排除文件夹：

1. 打开 DevTools 设置。
2. 单击 工作区 。
3. 突出显示您感兴趣的文件夹。
4. 点击 编辑 ，出现 编辑文件系统 窗口； 您可以从此窗口添加或删除映射和/或排除文件夹。