阅读 693

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,这两个表就不会出现。
      • 相关链接
  • 新特性二:支持查看不同 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 移动到上一行。
  • 往期文档
  • 其他说明
    • 本文同时发布与于
    • 作者:西楼听雨(微信名 t.t.)
      我就是21世纪最伟大的发明​​
    • 打赏:你的一枚硬币,造就的却可能是下一代比尔·盖茨
    • 联系 & 交流 & 聘用


关注下面的标签,发现更多相似文章
评论