Chrome 79 开发者工具新特性

本文参考自：What's New In DevTools (Chrome 79)

developers.google.com/web/updates…

新特性一：支持查看 Cookie 未被发送或者接收的原因

• 我们都知道，客户端在发送请求时会携带与目的域名相匹配的 Cookie，服务端在返回响时也可以设置 Cookie，但这些 Cookie 并不一定会被客户端所发送或者接受，尤其是在最近即将全面部署的新 Cookie 安全模型实施之后（Chrome 会在 80 版本中部署），这种情况将会大量出现。本次 Chrome 发布之后，我们就可以通过开发者工具排查这些情况出现的原因。方法是，在 Network 面板中录制了请求记录后，点击你想要排查的资源，然后切换至 Cookies 标签，如下图：

  

  • 其中
    • 1. 在 “Request Cookies” 表中，黄色背景的条目就是那些没有被发送出去的 Cookie，上图中没有，是因为这些条目默认是隐藏的，需要勾选“show filtered request cookies”选项才会展示出来。
    • 2. 在 “Response Cookies”表中，黄色背景的条目就是那些没有被客户端接受的 Cookie。
    • 3. 将光标移至信息图标上，可以查看该条 Cookie 没有被发送或接受的原因。
    • 4. 注意，如果没有发送一条，或者没有返回一条 Cookie，这两个表就不会出现。
  • 相关链接
    • 关于新 Cookie 安全模型的文章
      • 2. Changes to the default behavior without SameSite web.dev/samesite-co…
    • 1. [译] 新 Cookie 安全模型即将到来，我们需要做哪些准备？ (双语) mubu.com/doc/s0Ue9qC…

新特性二：支持查看不同 prefers-color-sheme 和 prefers-reduced-motion 状态下的样式

• 这两项都是媒体查询（media-query）条件，分别代表了用户当前操作系统的配色模式（如暗色、亮色）和用户操作系统当前是否启用了动画过渡效果。在本次 Chrome 发布之后，在开发这工具的 Show Rendering小面板下针对这两项查询条件新增了两个下啦选项，我们可以设置来这个选项，来设置这两个查询条件，以此查看不同状态下的样式。效果图如下：

  

新特性三：Coverage 小面板更换了条状图配色，新增了按分类筛选

• 以前的 Coverage（代码覆盖率）小面板中，覆盖率条状图的配色对有视觉障碍（如色弱）的用户来说并不友好，在本次 Chrome 更新后，条状图的配色做了优化，未被执行的代码量采用了红色条状表示，被执行的代码量采用了暗青色表示（如下图）。除此之外，Coverage 面板还新增了一个按类型筛选的筛选条件，支持按 Javascript、CSS 筛选，以方便查看。

  

• Sources 面板对此也做了更新（如下图）。如果我们点击代码块前的色条，开发者工具会自动打开 Coverage 小面板，并高亮 你所点击的文件。

  

新特性四：新增小标签以便更好地查看网络请求被发起的原因

• 以往该项信息只能通过 Network 面板中的 initiator 列查看，因为该信息过于冗长，为了便于查看，在本版本的 Chrome 中新增了一个专门用于查看该信息的小标签，如下图：

  

新特性五：修复代码缩进失效的 bug

• 一直以来，开发者工具中都有一个用来设置代码缩进的设置项，但最近这个设置由于存在一个 bug 不管用了，本次 Chrome 已经做了修复。关于这个 bug 的详情，可以查看crbug.com/977394；
  • 设置项的路径：Settings > Preferences > Sources > Default Indentation

新特性六：新增快捷键以支持光标导航

• 在本次 Chrome 发布后，我们在 Console 和 Source 面板下可以通过 Control + N 将光标移动到下一行，通过 Control + P 移动到上一行。

往期文档

• Chrome 78 开发者工具新特性 mubu.com/doc/vNGFvsM…
• Chrome 78 新特性 待更新....
• Chrome 更新日志目录 mubu.com/doc/AObcWUR…