关键词：
参考源: What's New In DevTools (Chrome 94)[1]
翻译：西楼听雨
原文链接：https://juejin.cn/post/7001735350217359390
⚠️ 新特性都是先在 Chrome 的 Canary 通道中发布的，要想体验本文提到的新特性，请下载 Canary 通道版本的 Chrome。本文中的所有链接都需要自备tz。
新特性一：操作界面开始支持多种语言
新特性二：设备模式列表新增 Nest Hub 和 Nest Hub Max 两款设备
Nest Hub 是谷歌生产的一款智能家居设备，产品图如下：
在打开开发者工具后，进入响应式显示模式，即可在设备列表中找到这两款设备：
新特性三：Application 面板支持显示 Frame 部署了的 Origin trial
新特性四：CSS 容器查询元素上新增一个徽标
在 Elements 面板中，作为容器查询的容器元素（即应用了 @container 规则的元素），现在会显示一个“Container”徽标，选中后该元素在页面上会用边线把它标示出来
新特性五：Network 面板的筛选支持一键反向筛选
通过下图中新增了的 Invert （反向）复选框即可实现反向筛选。下图中原本筛是状态码为 404 的请求，选中 Invert 后，就变成了筛选不是 404 的请求。
新特性六：Console 的侧边栏新增侧边栏即将移除的告示
如下图。Chrome 开发者工具准备将 Console 的侧边栏转移到工具栏，所以在这个版本中事先贴下告示。
新特性七：Issues 标签和 Network 面板支持显示错误的 Set-Cookie 头
在之前，如果 Set-Cookie 响应头的值设置不正确时（例如设置了 SameSite 属性，但没有设置 Secure 标识：Set-Cookie: cookie_name=value; SameSite=Lax），Network 面板是不会将其展示出来的。现在借助 response-header-set-cookie 筛选条件，可以对错误的 Set-Cookie 做筛选。另外，在 Issues 标签中，现在也会给出具体的错误的 Set-Cookie，点击还可以跳转到具体的请求。
新特性八：Console 打印对象时，对计算属性也会进行求值显示
在这之前，属性如果是计算属性，即 getter (如 Object.defineProperty(obj, prop, get() ... ))，默认是不会进行求值展示的，而是显示 (...), 需要点击之后才会显示
左边是之前的效果，右边是新版本的效果
新特性九：内联脚本报错信息支持以 SourceMap 为准
之前，当内联脚本报错时，显示的报错位置是以 html 为准的，现在可以以 source map 为准了：
新特性十：CSS 的计算属性面板中的颜色值也开始支持切换显示格式
通过按住 Shift 键点击颜色值，即可切换显示格式，如（RGB 到 HSL）
参考资料
[1]
https://developer.chrome.com/blog/new-in-devtools-94/: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fnew-in-devtools-94%2F
最后
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
欢迎加我微信「 sherlocked_93 」拉你进技术群，长期交流学习...
关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
点个在看支持我吧，转发就更好了
apacheecharts5震撼发布：五大模块，十五项新特性全面升级！(代码片段)
数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。ApacheECharts始终致力于让开发者以更方便的方式创造灵活丰富的可... 查看详情
在 Chrome 开发工具中查看确切的 CSS 特性？
】在Chrome开发工具中查看确切的CSS特性？【英文标题】：SeeexactCSSspecificityinChromeDevTools?【发布时间】：2018-11-1811:35:43【问题描述】：我知道在Chrome开发工具中，对于选定的HTML元素，适用的CSS选择器会在样式选项卡中按特定顺序... 查看详情
引入具有争议的idledetectionapi，chrome94发布
随着Chrome软件版本更新由6周调整为4周，在Chrome93刚面世不到3周的时间，谷歌便正式发布了可以同时适配PC和移动端的Chrome94稳定版，其中值得关注的功能更新有：弃用AppCache功能，该功能可以让开发人员指定浏... 查看详情
如何将 Chrome 版本从版本 94.0.4606.71 降级到版本 94.0.4606.61
】如何将Chrome版本从版本94.0.4606.71降级到版本94.0.4606.61【英文标题】：HowdoIdowngrademyChromeVersionfromversion94.0.4606.71toversion94.0.4606.61【发布时间】：2021-11-2705:54:52【问题描述】：我正在使用Python开发语音助手。我在运行代码时不断收... 查看详情
chrome94加入网页开发新技术，或有助于提高云游戏体验
...晓曼出品|CSDN（ID：CSDNnews）近日，谷歌在ChromeBeta94声明中提到，谷歌正在实施一些新的网页标准，这些标准可能会让基于浏览器的游戏体验变得更好。即将发布的WebCodecs可以让云游戏更简单、更快，而... 查看详情
Redux 开发工具 Chrome 扩展 Immutable.js 导致错误
】Redux开发工具Chrome扩展Immutable.js导致错误【英文标题】：ReduxDevToolsChromeExtensionImmutable.jsCausesError【发布时间】：2016-08-2507:26:19【问题描述】：目前，我的redux设置（它使用Immutable.js的状态）完全按照需要运行。但是，redux开发工... 查看详情
flutter2.8正式发布
...发布适用于移动、Web、桌面和嵌入式平台的精美应用——开发者只需专注于他们希望构建的产品和服务，而无需首要考虑发布到哪些平台；作为一个高性能、高生产力的开发框架，Flutter也可以帮助开发者们缩短产品... 查看详情
适配又来了，android12十项新特性，紧跟潮流拥抱未来(代码片段)
...面在过去的一段时间内，每个应用的闪屏页其实是由开发者自己定义的，并没有一个明确的标准。但在Android12的手机上，即使我们不做任何适配，系统也为默认提供一个闪屏动画。UI大大们会满足于默认的闪屏页... 查看详情
取消停靠 Chrome 开发者工具
】取消停靠Chrome开发者工具【英文标题】：UndockChromeDeveloperTools【发布时间】：2013-12-1118:34:27【问题描述】：如何取消Chrome中的Chrome开发者工具？按左下角只是将其移动到右侧。（来源：github.io）【问题讨论】：这里问过类似的... 查看详情
Selenium 错误：ChromeDriver 仅支持 Chrome 版本 94
】Selenium错误：ChromeDriver仅支持Chrome版本94【英文标题】：SeleniumError:ChromeDriveronlysupportsChromeversion94【发布时间】：2022-01-0306:51:57【问题描述】：几天前，我能够在selenium中运行我的测试。我今天尝试运行我的代码并收到以下错误... 查看详情
Chrome 开发者工具中的“会话存储”是啥？
】Chrome开发者工具中的“会话存储”是啥？【英文标题】：Whatis"SessionStorage"inChromeDeveloperTools?Chrome开发者工具中的“会话存储”是什么？【发布时间】：2013-12-0820:09:11【问题描述】：Chrome的开发者工具的资源标签下的会... 查看详情
提交断点 - Chrome 开发者工具 [重复]
】提交断点-Chrome开发者工具[重复]【英文标题】：breakpointonsubmit-Chromedevelopertool[duplicate]【发布时间】：2014-02-0716:54:13【问题描述】：有什么办法可以在chrome开发者工具上设置一个断点，以便在我点击提交按钮时屏幕暂停？确切... 查看详情
阿里sentinel支持springcloudgateway啦
1.前言4月25号，Sentinel1.6.0正式发布，带来SpringCloudGateway支持、控制台登录功能、改进的热点限流和注解fallback等多项新特性，该出手时就出手，紧跟时代潮流，昨天刚发布，今天我就要给大家分享下如何使用！2.介绍（本段来自Se... 查看详情
显示通过 Chrome 开发者工具所做的所有更改
】显示通过Chrome开发者工具所做的所有更改【英文标题】：ShowallchangesmadethroughChromeDeveloperTools【发布时间】：2014-09-2103:11:30【问题描述】：如何显示我使用Chrome开发者工具所做的所有更改？示例：打开一个网站。打开Chrome开发者... 查看详情
使用 Chrome 开发者工具编辑 Javascript
】使用Chrome开发者工具编辑Javascript【英文标题】：EditingJavascriptusingChromeDeveloperTools【发布时间】：2012-09-1713:46:05【问题描述】：我正在尝试使用Chrome的开发者工具编辑网站上的javascript。我已经阅读了大约30个关于如何执行此操... 查看详情
如何更改 Chrome 开发者工具的图标？
】如何更改Chrome开发者工具的图标？【英文标题】：HowcanIchangeiconforChromeDeveloperTools?【发布时间】：2015-12-0610:42:06【问题描述】：您可能知道，Chrome开发工具与浏览器本身具有相同的图标。为了提高工作效率，我想更改它的图标... 查看详情
chrome插件特性及实战场景案例分析
...f0c;我们想要的某个功能市面上没有现成的插件，作为开发者自然而然想到，自己是否可以动手开发一个定制化的插件？网上目前很多不错的关于Chrome插件的开发教程，可以帮助我们快速上手开发一个插件，本... 查看详情
使用 Chrome 开发者工具调试资源脚本
】使用Chrome开发者工具调试资源脚本【英文标题】：DebugResourceScriptswithChromeDeveloperTool【发布时间】：2011-10-1017:16:35【问题描述】：我在“资源”选项卡中找到了脚本文件，而不是在“脚本”选项卡中，因此，当我在“脚本”选... 查看详情