了解开发者工具如何通过更智能的控制台自动补全功能减少输入操作,如何直接在 Styles 窗格中修改 @keyframe
规则,如何玩转 CSS 自定义变量,以及如何加入黑暗面。
控制台中更智能的自动补全功能
如果您像我和许多其他人一样,可以在控制台中输入一个命令来调试您的应用,看看它能否正常工作,然后不断迭代和输入它。为此,我们现在将自动填充您之前输入的完整语句,如下所示:
直接在“样式”窗格中修改 @keyframe 规则
当我们在开发者工具中引入动画检查器和加/减速编辑器时,它仅限于转场效果,因为我们从不在“样式”窗格中显示基于 @keyframe
的 CSS 动画。我很高兴地告诉大家,这已经成为过去的事情,请尽情发挥吧!欢迎查看我们的推文视频,先睹为快。
自定义 CSS 属性支持
CSS 带来了许多好处,其中之一就是在 Chrome 49 中发布的自定义变量。我们确保全面支持开发者工具,因此如果您以前在 Sass 中使用过变量,不妨试用一下原生变量,因为它们可让您在 Styles 窗格中即时修改属性,并立即更新依赖元素。
开发者工具的深色主题
在过去的几年里,我们听到了数十次请求:现在,您可以在开发者工具中选择阴暗面。前往开发者工具设置,将主题设置为深色即可尽情享用。因为其中很多都是自动生成的,所以说它仍处于 Beta 版阶段,所以如果您发现任何有待改进的方面,请告诉我们!
其他精选游戏
- 现在,当您点击整个控制台标签页时,控制台抽屉式导航栏会自动收起。
- 对“Sources”中的文件树进行了重大改进,添加了新的图标和新的分组功能
与往常一样,请通过 Twitter 告诉我们您的想法或进行下面的评论,并前往 crbug.com/new 提交 bug。
下个月再见!
Paul Bakaus 和开发者工具团队