开发者工具变暗,支持 @keyframe 编辑和更智能的自动补全功能

保罗·巴考斯
Paul Bakaus

了解开发者工具如何通过更智能的控制台自动补全功能减少打字操作、如何在“样式”窗格中直接修改 @keyframe 规则、如何玩转 CSS 自定义变量,以及如何加入暗面。

控制台中更智能的自动补全功能

如果您像我和很多其他玩家一样,可以在控制台中输入命令来调试您的应用,看看它是否无法正常运行,然后反复进行迭代和输入。为了帮助实现这一目标,我们现在会自动完成您之前输入的完整语句,例如:

自动补全

直接在“样式”窗格中修改 @keyframe 规则

当我们在开发者工具中引入动画检查器和加/减速编辑器时,它仅限于过渡,因为我们从未在“样式”窗格中显示基于 @keyframe 的 CSS 动画。我很高兴地说,这已经成为过去式了,那就尽情去吧!预览我们的推文视频

自定义 CSS 属性支持

开发者工具中的自定义 CSS 属性

CSS 有诸多优势,其中之一就是在 Chrome 49 中推出的自定义变量。我们确保在开发者工具中提供完全支持,所以如果您之前已经在 Sass 中使用变量,不妨试试原生变量,因为它们可让您在 Styles 窗格中即时修改属性,并立即更新依赖元素。

开发者工具的深色主题

深色主题的实际运用

在过去几年中,我们已多次听到我们倾听的一项要求,最终我们最后接受了这项要求:您现在可以在开发者工具中选择黑暗面。前往开发者工具设置,将主题设置为深色,尽情体验吧。请注意,由于其中大部分都是自动生成的,因此它仍处于 Beta 版阶段,因此,如果您发现任何方面有待改进,请务必告诉我们

其他精华

  • 现在,当您点击完整的 Console 标签页时,控制台抽屉式导航栏会自动收起。
  • “来源”中的文件树经过重大改版,包含新图标和新的分组功能

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

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