「不容错过」Chrome DevTools 七大新功能

╰半夏微凉° 2022-12-28 08:29 188阅读 0赞

![format_png][]

# 背景 #

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」.

![format_png 1][]

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

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

![format_png 2][]

例如，（CSSOM API）`h1`添加的样式`CSSStyleSheet`以前不可编辑。

![format_png 3][]

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

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

![format_png 4][]

动态演示：

![format_png 5][]

## 2. 模拟时区功能 ##

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

比如：

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

![format_png 6][]

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

![format_png 7][]

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

![format_png 8][]

很方便吧～

开启这个面板的方法为：

![format_png 9][]

选择location 就可以了：

![format_png 10][]

## 3. Lighthouse 量化使用者体验 ##

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

![format_png 11][]

你可以打开lightHouse 面板， 生成报告来查看：

![format_png 12][]

示例：

![format_png 13][]

想要了解更多关于 `Core Web Vitals`的信息， 可以关注：

web.dev/vitals

## 4. Issues 面板 ##

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

![format_png 14][]

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

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

![format_png 15][]

点击 View Issues 链接， 才会看到全部的 issues 列表， 也可以点击具体的某个 issue 查看具体的信息：  
![format_png 16][]

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

## 5. 媒体面板 ##

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

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

![format_png 17][]

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

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

![format_png 18][]

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

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

![format_png 19][]

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

![format_png 20][]

是不是很棒～

## 7. 及时模拟色觉障碍 ##

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

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

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

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

视觉障碍的不同类型：

### 模糊视线 ###

![format_png 21][]

### 全色盲 ###

![format_png 22][]

### 红色盲 ###

![format_png 23][]

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

![format_png 24][]

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

## What's More ##

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

![format_png 25][]

戳我查看更多新功能 ->

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

## 福利大放送 ##

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

**Google Dev Blog**

# 总结 #

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

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 26][]

![format_png 27][]

点个**在看**支持我吧

![format_png 28][]

[format_png]: /images/20221120/d1b425b5c98746a2907e2b94aa483eca.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3Tld0TTNqNDY4ekRkanhIaGxJU2hDMWZDc1AzQnYxUUVkcHRvMGJHQWExSzV1MUVjQ3pRZm1JZy82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TnJ0WGUzaWJHOUVSM1BDMkp6SENSVTZLOEFYZjNYR0RWQU9WSFBVM0VDUUNNZlpiRGljazJSOWhnLzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TjlQeEtQT3BkczZUcmd4VjBaT3VaTzVRNFlndXF1S0oxb0FhaWJQMXBma3Z2WWhyMVRHRzNXNFEvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TnhaT2pOdFJRZTZzZUpKYVBLb1A3eWx4TEdRMW0ySGtXa3lCaWFLMnl5aWJxRWE2cGlhaWNaOXc3YlEvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TkJ1eVVNaWNXZkNQaWNpYTlBVG9Ibjl6Z29qeVhNZEhCY3NZTlVIaWN4TUFtc2U2cGQ0aWJkWVZOMWxnLzY0MA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3Tk1TSGwyWFdQNWp1UTQ1ZUdia2tjTGljZmtXaHJ6RklJSHplSlNvQ0x4YXlNaDNpYTg5cjhaaWEwdy82NDA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TjdVMEZtRGM3RFdocll6MDZraGpuYzdEWDE4ZWcycHdSUVFBd09IQmhGakN4OVhvdENTTm1vZy82NDA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TndYaWFiY2hqem1SMmdUb0hoSlRpYlFDd2RDWlBuY2dVU2RXM1Q1VVYxM2RkWDFONFFTWUNYcXBBLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TmlhdGljYjM2Z3dxWGhXOG1ZV01TQXR0emVwaWF0dnVkSURpY2FhaDlpYWxkTDI2TTBFU3dXM3JJdmRBLzY0MA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TmtOWGhMOGVJclFlWHJxa2gydWhaT2JVaWJnejBIc2x3dkVWUEtWaFFJRVRMWTFTZ1JXa1R1Z3cvNjQw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TnBkMm9RQUJSMFhnZ0NyQjlmTXJ4NDR2aDY2dWRlMmJkd0RZZ09yWnVObjVkcXF2dEhQZzNody82NDA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TjBqaGliWUdGekdERHV1aEQ0VThkV29zUXBjbGJUd0NFMVNBemlhYVVkbDd0RjFHZVBKQ3FNVjBnLzY0MA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3Tnl2dEdFaWNuWHBlcm04c2xVczZpYjl6cjN1QUFFbGljVXpHbHBNWmlhVkRmYWlicmljcWtKUjdzMWlhNGcvNjQw?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TlF2MGRNVVM5MW1udnl3Mkw2eW1MV2ljaWNTNTlzRmtIYk5jV0FpYWp6MlhYMFQ3Q0QyUzNoSDh6QS82NDA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TkcwMUhpYTJhUWM5aWNMWHNpY293SExxOUZaNGg1bkZPT0RoeHRJbmFYMFFWeWlhbzU0aWEwOENpYWlhSlEvNjQw?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TjQ4andteVhpY2dpYmp1THZoSGxZTUtTYXhlaWFnb0RoOXNqY2ljY29Td3NYNkVOTTJTcUtjNURaWkEvNjQw?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TmhYbkRWQW5iSzNLSGNERGljSFFRMHM0bFo0dE5tNE1ud2U4QXRpYVlYejNSeVp4OWlieWpmUzE4US82NDA?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TjJJZDM1MU5pY2ljWWEwbTdQNTNmMVVtbjltWm5sdGgyTlpodnpVc1BpY0VpY3htVmZWZWE3NWRPWXcvNjQw?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TmtscnNvUnM2ZGlhOEJBRDlFS0xteEQ0WEtMNHBpYndyN3NYVmRKekNDeHZFbTRZYjBXcVZKamlhUS82NDA?x-oss-process=image/format,png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TnRpYTZUVlNVWTNzMGdXTHRiUEs3ek1HSlZOSlEybU5YaWFpYWJTMUZteDR5cFdWUkprSmliVjdUc1EvNjQw?x-oss-process=image/format,png
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TmZ4cWJEMDRJU3RKRVhEY3VONDEyYklnNGt1UlRmb29jNWpiT3N1WnpyVHMyakhJSk9pYlpCR2cvNjQw?x-oss-process=image/format,png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TlNpY1pNOWdjbXExV29taGliSHBtUTZhYlBzcmo3QzdEUXB6SmFDbGc0MXFnQlVBRUF6V2s0NnN3LzY0MA?x-oss-process=image/format,png
[format_png 23]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TnpLTlRNdTdZejBFT0FLaWJsME5HWUlFWDY3QnIxVkxxSVJpYmY3eDNXeW41QmF4QUFUSjVWOFBRLzY0MA?x-oss-process=image/format,png
[format_png 24]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TlBSeUxrWk5LeXU2MVBDdjR6STd0Vmh5SzEwSklHbzV4VmZxbDV3UHowdVFMeG9JNUFySUxGQS82NDA?x-oss-process=image/format,png
[format_png 25]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9kak82ZjVwZW5FZldVUEhQSDBiRlpXZThPNEtxdWo3TlhxTWRLMGVxbmhOclBOS1AzVWFZbEZWSE8wMHRZV2lhMVhvZDhwM0ZIQXMyWFppYVE3bWljZklIQS82NDA?x-oss-process=image/format,png
[format_png 26]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8yd1Y3TGljTDc2MmJDT0lTMGVzMkR2dDBQWEZCYVJrUkNwSFRPbHdhbzBYMXhKRkFRVzlTQWE2bWd6UklPNWZYa3RTak9TdVpBTHFndDBpYkJEQmNQZjlnLzY0MA?x-oss-process=image/format,png
[format_png 27]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNkJHTkxPUXh3Qm1NVE9HbU8wZFNkMzFMbFhMNUhvWldCSDZmS3RTU2VLUTJET2VUZlZSN25IVlhsMFU3UlNBY2hVVm9pYTJiRXJZZmcvNjQw?x-oss-process=image/format,png
[format_png 28]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi83UVJUdmtLMnFDNkJHTkxPUXh3Qm1NVE9HbU8wZFNkM05tT1dzWkJNV2czQkMxbXNkd3R5dkJrTkxZaDF4R0xRaWJtNFFzSGliQ2x3eFdmenVpYmljYkpjSUEvNjQw?x-oss-process=image/format,png