Firefox 主页 (新标签页)¶

与 Firefox 主页相关的所有文件（包括出现在 about:home 和 about:newtab 上的内容）都可以在 browser/components/newtab 目录中找到。其中一些源文件（例如 .js、.jsx 和 .scss）需要额外的构建步骤。我们正在努力将其迁移到与 mach 一起使用，但在此期间，如果您需要在此目录中进行更改，请按照以下步骤操作

对于 `.sys.mjs` 文件（系统模块）¶

无需构建步骤。使用 mach 并根据您的常规 Firefox 工作流程运行 mochitests。

对于 `.js`、`.jsx`、`.scss` 或 `.css` 文件¶

先决条件¶

您将需要以下内容

Node.js 10+（在 Mac 上，安装 Node.js 的最佳方法是使用 Node.js 主页上的安装链接）
npm（与 Node.js 打包在一起）

要安装依赖项，请从 mozilla-central 存储库的根目录运行以下命令。（使用 mach 调用 npm 和 node 命令将确保您使用的是 Node 和 npm 的正确版本。）

(cd browser/components/newtab && ../../../mach npm install)

您应该编辑哪些文件？¶

您不应更改 browser/components/newtab/css 或 browser/components/newtab/data 目录中的 .js 或 .css 文件。相反，您应该编辑 browser/components/newtab/content-src 目录中的 .jsx、.js 和 .scss 源文件。这些文件将编译成 .js 和 .css 文件。

构建资产和运行 Firefox¶

要构建资产并运行 Firefox，请从 mozilla-central 存储库的根目录运行以下命令

./mach npm run bundle --prefix=browser/components/newtab && ./mach build && ./mach run

持续开发/调试¶

运行 ./mach npm run watchmc --prefix=browser/components/newtab 将启动一个进程，该进程监视 activity-stream 中的文件，并在 JS 或 CSS 文件更改时重新构建捆绑文件。

**重要说明**：此任务将添加内联源映射以帮助调试，这会更改内存占用。不要将 watchmc 任务用于分析或性能测试！

运行测试¶

大多数新标签页/消息传递单元测试使用 mocha 编写，并且可能在那里显示的其他错误是 SCSS 问题，由 stylelint 标记。这些都在 Treeherder/Try 中的 newtab slug 下使用 npm test 运行，因此如果该 slug 变为红色，则这些测试就是失败的测试。要执行它们，请执行以下操作

./mach npm test --prefix=browser/components/newtab

这些测试目前没有由 mach test 运行，但有一个任务提交来修复此问题。

Windows 目前不受 npm test 支持（路径/调用差异）。要运行不受 mach lint 和 mach test 涵盖的新标签页特定测试

./mach npm run lint:stylelint --prefix=browser/components/newtab
./mach npm run testmc:build --prefix=browser/components/newtab
./mach npm run testmc:unit --prefix=browser/components/newtab

Mochitests 和 xpcshell 测试照常运行，使用 mach test。

代码覆盖率¶

我们的测试设置除了运行单元测试外，还将运行代码覆盖率工具。如果代码覆盖率指标不满足某些阈值，它将出错。

如果您看到任何缺少的测试覆盖率，您可以通过运行以下命令检查覆盖率报告

./mach npm test --prefix=browser/components/newtab &&
./mach npm run debugcoverage --prefix=browser/components/newtab

Discovery Stream 开发者工具¶

您可以通过访问 about:config 并将 browser.newtabpage.activity-stream.asrouter.devtoolsEnabled 设置为 true 来访问 about:newtab 的 Discovery Stream 组件的开发者工具。

然后，转到任何 about:newtab 页面，然后单击右上角的扳手图标。