WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in Web Inspector

What's new in Web Inspector

SafariWeb InspectorWebKit
观看原视频

Highlight

Safari 14 的 Web Inspector 新增 Sources Tab、Local Overrides、Inspector Bootstrap Script、Storage cookie 编辑、Media & Animations timeline、Graphics/Layers 可视化和 Console heap 查询，帮助开发者直接排查 Safari、WKWebView 与 JSContext 中的网络、脚本、动画和存储问题。

核心内容

调试网页时，问题常常分散在几个地方。资源从服务器来，脚本被压缩成一行，第三方库拦住断点，动画卡顿又藏在渲染层里。过去在 Safari 里排查这些问题，开发者经常要在多个标签页之间来回切换，还要改服务器文件、重启页面、再观察一次。

这场 Session 展示的是 Safari 14 里的 Web Inspector 改动。入口仍然在 Safari 的 Develop menu 中，能力覆盖 Safari 页面、App 里的 WKWebView，以及 JSContext。Apple 先压缩了界面高度，把 toolbar 和 dashboard 合进 tab bar，再把 Network 统计移到主表下方，让检查页面时保留更多垂直空间。

更关键的变化在调试路径。新的 Sources Tab 把资源查看、JavaScript 调试和网络覆盖放在一起。开发者看到远端 HTML、JSON、图片或脚本出问题时，可直接建立 Local Override，改内容、状态码或 HTTP header，然后刷新页面验证。要改 WebKit 暴露给页面的 JavaScript API 行为时，则用 Inspector Bootstrap Script 在页面脚本前运行调试逻辑。

后半部分转向专项工具。Storage Tab 支持过滤、编辑、删除 cookie。Timelines Tab 新增 Media & Animations timeline。Graphics Tab 扩展了原来的 Canvas Tab，能看到 Web Animations、CSS animations、CSS transitions。Layers Tab 让开发者直接查看 layer tree、内存成本、paint count，以及某个 layer 被创建的原因。Console 还新增 queryInstances 和 queryHolders，用于直接从 JavaScript heap 中找对象实例和强引用。

详细内容

用 Sources Tab 把资源、调试器和网络覆盖放到同一条路径

（02:11）Sources Tab 合并了旧 Resources Tab 和 Debugger Tab 的核心能力。它列出 Web Inspector 打开后页面加载过的资源，包含长期存在的 WebSocket，也包含 XHR 和 fetch 这类短生命周期请求。它也是 JavaScript debugger stepping controls、breakpoint 添加入口和 network overriding 的主要位置。

（03:08）查看资源时，Web Inspector 会给适合的内容提供 alternate representations。HTML response 可切换成 DOM tree，JSON 可切换成 object tree。请求体也有同类视图。排查接口响应时，开发者不用只盯着原始文本滚动查找标签或字段。

关键点：

  • Sources Tab 把资源查看、断点调试和网络覆盖集中在同一个工作区。
  • HTML response 可按 DOM tree 查看，JSON response 可按 Console object tree 查看。
  • 这些表示方式同样适用于 request content。
  • 对照旧版体验，这减少了从资源面板跳到调试器再回到网络面板的切换。

用 Local Overrides 在本地替换远端响应

（04:26）远端资源常常不容易直接修改。它可能在服务器上，也可能经过复杂的预处理。Local Overrides 解决的是这个环节：开发者在查看任意资源时点击 Create Override，Web Inspector 会把当前内容复制成该资源的本地覆盖版本。

（05:43）Local Override 不只改 response body。通过 Edit Local Override 操作，还能修改 HTTP status code 和 HTTP headers。页面再次加载匹配 URL 的资源时，整个 response 会被本地覆盖版本替换，包含内容、状态码和 header。被覆盖的资源在 Web Inspector 各处都会显示特殊图标。

关键点：

  • Local Override 会跨 inspected page 和 Web Inspector session 保留。
  • 主资源和非文本资源也能被覆盖，transcript 里明确提到 image 也适用。
  • 替换发生在 URL 匹配时，覆盖范围包含 response content、status code 和 HTTP headers。
  • 这适合验证服务器暂时无法发布的修复，例如 HTML 文案、header 配置或图片替换。

用 Inspector Bootstrap Script 提前改写调试环境

（06:50）有些问题不在网络资源里，而在 WebKit 提供给页面的 JavaScript API 表面。Inspector Bootstrap Script 从 Sources Tab 侧栏底部的 add resource 按钮创建，内容保证早于 inspected page 中的任何脚本运行。

这个时机让它适合做两类事情。第一类是 swizzle built-in functions，观察内建函数在哪里被调用。第二类是提前设置 global state，让页面自己的代码输出更多调试信息。它和 Local Overrides 一样，会跨 inspected page 和 Web Inspector session 保留。

关键点：

  • Inspector Bootstrap Script 修改的是页面启动时看到的 JavaScript API surface。
  • 它保证在页面其他脚本之前运行，适合插入早期探针。
  • transcript 给出的用途包括 swizzle built-in functions 和设置全局调试状态。
  • 它用于调试，不需要把临时代码提交到网站代码库。

用新断点和 blackboxing 避开第三方库噪音

（07:54）Web Inspector 新增多个 global breakpoints。Debugger Statements breakpoint 单独控制 debugger statement，不必为了忽略它而关闭所有断点。All Microtasks 会在 microtask 执行前暂停，覆盖 Promise 和 queueMicrotask()。All Animation Frames、All Timeouts、All Intervals、All Events 分别覆盖 requestAnimationFrame、setTimeout、setInterval 和事件监听回调。

（10:06）全局断点容易停在库代码里。Session 用 jQuery 包装事件监听的例子说明这个问题。Script blackboxing 允许开发者把某个脚本标记为 blackboxed，JavaScript debugger 会把本来发生在该脚本里的 pause 延后到第一个离开该脚本的表达式。大型库还可在 Settings Tab 里用正则模式匹配多个 script URL。

关键点：

  • debugger statement 有独立开关，其他断点类型可继续工作。
  • microtask、animation frame、timeout、interval、event listener 都有全局断点入口。
  • blackboxing 的目标是让断点停在开发者代码中，减少第三方库 wrapper 的干扰。
  • Web Inspector 仍会展示 blackboxed script 的 call frames，并用灰色标出。

用 Step 和 HTML pretty print 处理压缩或内联脚本

（11:03）JavaScript 单行里可能串着多个函数调用。过去想停在第三个调用前，开发者要 Step In、Step Out 多次。新的 Step debugger action 会在当前 call frame 的下一个 expression 前重新暂停。Session 里的例子是连续执行 a、b 后，逐步到达 c 调用。

（13:16）内联脚本也得到改善。Safari 最新版的 Web Inspector 支持格式化 HTML 和其他 XML-like content，包含 inline scripts 和 style sheets。Pretty print 之后，现有 JavaScript debugger 和 stepping 能力也能用于这些内联内容。

关键点：

  • Step action 的粒度是 expression，Step Over 的粒度是 statement。
  • 单行里有多个调用时，Step 能减少来回 Step In 和 Step Out 的次数。
  • HTML pretty print 让内联脚本和样式表变得可读。
  • Web Inspector 会尝试检测 minified HTML 并自动打开 pretty printing。

用 Media & Animations、Graphics 和 Layers 查动画与渲染问题

（14:25）Timelines Tab 新增 Media & Animations timeline。它捕获 media element 事件，例如视频暂停，也捕获 CSS animations 和 CSS transitions 的生命周期。每个 media element、CSS animation 或 CSS transition 都有自己的行，并带有相关 DOM node、animation-name 或 transition-property 信息。

（17:54）Graphics Tab 扩展了原 Canvas Tab。它仍然列出 contexts 和 shaders，支持录制 context 上的 JavaScript API calls，同时新增 Web Animations 列表，按 JavaScript、CSS animations、CSS transitions 等来源分类。选中动画后，details sidebar 会显示 ID、关联节点、timing parameters、keyframes，以及 JavaScript API 创建动画时的 backtrace。

（20:02）Layers Tab 显示 inspected page 的 layer tree live view，并列出每个 layer 的 memory cost 和 paint count。开发者选中某个 layer 后，可看到它被创建的原因。Session 中的例子显示，当前 layer 来自 CSS 动画和 CSS will-change property。

关键点：

  • Media & Animations timeline 用来把媒体状态、动画生命周期和其他 timeline 活动对齐。
  • Graphics Tab 适合检查 Web Animations 的 timing、keyframes 和创建来源。
  • Layers Tab 适合找 unintended layers、内存成本和 paint count。
  • Layer tree 视图支持旋转、缩放和平移，方便从视觉结构定位目标 layer。

用 Storage 和 Console 直接处理状态与堆对象

（16:19）Storage Tab 展示页面存储在浏览器里的数据，包含 cookies、LocalStorage 和 IndexedDB。Safari 14 的 Web Inspector 为各种 storage type 加入过滤能力，并加强 cookie 的编辑和删除。开发者可双击 cookie 单元格打开 popover，修改各字段；也可通过 add cookie 按钮新增 cookie，但 name 是必填项。

（22:08）Console 新增两个值得记住的 heap 查询函数。queryInstances 接收 constructor 或 prototype，扫描 JavaScript heap 中继承自它的对象，并返回数组。queryHolders 接收一个 object，扫描 heap 中对它有 strong reference 的其他对象。Session 用 Person.parent 说明 strong reference 可能导致内存泄漏。

（24:38）隐私相关日志也进入 Web Inspector Console。只要 Web Inspector 已经打开，在 Safari Develop menu 中启用 Intelligent Tracking Prevention Debug Mode，ITP debug logging 会同时出现在 Web Inspector Console 和 macOS Console.app。Ad Click Attribution Debug Mode 的日志也会显示在 Web Inspector Console。

关键点：

  • Storage Tab 的 filter bar 会匹配 cookie 等 storage 行的字段。
  • Cookie 编辑在 popover dismissed 后应用，新增 cookie 需要 name。
  • queryInstances 用于找某个 constructor 或 prototype 对应的实例。
  • queryHolders 用于找强引用持有者，适合排查 JavaScript memory leaks。
  • ITP 与 Ad Click Attribution 的 debug log 可直接留在 Web Inspector Console 里看。

核心启发

  • 做一个远端响应快速验证流程：做什么：为线上页面准备一套 Local Overrides 检查清单，覆盖 HTML 文案、图片、HTTP header 和 status code。为什么值得做：Session 明确说明 Local Overrides 能替换完整 response，并跨 session 保留。怎么开始：从最常改的页面资源开始建 override，刷新 inspected page 验证行为，再把确认过的改动同步给服务端实现。

  • 做一个第三方库断点模板：做什么：给项目常用库配置 blackboxing 规则，让 All Events、All Timeouts 这类全局断点更容易停到业务代码。为什么值得做：Session 的 jQuery 示例说明，事件回调常被库 wrapper 包住。怎么开始：在 Settings Tab 里为库文件 URL 写正则模式，再用一次真实点击或 timeout 回调验证 pause 位置。

  • 做一个动画性能排查面板：做什么：把 Media & Animations timeline、Graphics Tab 和 Layers Tab 的检查步骤整理成固定流程。为什么值得做：Session 分别提供动画生命周期、Web Animations 参数、layer memory cost、paint count 和 layer 创建原因。怎么开始：先录制一次 timeline，再选中异常动画看 keyframes，最后到 Layers Tab 查看相关 DOM node 是否产生了多余 layer。

  • 做一个 cookie 与登录状态复现实验：做什么：用 Storage Tab 的过滤、编辑、新增 cookie 能力复现登录、A/B 分组或区域开关状态。为什么值得做：Session 说明 cookie 字段可直接编辑，且新增 cookie 会像 HTTP cookie 或 document.cookie 设置的 cookie 一样持久存在。怎么开始：过滤目标 cookie，记录修改前字段，改动后刷新页面观察 Console 和 Network 行为。

  • 做一个内存泄漏定位小手册：做什么：把 queryInstances 和 queryHolders 加入前端内存排查流程。为什么值得做：Session 说明它们可直接扫描 heap，分别找实例和强引用持有者，比只看完整 heap snapshot 更快进入目标对象。怎么开始：在 Console 里先用 constructor 找实例，再对可疑对象调用 holder 查询，沿着 strong reference 回到持有者。

关联 Session

评论

GitHub Issues · utterances