开发者工具摘要 - 汇总的时间轴详细信息、调色板等

Paul Bakaus
Paul Bakaus

这是 Chrome Canary 版功能丰富的月份。请继续阅读下文,通过时间轴中的汇总详情了解是哪些第三方脚本在您的网站上导致性能问题,如何使用新的调色板选择一致的颜色,如何使用可自定义的网络配置文件模拟会议 Wi-Fi,以及如何使用新的主菜单更好的提示更充分地利用开发者工具界面。


更好地追责性能问题:时间轴中汇总的详细信息

时间轴中的汇总详情

在当今的网站上,我们使用的第三方提供的信标、分析、社交、字体加载和广告服务越来越多,有时使用的服务太多。为确保这种情况不会发生,同时也为了让您了解问题所在,我们在时间轴中引入了汇总的详细信息。

汇总详情标签页中,您可以只关注成本高昂的函数或整个调用树,然后按网域、子网域或独立网址对所选数据进行细分。例如,在上面的网页加载时间轴中,您现在可以轻松地将速度缓慢归因于来自 facebook.net 或 twitter.com 等网域的第三方脚本。

新的专用主菜单

新的主菜单。

为使主工具栏整洁有序,我们将抽屉式导航栏、设置和停靠图标移到了专门的新主菜单中。

特别是插入操作更简单了。每个停靠位置都有自己的图标,无需长按上一个图标。

除了插入基座之外,我们还添加了快速访问文件搜索功能、快捷方式和帮助功能(转到我们的新首页)。

通过改进的提示探索开发者工具

新提示。

我们在开发者工具中有许多按钮,而且我们知道有些按钮并非不言自明。现在,我们将系统原生提示替换为自定义、平台一致的提示,从而简化了发现操作及其快捷方式的过程。

新的提示显示速度要快得多,并且包含键盘快捷键(如果有)。

创建自定义网络节流配置文件

自定义网络配置文件。

如果 Network Throttler 的默认选项对您的用例来说限制过大,您需要一个“Conference Wi-Fi”选项,或者为了怀旧,想要进入老式风格并模拟“110 Baud”线路,那么告诉您一个好消息。我们添加了一个新的“设置”面板,您可以通过该面板执行上述任一操作。

自动、Material 和自定义调色板

无论您想重新创建魔法颜色,还是使用现有调色板,经过改进的 Colorpicker 都可以帮助您为网站选择一致的调色板。

点击调色板旁边的小切换器图标,您可以从以下选项中进行选择:

  1. 页面颜色 - 此调色板是根据在您的 CSS 中找到的颜色自动生成的,如果您要扩展现有网站,这是一个很好的选择。
  2. Material Design - Material Design 调色板开箱即可提供精美颜色,是开始新项目时的理想选择。目前,你可以找到所有主要颜色,但我们很快将推出所有色调。
  3. Custom - 这是您自己的游乐场。在选择器中选择一种颜色,然后点击调色板旁边的“加号”图标,即可添加新的颜色。通过四处拖动并右键点击以显示更多选项,例如将其移除。

告诉我们您的想法,以及我们可以如何进一步完善色彩故事。

其他精选

  • 使用 fetch() API 发出的请求现在会显示在“网络”面板中
  • 自动面板布局可确保在您调整开发者工具
    面板大小时,适应新的空间限制。
  • 检查元素和设备模式包含一组新图标。
  • 现在,即使节点突出显示,DOM 面板中的属性也会以不同的颜色显示。(他们之前全都是白人。)
  • 隐藏元素(通过在所选 DOM 节点上按“h”即可激活)现在左侧会显示灰色圆圈指示符,而 DOM 断点则显示蓝色圆圈。(这与我们已经用于强制实现诸如 :hover 等元素状态的橙色指示器类似)。

与往常一样,请通过 Twitter 或下方的评论告诉我们您的想法,并将错误提交至 crbug.com/new

下个月再见吧!
Paul Bakaus 和开发者工具团队