DevTools 循环任务

在每个 Nightly 循环中,我们应该做一些事情来保持代码的清洁和最新。

更新兼容性面板的 MDN 数据

遵循 devtools/client/inspector/compatibility/README.md 中的说明。

生成 webidl-pure-allowlist.js 和 webidl-deprecated-list.js

webidl-pure-allowlist.js 文件用于控制台即时求值,以便了解给定方法是否没有副作用。如果添加了新的 API 或方法被标记为纯方法(或取消标记),则可能需要更新此文件。

webidl-deprecated-list.js 文件将用于避免从 DevTools 代码调用已弃用的 getter。

  1. 生成这些文件需要一个非工件构建。如果您主要使用工件构建,则可能需要运行 ./mach bootstrap 以获得合适的构建环境。

  2. 构建完成后,您应该能够按照 GenerateDataFromWebIdls.py 顶部的说明进行操作,说明如下:2.1. 使用 ./mach python devtools/shared/webconsole/GenerateDataFromWebIdls.py 运行脚本。

移除向后兼容代码

为了适应连接到旧版服务器,我们有时需要在代码中引入特定的分支。目前,我们只支持连接到比客户端旧两个版本的服务器(例如,如果客户端是 87,我们支持连接到 86 和 85)。这意味着在每次发布时,都有机会清理为不再需要支持的服务器引入的向后兼容代码。如果我回到我使用 87 客户端的示例,我们可以删除为支持 85 添加的任何向后兼容代码。

幸运的是,在添加兼容性代码时,我们还会添加遵循特定模式的注释:@backward-compat { version XX },其中 XX 是代码支持的版本号。

回到我们当前版本为 87 的示例,我们需要列出为 85 添加的所有注释。这可以通过使用以下表达式进行搜索来完成:@backward-compat { version 85 }(以下是 SearchFox 等效项:SearchFox 查询)。

尝试为要移除的每个向后兼容代码提交一个具体的 Bug(您也可以提交更广泛的 Bug,例如,如果您要移除一个特性)。这些 Bug 应该阻塞一个 META Bug,该 Bug 将引用所有清理操作。您可以检查主清理 META Bug (Bug 1677944) 中是否已存在 Bug,如果不存在,您可以通过访问 此 Bugzilla 链接 创建它(确保将 YY 替换为等于当前版本号减 2 的版本号;因此,如果当前版本是 87,则 YY 为 87 - 2 = 85)。

远程调试冒烟测试

设置

我们将运行两次远程调试冒烟测试。一次是为了练习向后兼容性,一次是不使用向后兼容性(相同版本)。两种情况下要运行的测试都是相同的(请参阅测试部分)。

您可以使用 Firefox 的桌面版或移动版作为服务器。移动版更可取,因为某些代码路径特定于 Firefox 移动版,但如果您无法访问 Android 设备,使用桌面服务器也是一个不错的替代方案。

  • 说明 如何为 Firefox 移动版设置远程调试。

  • 说明 如何为 Firefox 桌面版设置远程调试。

向后兼容性测试

相同版本测试

测试

基本连接:

  • 在客户端 Firefox Nightly 中,打开 about:debugging

  • 连接到服务器(通过网络或 USB)

  • 打开相应的运行时页面

调试目标:

  • 在服务器 Firefox 中,打开一个标签页到 https://mdn.github.io/dom-examples/service-worker/simple-service-worker/

  • 在客户端 Firefox 中,在服务器 Firefox 的运行时页面中检查您是否可以看到新标签页以及相应的服务工作线程

  • 在客户端 Firefox 中,通过单击“性能分析”按钮打开性能分析器,然后单击“开始”和“停止”按钮记录一个简短的性能分析。验证性能分析器是否打开一个带有录制内容的新标签页。

  • 在服务器 Firefox 中,关闭您刚刚打开的标签页

  • 在客户端 Firefox 中,检查相应的标签页是否已移除

  • 在客户端 Firefox 中,注销服务工作线程,检查相应的服务工作线程是否已从列表中移除

检查远程目标:

  • 在服务器 Firefox 中,打开一个标签页到 https://juliandescottes.github.io/webcomponents-playground/debugger-example/

  • 在客户端 Firefox 中,单击此标签页的“检查”。检查工具箱是否打开。现在我们将验证工具箱是否正常工作。

  • 打开检查器,检查是否有空白面板。检查在标记视图中选择其他元素是否会更新计算视图。

  • 打开控制台,检查您是否看到了“脚本加载”消息。在控制台中键入“1+1”,检查您是否得到了“2”。

  • 打开调试器,检查您是否可以看到 script.js 源代码。打开它,在 clickMe() 方法(第 6 行)中设置断点。在服务器 Firefox 中,单击页面上的按钮,检查您是否命中了断点。

  • 打开网络选项卡。如果它是空的并提示您“执行请求…”,请在服务器 Firefox 中重新加载页面。检查请求是否显示。

检查远程扩展:

  • 在服务器 Firefox 中,安装任何扩展(例如 https://addons.mozilla.org/en-US/firefox/addon/devtools-highlighter/

  • 在客户端 Firefox 中,检查扩展程序是否显示在“扩展程序”类别中

  • 单击“检查”,检查工具箱是否打开。

  • 检查检查器、控制台、调试器和网络监视器的 UI 是否有空白面板。

移除过期或更新遥测探针

所有过期的探针都会自动提交 Bug。您可以使用 此 Bugzilla 查询 找到它们。

我们应该审查 Bug 列表,并确保它们中的每一个都阻塞以下 META Bug

审查探针意味着要么更新过期字段,因为我们仍在监控数据,要么移除探针和所有相关的记录代码。此讨论可以在 Bug 中进行。

检查是否应该更新第三方库

这不是每个循环都必须执行的任务,但拥有最新的库可以帮助我们获得新功能,最重要的是可以修复 Bug,从而改善 DevTools 用户的体验。

WasmDis 和 WasmParser

这些模块由调试器使用,以便能够解析和调试 WASM 源代码。

遵循 升级文档

jsbeautify

此模块由检查器和 Web 控制台使用,用于美化用户输入。

遵循 升级文档

CodeMirror 应该更新

CodeMirror 用于我们的源代码编辑器组件,该组件在整个 DevTools 中使用。

遵循 文档中的升级部分

fluent-react

此模块用于多个面板,以管理 React 应用程序中的本地化。

遵循 升级文档

reselect

遵循 升级文档

pretty-fast

待办事项

检查 xpcshell 调试

检查是否可以使用 --jsdebugger 选项调试 xpcshell 测试。

  1. 使用 ./mach runmozilla-central 运行 Firefox

  2. 打开一个 about:debugging 标签页

  3. 如果左侧边栏上没有 localhost:6000 项,请单击 Setup

  4. 在设置中,在 Network Location 下添加一个新的 localhost:6000

  5. 从您的 mozilla-central 文件夹中,使用 --jsdebugger 选项运行 xpcshell 测试(例如 ./mach test devtools/server/tests/xpcshell/test_front_destroy.js --jsdebugger

  6. 在终端中,您应该会看到以下消息:Waiting for the debugger to connect on port 6000

  7. 返回 about:debugging 选项卡,点击 localhost:6000 旁边的 Connect 按钮,然后再次点击 localhost:6000 项目。

  8. 在新屏幕中,在 Processes 部分,应该有一个 Multiprocess Toolbox 项目,旁边有一个 Inspect 按钮。点击该按钮。

  9. 这将打开一个 about:devtools-toolbox 选项卡,显示测试文件,并在第一行可中断处暂停。

  10. 确保您可以在测试中添加断点,并且可以进行单步执行/恢复执行。