亮点
我们在两周前发布了 playground。本周进行的是后续完善工作：在宣告大功告成之前，有三个细节需要打磨。cookie 现在正确遵循 RFC 6265，展开按钮可以将 response 放入真正的全屏覆盖层中，而不是拉伸网格单元格，并且整个功能终于可以在手机上正常运行了。
更新内容
cookie 现在遵循 RFC 6265
cookie jar 存在一个隐蔽的 bug 达两周之久。上游网站发送 Set-Cookie: ...; Domain=.example.com 以使 cookie 参与子域名匹配（开头的点表示“该 cookie 适用于顶级域名及其所有子域名”）。我们的解析器去掉了那个点，从而丢失了 Domain 属性已被设置这一事实。导致的结果是，cookie jar 无法区分 host-only cookie（无 Domain 属性）和 domain cookie。这带来了两个显眼的影响：
- 原始视图输出了
Domain=example.com（没有点），因此当您将 cookie 复制到 cURL 命令中时，接收网站会将其视为 host-only，而不会将其发送回子域名。 - Browser 产品的 cookie 传递依赖于脆弱的猜测来决定在浏览器中安装哪种 cookie，每当同一个 jar 中同时存在顶级域名和子域名时，它就会失效。
我们在每个解析后的 cookie 上添加了一个 hostOnly 布尔值。Domain 属性存在（无论带不带点）意味着 hostOnly: false，且 cookie 匹配该主机及其子域名。Domain 属性缺失意味着 hostOnly: true，且 cookie 仅绑定到确切的主机。原始视图针对 domain cookie 输出 Domain=.example.com，而对 host-only cookie 则完全省略 Domain，因此从 jar 中复制出来的 cookie 在往返传输中可以完好保留。解析视图在 host-only 行上显示一个小的 HO 徽章，一旦您开始观察它们，就会发现这其实是不常见的情况。在修复之前保存的现有 jar 将保留旧的宽匹配行为，因此不会有任何内容被静默丢弃。
展开模式采用真正的全屏覆盖层
旧的展开按钮在文档流内部拉伸了 response 卡片。这意味着较长的 response 会增加页面高度，body 会出现滚动条，并且当您切换时，response 面板上方的 request 面板会发生轻微位移。此外，response 窗格本身的高度限制在 480 到 560 像素之间，因此在 1440p 显示器上，深层 JSON 树下方会留出空白的卡片高度。
现在它是一个 position: fixed 覆盖层，从上到下锚定在侧边栏右边缘和视口边缘之间。body 获得了 overflow: hidden 属性，因此页面不会在覆盖层下方滚动。在覆盖层内部，活动窗格使用 calc(100vh - 280px)，并且 cookie jar 也采用了相同的滚动模式。按 ESC 键可折叠回分栏视图。按钮标题现在显示为“展开至全屏”或“折叠至分栏视图”，因此不再需要猜测其功能。图标一直都是四箭头字形，我们从一开始就应该明确说明这一点。
playground 支持手机端访问
在着手进行响应式图层开发之前，需要先修复两个移动端 bug。Send 按钮的标签一直贴在按钮的左边缘而不是居中；一旦 response 渲染，页面就会出现水平滚动条，因为一个宽子元素（长 URL、JSON 树或原始 HTML pre 块）强制网格列超出了视口宽度。这两个问题均已修复：Send 按钮现在正常居中，网格列使用 minmax(0, 1fr)，因此宽子元素会在其自身的卡片内滚动，而不会将页面向侧边挤压。
除此之外，我们还完善了之前未完全完成的响应式图层：
- 在低于 1023px 时，展开按钮会隐藏（此时网格已经是单列）。
- 在低于 767px 时，内边距会收紧，请求方法下拉菜单缩减至 96px，API-key 选择器采用弹性布局。
- 在低于 640px 时，URL 行会重排为两行（方法和 Send 按钮在上方，URL 在下方），response 工具按钮增大至 32px 的触摸目标，标签页支持水平滚动，并且 cookie 表格变成一个网格卡片，其中名称、值、路径和过期时间呈堆叠显示。
- 在低于 374px（iPhone SE 的屏幕尺寸）时，会进行额外的收缩处理以确保所有内容都触手足及。
此外，在粗指针设备（如触摸屏）上，提示工具提示现在可以通过点击打开，再次点击相同的触发源即可关闭。我们本周在火车上用借来的 iPhone SE 进行了测试，所有内容都完美贴合，没有出现水平抖动。
这就是将一个工具从“演示版”打造成“真正实用的工具”的过程。虽然比发布周要安静得多，但本周 playground 终于不再让我们感到沮丧了。