Chrome79更新来啦，前端实用特性解读

今天终于在 MacOS 收到 Chrome79 的大版本更新了，话不多说，下面介绍和前端开发相关的几个实用特性：

1. 调试请求时Cookie被过滤的原因

打开Network面板，随意选择一个请求，在请求的Cookie面板中，可以看到1个新的checkbox: show filtered out request cookies，默认是隐藏被过滤的请求Cookie。
勾选后可以看到被过滤的Cookie，黄色高亮底色显示。鼠标停在警告⚠️的图标上，可以看到Cookie被过滤的原因。比如图2中，被过滤的原因是cookie的domain和请求url的domain不匹配，虽然它们共享1个顶级域名的上层域名（TLD+1，比如 jd.com）。

点评：更好🉐️调试Cookie问题，比如为什么设置了Cookie请求没带上，有可能是设置的domain没对应上。

2. 模拟CSS媒体查询：色彩偏好模式和动效偏好模式

这两个特性算是比较新的媒体查询特性了：

色彩偏好模式，主要是用来切换白天/夜晚模式的
动效偏好模式，用来切换Web中的动画和过渡的

示例：打开任意网站的开发者工具

控制台执行以下代码，添加这两种新的媒体查询和样式
打开Rendering面板，找到对应的模拟选项，点击选择切换

const mediaCss = document.createElement('style');
mediaCss.textContent = `
@media (prefers-color-scheme: dark) {
  * {
   filter:grayscale(100%); /* Dark模式下所有元素灰阶100%，黑白色 */
  }
}
@media (perfers-reduced-motion: reduce) {
  * {
   transition-duration: 0.1s !important;
   animation-duration: 0.1s !important; /* 把所有过度时间和动画时间都降至最低的0.1s */
  }
}
`
document.head.appendChild(mediaCss)