-
本文参考自:What's New In DevTools (Chrome 79)
-
新特性一:支持查看 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…
- 关于新 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
- 一直以来,开发者工具中都有一个用来设置代码缩进的设置项,但最近这个设置由于存在一个 bug 不管用了,本次 Chrome 已经做了修复。关于这个 bug 的详情,可以查看crbug.com/977394;
-
新特性六:新增快捷键以支持光标导航
- 在本次 Chrome 发布后,我们在 Console 和 Source 面板下可以通过 Control + N 将光标移动到下一行,通过 Control + P 移动到上一行。
-
往期文档
- Chrome 78 开发者工具新特性 mubu.com/doc/vNGFvsM…
- Chrome 78 新特性 待更新....
- Chrome 更新日志目录 mubu.com/doc/AObcWUR…
来自北京朝阳的用户 10天前
这个要记录下来,每天打卡。跟着大佬学习
来自北京朝阳的用户 10天前
楼下方便加下微信麽,交流下!
来自福建福州的用户 10天前
虽然很多还看不懂 但是很赞
来自四川成都的用户 10天前
你们送过来的程序员已经见到了,挺厉害一小伙。另外我这边还缺个产品经理,什么时候给我送个过来?
来自上海徐汇的用户 18天前
有发布到github吗?
来自北京昌平的用户 19天前
可以说是相当详细了
来自河北石家庄的用户 20天前
文章挺好,先赞再看,点赞这么少,真的没人喜欢这么用嘛
来自江苏玄武的用户 21天前
点赞,前排摸大佬沾点技术
来自河北沧州的用户 21天前
优秀。转发
来自重庆万州的用户 22天前
小白我没有看懂hhh
来自山东济南的用户 24天前
开始学习