如何使用 vscode 调试 Microsoft Word Web 插件？

Question

Visual Studio 有一个用于 Word Web 加载项的模板。单击“开始”会打开加载了加载项的 Word，并允许在 IDE 中立即调试前端 javascript。

Word 正在 ie11 中运行加载项。

对于这个项目，我发现的唯一选项是使用位于 C:\Windows\SysWOW64\F12\IEChooser.exe（或 System32）中的“f12”调试器进行调试。

我安装了最新版本的 Windows 以访问新的 Windows 终端。此更新还将 Word 加载项切换为在 edge 中加载，而不是在 ie11 中加载，这需要新的 Microsoft Edge 开发人员工具。

我想通过 IDE 而不是 f12/edge 开发人员工具访问 Visual Studio 提供的用于调试前端代码的功能。我无法了解 Visual Studio 如何允许此调试，因为所有属性都隐藏为 .sln 和 web.config 等中的设置。

有没有办法用 Visual Studio/vscode（最好是 vscode）来调试这个插件？

Answer 1

您可以通过多种方式使用 VSCode 进行调试，但所有调试方法都依赖于外部浏览器，例如 chrome、IE、edge 调试器。我相信您不想在 VSCode 中执行此操作。

这个方法会在某种程度上帮助你。但我相信你可以做到这一点。

步骤 1. 使用 Yeoman 生成器创建一个 word web 插件。官方链接如下

https://docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/word-quickstart?tabs=yeomangenerator

他们使用 nodejs，你可以选择 Angular / React / JS 来构建你的插件。

优点是它可以让您灵活地在任何 IDE 中进行调试。

警告：正如我上面所说，您可以借助网络技术轻松构建插件。

第 2 步：调试：您可以使用 VSCODE 调试功能或使用浏览器

第 3 步：如果您选择浏览器： 转到源 > 选择 Webpack > 选择 .ts 或 /js 文件并设置断点。下面的屏幕截图供您参考。

注意：我已从 office generator 中选择 Angular 来构建插件。然后就可以在sources下看到webpack了。我相信这对于任何技术都是一样的。

希望这会对您有所帮助。