添加新文件 - 各种 DevTools 资源类型¶
此页面列出了各种 DevTools 资源类型以及如何创建和加载它们。
JavaScript 模块¶
构建配置¶
JavaScript 模块由我们的构建系统使用 moz.build 文件安装。如果添加新的 JavaScript 模块，则需要更新（或添加）其中一个文件，以使构建系统了解新模块。请参阅以下示例。
moz.build 文件必须与要安装的文件位于同一目录中。不要在父目录的 moz.build 中列出子目录中的文件。
按照这些步骤可以确保 require() 和 resource:// 路径直接映射到源代码树中的位置，而不是完全任意。
示例
文件：
/devtools/server/actors/layout.js在
/devtools/server/actors/moz.build中
DevToolsModules(
'layout.js'
)
require()¶
大多数 DevTools JS 代码采用 CommonJS 模块的形式，并使用 require() 加载。
要 require() 一个文件，模块 ID 正是其源代码树路径。
示例
文件：
/devtools/server/actors/layout.js用法（在大多数情况下优先使用延迟加载）
loader.lazyRequireGetter(this, "layout", "devtools/server/actors/layout")require("devtools/server/actors/layout")
ChromeUtils.import()¶
一些较旧的 DevTools JS 模块使用 Gecko JavaScript 代码模块格式，文件扩展名为 .jsm。我们正在尝试放弃这种格式，因此您不太可能添加新的格式，但您可能需要在代码中导入现有的格式。
这些模块使用 ChromeUtils.import() 加载。要 import() 一个文件，您需要提供一个 resource:// URL，该 URL 正是源代码树路径。
详细说明
/devtools/client/<X>: resource://devtools/client/<X>/devtools/server/<X>: resource://devtools/server/<X>/devtools/shared/<X>: resource://devtools/shared/<X>
示例
文件：
/devtools/shared/loader/Loader.sys.mjs用法
const { loader } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs")
示例
文件：
/toolkit/mozapps/extensions/AddonManager.jsm用法（在大多数情况下优先使用延迟加载）
const lazy = {}; ChromeUtils.defineModuleGetter(lazy, "AddonManager", "resource://gre/modules/AddonManager.jsm")const { AddonManager } = ChromeUtils.import("resource://gre/modules/AddonManager.jsm")
Chrome 内容¶
DevTools 前端/UI 的大部分内容目前使用 chrome:// URL 加载，这些 URL 允许这些文件拥有对平台内部的权限访问。
这通常用于在 UI 中加载 XUL、HTML 和 JS 文件。
注意：“Chrome”在这里指的是“浏览器 Chrome”，也就是 UI，与“Chrome”作为浏览器的名称无关。我们希望在 DevTools 上放弃这种做法，并更像普通的网站，但目前大多数工具仍在使用 chrome:// URL。
打包¶
如果添加了一个应通过 chrome:// URL 加载的新文件，则需要更新 /devtools/client/jar.mn 中的清单文件，以便正确打包。
请确保添加所有新文件，使其完整的源代码树路径成为 URL 的一部分。为此，jar.mn 条目应如下所示
content/<X> (<X>)
其中 <X> 是删除 /devtools/client/ 前缀后文件的路径。
示例
文件：
/devtools/client/webaudioeditor/models.js条目：
content/webaudioeditor/models.js (webaudioeditor/models.js)
用法¶
Chrome 内容 URL 与其源代码树路径几乎相同，但有一点不同：段 client 被替换为 content。这是 chrome:// 协议处理程序的要求。
示例
文件：
/devtools/client/webaudioeditor/models.js用法：chrome://devtools/content/webaudioeditor/models.js
对于单个工具中的文件，请考虑使用相对 URL。它们更短！
Chrome 主题¶
与上面的 Chrome 内容部分类似，我们还在 DevTools UI 中使用 Chrome 主题（或 skin URL）。这些通常用于加载 CSS 和图像。
打包¶
如果添加了一个应通过 chrome:// 加载的新文件（例如工具 UI 的新 CSS 文件），则需要更新 /devtools/client/jar.mn 中的清单文件，以便正确打包。
请确保添加所有新文件，使其完整的源代码树路径成为 URL 的一部分。为此，jar.mn 条目应如下所示
skin/<X> (themes/<X>)
其中 <X> 是删除 /devtools/client/themes/ 前缀后文件的路径。
示例
文件：
/devtools/client/themes/images/add.svg条目：
skin/images/add.svg (themes/images/add.svg)
用法¶
Chrome 主题 URL 与其源代码树路径几乎相同，但有一点不同：段 client/themes 被替换为 skin。这是 chrome:// 协议处理程序的要求。
示例
文件：
/devtools/client/themes/images/add.svg用法：
chrome://devtools/skin/images/add.svg
本地化 (l10n)¶
与上面其他 Chrome 部分类似，我们还在 DevTools UI 中使用 locale URL 加载本地化字符串。此部分适用于 *.dtd（用于作为 XUL/XHTML 文件中的实体）和 *.properties（用于通过运行时 API）文件。
我们目前有两组本地化文件
devtools/client/locales：DevTools 客户端（前端 UI）中使用的字符串devtools/shared/locales：仅在 DevTools 服务器中使用或与客户端和服务器共享的字符串
打包¶
如果添加新的 l10n 文件（例如新的 *.dtd 或 *.properties 文件），则无需执行其他打包步骤，假设新文件放置在上面提到的两个目录之一中。每个目录都包含一个 jar.mn，默认情况下，该文件使用通配符打包目录中的所有文件。
用法¶
Locale URL 根据它们是在 client 还是 shared 中有所不同。虽然我们希望它们与源代码树路径匹配，但 chrome:// 协议的要求使得这难以实现。
示例
文件：
/devtools/client/locales/en-US/debugger.dtd用法：
chrome://devtools/locale/debugger.dtd
示例
文件：
/devtools/shared/locales/en-US/screenshot.properties用法：
chrome://devtools-shared/locale/screenshot.properties
指南¶
本地化文件应遵循一套旨在简化人员翻译这些文件中标签的指南，以多种语言翻译。
特别是，为新密钥编写自解释的注释、删除未使用的密钥、在更改字符串含义时更改密钥名称等非常重要。因此，如果您必须在补丁中修改本地化文件，请务必通读这些指南。