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 安全模型的文章
        • 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 移动到上一行。
  • 往期文档

评论 抢沙发

表情
  1. #1

    来自河南郑州的用户 1天前
    大神

  2. #2

    来自北京朝阳的用户 6天前
    这个要记录下来,每天打卡。跟着大佬学习

  3. #3

    来自北京昌平的用户 8天前
    满满的干货,受益匪浅!如果排版再弄好看点,可能点赞数更高

  4. #4

    来自北京朝阳的用户 10天前
    开始学习

  5. #5

    来自四川成都的用户 13天前
    学习开始

  6. #6

    来自辽宁沈阳的用户 15天前
    很棒,很棒

  7. #7

    来自辽宁沈阳的用户 18天前
    可以说是相当详细了

  8. #8

    来自四川成都的用户 23天前
    你们送过来的程序员已经见到了,挺厉害一小伙。另外我这边还缺个产品经理,什么时候给我送个过来?

  9. #9

    来自河北石家庄的用户 23天前
    小白我没有看懂hhh

  10. #10

    来自山东济南的用户 29天前
    感谢您的文章,又学到了不少东西

  11. #11

    来自天津南开的用户 30天前
    优秀,先收藏了。