• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

🌟 Chrome DevTools 七大新功能

互联网 diligentman 1周前 (11-21) 5次浏览

🌟 Chrome DevTools 七大新功能

背景

Chrome 团队今年发布了不少新的功能,帮助开发者提升网页开发体验。

在最近的 Google 开发者大会上,介绍了最新的七大功能,它们分别是:

  1. 支援css-in-js的框架的样式编辑
  2. 模拟时区功能
  3. Lighthouse 量化使用者体验
  4. Issues 面板
  5. 媒体面板
  6. 一件修复文字的色彩对比
  7. 及时模拟色觉障碍

我在周末整理了一下这些内容, 非常详细。

下面我们就一起来个看看每个功能的细节吧。

正文

1. 支援css-in-js的框架的样式编辑

看到这个功能的时候, 你可能会好奇, Chrome Devtool 不是早就可以编辑css了吗?

没错,但是原本支持的是「 普通的css 」, 不是 「css-in-js」.

🌟 Chrome DevTools 七大新功能

现在,“样式”窗格对编辑使用CSS对象模型(CSSOM)API创建的样式提供了更好的支持 。

许多 CSS-in-JS框架和库都在底层使用CSSOM API来构造样式。

🌟 Chrome DevTools 七大新功能

例如,(CSSOM API)h1添加的样式CSSStyleSheet以前不可编辑。

🌟 Chrome DevTools 七大新功能

因为它是css-in-js的代码。

但是现在可以在“样式”窗格中进行编辑了:

🌟 Chrome DevTools 七大新功能

动态演示:

🌟 Chrome DevTools 七大新功能

2. 模拟时区功能

Chrome Devtool 能帮你模拟时区, 有了这个功能, 你就能很方便的测试国际化相关的一些功能。

比如:

在马来西亚的时间显示为:

🌟 Chrome DevTools 七大新功能

如果想看在伦敦的时间, 就可以修改控制台的设置为伦敦:

🌟 Chrome DevTools 七大新功能

显示的时间就改为伦敦时间了:

🌟 Chrome DevTools 七大新功能

很方便吧~

开启这个面板的方法为:

🌟 Chrome DevTools 七大新功能

选择location 就可以了:

🌟 Chrome DevTools 七大新功能

3. Lighthouse 量化使用者体验

Lighthouse 推出了新的体验量化方式:Core Web Vitals.

🌟 Chrome DevTools 七大新功能

你可以打开lightHouse 面板, 生成报告来查看:

🌟 Chrome DevTools 七大新功能

示例:

🌟 Chrome DevTools 七大新功能

想要了解更多关于 Core Web Vitals的信息, 可以关注:

web.dev/vitals

4. Issues 面板

大家是否对开发面板中的警告信息感到厌烦呢? 比如:

🌟 Chrome DevTools 七大新功能

新的 Issues 标签 的主要目的是:整合浏览器, javascript 库, 框架的各种警告与异常信息, 给大家一些修复建议。

打开devtool, 刷新网页,如果有警告信息的话, 会只显示一条View issues 链接, 如图:

🌟 Chrome DevTools 七大新功能

点击这个链接, 才会看到全部的 issues 列表, 也可以点击具体的某个 issue 查看具体的信息:

🌟 Chrome DevTools 七大新功能

有了这个功能, 整个面板就更清爽了。

5. 媒体面板

新的媒体面板提供了一站式的资源与信息, 让你能更快的调试媒体问题。

浏览一个有视频流的网站, 打开媒体面版,

🌟 Chrome DevTools 七大新功能

可以看到不同的分类,每一个类别下包含了具体详细的媒体信息。

你甚至可以下载视频,更方便的去排查问题:

🌟 Chrome DevTools 七大新功能

6. 一件修复文字的色彩对比

devtool 会根据你的背景与字体颜色,自动提供文字的色彩对比建议, 比如:

🌟 Chrome DevTools 七大新功能

我们看到, devtool 提供了 AA 与 AAA 两个色彩建议, 任意点击其中一个, 就是修复后的颜色:

🌟 Chrome DevTools 七大新功能

是不是很棒~

7. 及时模拟色觉障碍

你可以利用 devtool 来模拟视觉障碍。

地球上大约有3亿人有不同程度的色觉障碍

身为网页开发者的我们, 如有能有工具辅助我我们在开发时找出色觉障碍的问题, 这不是很好吗?

先给大家介绍一下视觉障碍与色觉障碍。

视觉障碍的不同类型:

模糊视线

🌟 Chrome DevTools 七大新功能

全色盲

🌟 Chrome DevTools 七大新功能

红色盲

🌟 Chrome DevTools 七大新功能

有了视觉模拟的功能, 就可以更方面的我们去设置无障碍资源, 有效的检测网页的色彩对比度:

🌟 Chrome DevTools 七大新功能

这个功能,能帮你更好的完善网页的无障碍资源, 改善用户体验。

What’s More

除了以上这些, 还有更多的新功能等待你去探索:

🌟 Chrome DevTools 七大新功能

戳我查看更多新功能 ->

篇幅关系,就不一一介绍。

福利大放送

提供一个 google 研发的博客, 不定时发布开发心得与分享, 不容错过~~

Google Dev Blog

总结

内容大概就这么多, 希望对大家有所帮助~


喜欢 (0)