Yeoman生成的全新Excel Add-In在VS Code中无法命中断点及查看变量

初始问题 #

我正尝试在VS Code中调试Excel Office Add-In，此前仅能看到“Call Stack”，耗费大量时间后，下载了全新的yo office模板进行对比测试。
已全局安装office-addin-debugging和webpack，现在可以启动webpack服务器、打开Excel、启动基于JavaScript的Excel任务窗格Add-In并点击运行按钮。
但在VS Code中，添加到commands.js的断点无法命中，watch面板也看不到任何变量，这与我自己的项目表现一致——主项目仅使用http-server，webpack仅用于打包和polyfill等操作。

核心疑问：

• 能否直接调试yo office生成的初始模板？还需配置哪些内容？
• 我的项目是否需要使用webpack dev server？我知道它有热重载功能，但不想调试打包后的代码，只想直接调试源代码。

环境信息：Windows 10系统，VS Code和NodeJS均为最新版本（测试期间重新安装过NodeJS），遵循官方文档使用Edge Chromium调试。

更新：断点可命中但变量显示undefined #

我发现了两处错误：

• 必须以VS Code管理员模式启动
• 之前编辑的commands.js未被模板加载，需改为编辑**taskpane.js**

现在能命中断点，但声明并添加到watch的变量显示为undefined，请问这是什么原因？

进一步更新：本地文件与服务器文件不同步问题 #

• 无需使用Webpack即可调试，且这是目前唯一能在VS Code中查看变量的方式
  我通过以下命令启动Web服务器：

"webserver:https:src": "http-server ./src/ -S -C %USERPROFILE%/.office-addin-dev-certs/localhost.crt -K %USERPROFILE%/.office-addin-dev-certs/localhost.key --cors . -p 3000",

我发现本地编辑的commands.js不生效，但点击调试控制台中的commands.js时，可编辑Web服务器上托管的文件（文件URL为http://localhost...而非src/...）。这意味着我需要先加载Excel、打开任务窗格、打开Web服务器上的文件、插入断点后重新加载。
我曾在DevTools中设置根文件夹实现本地文件同步，但下次打开Excel/DevTools时该选项消失，同步也失效了。

最后疑问：是否需要由VS Code启动Web服务器？我目前在另一个终端单独运行它。

1. 直接调试yo office初始模板的配置要求 #

可以直接调试，除了你已经发现的管理员模式启动VS Code和**编辑正确的文件（taskpane.js而非未被加载的commands.js）**之外，还需要确保：

• 确认.vscode/launch.json配置正确，指向本地源代码而非打包后的文件。默认yo office生成的launch.json已配置源映射，但如果修改过webpack配置，要保证devtool设置为source-map或inline-source-map，让VS Code能关联打包代码和本地源码。
• 启动调试前，确保webpack dev server（或你用的http-server）已运行，且Office Add-In已正确加载到Excel中。

2. 是否需要webpack dev server？ #

不需要强制使用。如果你只想调试源代码，用http-server托管src目录完全可行。webpack dev server的核心优势是热重载和自动打包，若不需要这些功能，直接托管源码更贴合你的需求。

3. 变量显示undefined的原因 #

• 作用域不匹配：添加到watch的变量可能不在当前断点的作用域内。比如断点在函数外部，但变量是函数内部声明的，此时watch会显示undefined。确认断点位置和变量的作用域一致。
• 源映射问题：如果使用了webpack，即使调试源码，源映射出错也会导致VS Code无法正确识别变量。检查webpack配置中的devtool是否正确设置，确保生成的source map能准确关联本地源码。
• 变量未初始化：如果变量声明后还未赋值就触发了断点，自然会显示undefined。确认断点触发时机在变量赋值之后。

4. 本地文件与服务器文件不同步+Web服务器启动方式问题 #

• 不需要必须由VS Code启动Web服务器，单独终端运行完全没问题。解决文件同步问题可以试试：
  • 在VS Code的调试配置（launch.json）中添加pathMapping，将服务器上的文件路径映射到本地src目录。示例配置：

    "pathMapping": {
      "http://localhost:3000/": "${workspaceFolder}/src"
    }
    

  • 用http-server时，添加-c-1参数禁用缓存，避免本地修改不生效：

    http-server ./src/ -S -C %USERPROFILE%/.office-addin-dev-certs/localhost.crt -K %USERPROFILE%/.office-addin-dev-certs/localhost.key --cors . -p 3000 -c-1
    

  • DevTools中设置的根文件夹同步会随Excel关闭重置，建议直接使用VS Code的调试器关联，而非依赖DevTools的同步功能。

内容的提问来源于stack exchange，提问作者FreeSoftwareServers