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

Paul Bakaus
Paul Bakaus

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


更好地归因性能问题:时间轴中显示汇总详细信息

时间轴中的汇总详细信息

在当今的网站上,我们越来越多地使用第三方信标、分析、社交、字体加载和广告服务,有时甚至过多。为避免发生这种情况并方便您了解问题,我们在时间轴中引入了汇总的详细信息。

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

全新的专属主菜单

新的主菜单。

为了简化主工具栏,我们将抽屉、设置和底部固定图标移到了新的专用主菜单中。

特别是,对接变得更加简单。每个对接位置都有自己的图标,无需长按上一个图标。

除了固定功能之外,我们还添加了快速访问文件搜索、快捷方式和帮助(可前往我们的新首页)。

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

新提示。

我们在开发者工具中提供了许多按钮,但我们知道并非所有按钮都自带说明。现在,我们已将系统原生提示框替换为与平台一致的自定义提示框,让用户更轻松地发现操作及其快捷方式。

新版提示会更快地显示,并包含键盘快捷键(如果有)。

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

自定义网络配置文件。

如果网络节流器的默认选项对您的用例来说过于限制,并且您需要“会议 Wi-Fi”选项,或者想怀旧一下,想采用老式方法来模拟“110 波特”线路,那么我有好消息要告诉您。我们添加了一个新的“设置”面板,您可以通过该面板执行上述任何操作。

自动、Material 和自定义调色板

无论您是想重新打造魔术般的色彩,还是使用现有调色板,改进后的颜色选择器都能帮助您为网站选择一致的调色板。

点击调色板旁边的小切换器图标,即可选择以下选项:

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

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

其他优秀选手

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

一如既往,您可以通过 Twitter 或在下方留言的方式与我们分享您的想法,并通过 crbug.com/new 提交 bug。

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