通过

在 Internet Explorer 中使用开发人员工具调试加载项

  • 项目

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

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

若要确定计算机上正在使用哪个浏览器或 Web 视图，请参阅 Office 外接程序使用的浏览器和 Web 视图控件。

提示

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

注意

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

使用 F12 工具调试任务窗格加载项

Windows 10 和 11 包含名为“F12”的 Web 开发工具，因为它最初是通过在 Internet Explorer 中按 F12 启动的。 F12 现在是一个独立的应用程序，用于在 Internet Explorer Webview 控件 Trident 中运行时调试加载项。 该应用程序在早期版本的 Windows 中不可用。

注意

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

以下步骤是调试加载项的说明。 如果只想测试 F12 工具本身，请参阅 测试 F12 工具的示例加载项。

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

  2. 启动与 Office 版本对应的 F12 开发工具。

    • 对于 32 位版 Office，请使用 C:\Windows\System32\F12\IEChooser.exe
    • 对于 64 位版 Office，请使用 C:\Windows\SysWOW64\F12\IEChooser.exe

    IEChooser 随即打开，窗口名为 “选择要调试的目标”。 外接程序将显示在外接程序主页的文件名命名的窗口中。 在以下屏幕截图中，它是 Home.html。 仅显示 Internet Explorer 或 Trident 中运行的进程。 该工具无法附加到在其他浏览器或 Web 视图中运行的进程，包括 Microsoft Edge。

    IEChooser 屏幕，其中列出了多个 Internet Explorer 和 Trident 进程。其中一个命名为 Home.html。

  3. 选择加载项的过程;即其主页文件名。 此操作会将 F12 工具附加到进程并打开主 F12 用户界面。

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

  5. 在选项卡左上角的调试器工具功能区正下方，有一个小文件夹图标。 选择此选项可打开加载项中文件的下拉列表。 示例如下。

    调试器选项卡的左上角，其中打开了文件夹下拉列表和文件列表。

  6. 选择要调试的文件，它将在 脚本 中打开， (“调试器 ”选项卡的左侧) 窗格中打开。如果使用的是更改文件名的转译器、捆绑程序或微型文件，它将具有实际加载的最终名称，而不是原始源文件名称。

  7. 滚动到要在其中设置断点的行，然后单击行号左侧的边距。 你将看到该行左侧有一个红点，右下窗格的“ 断点 ”选项卡中会显示相应的行。 例如，下面的屏幕截图。

    home.js 文件中具有断点的调试器。

  8. 根据需要在加载项中执行函数以触发断点。 命中断点时，断点的红点上会显示一个向右箭头。 例如，下面的屏幕截图。

    包含触发的断点结果的调试器。

提示

有关使用 F12 工具的详细信息，请参阅 使用调试器检查正在运行的 JavaScript。

用于测试 F12 工具的示例加载项

此示例使用 Word 和从 AppSource 获取的免费加载项。

  1. 打开 Word 并选择空白文档。
  2. 选择“ 主页>加载项”，然后选择“ 获取外接程序”。
  3. 在 “Office 加载项 ”对话框中，选择“ STORE ”选项卡。
  4. 选择 QR4Office 加载项。 它将在任务窗格中打开。
  5. 如上一部分所述，启动与 Office 版本对应的 F12 开发工具。
  6. 在 F12 窗口中，选择“ Home.html”。
  7. 在“ 调试器 ”选项卡中， 打开文件Home.js ，如上一部分所述。
  8. 设置第 310 行和第 312 行的断点。
  9. 在加载项中，选择“ 插入 ”按钮。 命中一个或另一个断点。

调试加载项中的对话框

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

  1. 运行加载项和工具。
  2. 打开对话框，然后选择工具中的“ 刷新 ”按钮。 显示对话过程。 其名称是在对话框中打开的文件的文件名。
  3. 选择过程以打开它并调试，如 使用 F12 工具调试任务窗格加载项部分中所述。

切换到 Trident Webview

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

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

通过命令行切换

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

注意

用于强制更改 Webview 的工具仅在 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

    npx office-addin-dev-settings webview manifest.json edge-legacy

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

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

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

安装使用 Internet Explorer 的 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 该命令。 （可选）重新启用自动更新。

另请参阅