在 Microsoft Edge 旧版 中使用开发人员工具调试加载项

  • 项目

本文介绍如何在满足以下条件时调试外接程序 (JavaScript 或 TypeScript) 客户端代码。

  • 不能或不希望使用 IDE 中内置的工具进行调试;或者遇到仅当加载项在 IDE 外部运行时出现的问题。
  • 计算机使用 Windows 和 Office 版本的组合，这些版本使用原始 Edge Webview 控件 EdgeHTML。

提示

有关在 Visual Studio Code 中使用 Edge 旧版进行调试的信息，请参阅适用于 Visual Studio Code 的 Microsoft Office 外接程序调试器扩展。

若要确定使用的浏览器或 Web 视图，请参阅 Office 加载项使用的浏览器和 Web 视图控件。

提示

在 Office 的最新版本中，标识 Office 正在使用的 Web 视图控件的一种方法是通过任何加载项上的 个性菜单 （如果有）。 (Outlook 中不支持“个性”菜单。) 打开菜单并选择“ 安全信息”。 在 Windows 上的“安全信息”对话框中，运行时报告 Microsoft Edge、Microsoft Edge 旧版或 Internet Explorer。 旧版 Office 中的对话框中不包含运行时。

注意

若要安装使用 Edge 旧版 Web 视图的 Office 版本或强制当前版本的 Office 使用旧版 Edge，请参阅 切换到 Edge 旧版 Web 视图。

使用 Microsoft Edge DevTools 预览版调试任务窗格加载项

  1. 安装 Microsoft Edge DevTools 预览版。 (出于历史原因，名称中显示“预览”一词。没有较新的版本。)

    注意

    如果外接程序具有执行函数的 外接程序命令 ，则函数在 Microsoft Edge DevTools 无法检测或附加到的隐藏浏览器运行时进程中运行，因此本文中所述的技术不能用于调试函数中的代码。

  2. 旁加载 并运行加载项。

  3. 运行 Microsoft Edge 开发人员工具。

  4. 在工具中，打开“本地”选项卡。加载项将按其名称列出。 (只有 EdgeHTML 中运行的进程才会显示在选项卡上。该工具无法附加到在其他浏览器或 Web 视图中运行的进程，包括 Microsoft Edge (WebView2) 和 Internet Explorer (Trident) .)

    显示名为 legacy-edge-debugging 的进程的 Edge DevTools。

  5. 选择加载项名称以在工具中打开它。

  6. 打开“调试器”选项卡。

  7. 使用以下步骤打开要调试的文件。

    1. 在调试器任务栏上，选择“在文件中显示查找”。 这将打开搜索窗口。
    2. 在搜索框中输入要调试的文件中的代码行。 它应该是任何其他文件中不太可能出现的内容。
    3. 选择“刷新”按钮。
    4. 在搜索结果中，选择行以在搜索结果上方的窗格中打开代码文件。

    Edge DevTools 调试选项卡，其中 4 个部分标记为 A 到 D。

  8. 若要设置断点，请选择代码文件中的行。 断点在 “调用堆栈 ”中注册， (右下角) 窗格中。 代码文件中的 行也可能有一个红点，但这并不可靠。

  9. 根据需要在加载项中执行函数以触发断点。

提示

有关使用这些工具的详细信息，请参阅 Microsoft Edge (EdgeHTML) Developer Tools。

调试加载项中的对话框

如果外接程序使用 Office 对话框 API，则对话在任务窗格的单独进程中运行， (是否有任何) 和工具必须附加到该进程。 请按照以下步骤操作。

  1. 运行加载项和工具。

  2. 打开对话框，然后选择工具中的“ 刷新 ”按钮。 显示对话过程。 其名称来自 <title> 在对话框中打开的 HTML 文件中的 元素。

  3. 选择过程以打开它并调试，如 使用 Microsoft Edge DevTools 预览调试任务窗格加载项部分中所述。

    显示名为“我的对话框”的进程的 Edge DevTools。

切换到 Edge 旧版 Web 视图

有两种方法可以切换旧版 Edge Web 视图。 可以在命令提示符下运行简单的命令，也可以安装默认情况下使用旧版 Edge 的 Office。 建议使用第一种方法。 但在以下方案中，应使用第二个 。

  • 你的项目是使用 Visual Studio 和 IIS 开发的。 它不是基于 Node.js。
  • 你希望在测试中绝对可靠。
  • 如果出于任何原因，命令行工具不起作用。

通过命令行切换

如果你的项目是基于 Node.js (即不是使用 Visual Studio 和 Internet Information server (IIS) ) 开发的，则可以强制 Windows 上的 Office 使用由 Edge 旧版提供的 EdgeHTML Webview 控件或 Internet Explorer 提供的 Trident Webview 控件来运行加载项，即使你的 Windows 和 Office 版本组合通常使用更新的 Web 视图也是如此。 有关 Windows 和 Office 版本的各种组合使用哪些浏览器和 Web 视图的详细信息，请参阅 Office 外接程序使用的浏览器和 Web 视图控件。

注意

用于强制更改 Web 视图的工具仅在 Microsoft 365 的 Beta 订阅通道中受支持。 加入 Microsoft 365 预览体验计划 ，然后选择 “Beta 频道 ”选项以访问 Office Beta 版本。 另请参阅 关于 Office：我使用的是哪个版本的 Office？。

严格来说， webview 此工具的开关 (请参阅需要 Beta 通道 的步骤 2) 。 该工具具有没有此要求的其他开关。

  1. 如果项目 不是 使用 Office 外接程序工具的 Yeoman 生成器 创建的，则需要安装 office-addin-dev-settings 工具。 在命令提示符下运行以下命令。

    npm install office-addin-dev-settings --save-dev

    重要

    Mac 不支持 office-addin-dev-settings 工具。

  2. 在项目的根目录中的命令提示符中，通过以下命令指定希望 Office 使用的 Web 视图。 将 替换为 <path-to-manifest> 相对路径，如果它位于项目的根目录中，则只是清单文件名。 ie将 替换为 <webview> 或 edge-legacy。 请注意，这些选项以源自 Web 视图的浏览器命名。 选项 ie 表示“Trident”， edge-legacy 选项表示“EdgeHTML”。

    npx office-addin-dev-settings webview <path-to-manifest> <webview>

    示例如下。

    npx office-addin-dev-settings webview manifest.xml ie

    应在命令行中看到一条消息，指出 Web 视图类型现在设置为 IE (或 Edge 旧版) 。

  3. 完成后，使用以下命令将 Office 设置为继续使用 Windows 和 Office 版本组合的默认 Web 视图。

    npx office-addin-dev-settings webview <path-to-manifest> default

安装使用旧版 Edge 的 Office

使用以下过程安装从 Microsoft 365 订阅) (下载的 Office (版本，该版本使用 Microsoft Edge 旧版 webview (EdgeHTML) 来运行加载项，或使用 Internet Explorer (Trident) 的版本。

  1. 在任何 Office 应用程序中，打开功能区上的“ 文件 ”选项卡，然后选择“ Office 帐户 ”或“ 帐户”。 选择“关于主机名”按钮 (例如“关于Word) ”。

  2. 在打开的对话框中，找到完整的 xx.x.xxxxx.xxxxx 内部版本号，并在某个位置复制它。

  3. 下载 Office 部署工具。

  4. 运行下载的文件以提取该工具。 系统会提示你选择工具的安装位置。

  5. 在安装该工具的文件夹中， setup.exe (文件所在的文件夹) ，创建一个名称 config.xml 为 的文本文件，并添加以下内容。

    <Configuration>
  <Add OfficeClientEdition="64" Channel="SemiAnnual" Version="16.0.xxxxx.xxxxx">
    <Product ID="O365ProPlusRetail">
      <Language ID="en-us" />
    </Product>
  </Add>
</Configuration>

  6. Version更改值。

    • 若要安装使用 EdgeHTML 的版本，请将其更改为 16.0.11929.20946。
    • 若要安装使用 Trident 的版本，请将其更改为 16.0.10730.20348。

  7. （可选）将 的值 OfficeClientEdition 更改为 "32" 以安装 32 位 Office，并根据需要更改 Language ID 值以使用其他语言安装 Office。

  8. 以管理员身份打开命令提示符。

  9. 导航到包含 setup.exe 和 config.xml 文件的文件夹。

  10. 运行以下命令：

    setup.exe /configure config.xml

    此命令安装 Office。 这个过程可能需要几分钟。

  11. 清除 Office 缓存。

重要

安装后，请确保关闭 Office 的自动更新，以便在完成使用之前，Office 不会更新到不使用想要使用的 Web 视图的版本。 这可以在安装后的几分钟内发生。 请按照以下步骤操作。

  1. 启动任何 Office 应用程序并打开新文档。
  2. 打开功能区上的“ 文件 ”选项卡，然后选择“ Office 帐户 ”或“ 帐户”。
  3. 在“产品信息”列中，选择“更新选项”，然后选择“禁用汇报”。 如果该选项不可用，则 Office 已配置为不自动更新。

使用完旧版 Office 后，请通过编辑 config.xml 文件并将 更改为 Version 之前复制的内部版本号来重新安装较新版本。 然后在管理员命令提示符下重复 setup.exe /configure config.xml 该命令。 （可选）重新启用自动更新。