Debug Excel Add-In using VS Code without MicrosoftEdgeWebView2 installed

Question

I'm trying to migrate my dev env to VSCode and so far I can't get it to work if I have MicrosoftEdgeWebView2 installed.

I've installed the "Microsoft Office Add-in Debugger" which I think is what I need to use. It shows deprecated/abandonded but its also the top result in Google for debugging Add-Ins by MSFT... https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-with-vs-extension

Here is my tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Debug: Excel Desktop",
      "type": "npm",
      "script": "start:desktop -- --app excel",
      "presentation": {
        "clear": true,
        "panel": "dedicated",
      },
      "problemMatcher": []
    },
    {
      "label": "Stop Debug",
      "type": "npm",
      "script": "stop",
      "presentation": {
        "clear": true,
        "panel": "shared",
        "showReuseMessage": false
      },
      "problemMatcher": []
    },
  ]
}

and launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Excel Desktop (Edge Chromium)",
      "type": "msedge",
      "request": "attach",
      "port": 9229,
      "timeout": 600000,
      "webRoot": "${workspaceRoot}",
      "preLaunchTask": "Debug: Excel Desktop",
      "postDebugTask": "Stop Debug"
    },
    {
      //https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-desktop-using-edge-chromium#appendix-b
      "name": "Excel PWA Desktop (Edge Chromium)",
      "type": "pwa-msedge",
      "request": "attach",
      "useWebView": true,
      "port": 9229,
      "timeout": 600000,
      "webRoot": "${workspaceRoot}",
      "preLaunchTask": "Debug: Excel Desktop",
      "postDebugTask": "Stop Debug"
   },
    {
      "name": "Excel Desktop (Edge Legacy)",
      "type": "office-addin",
      "request": "attach",
      "url": "https://localhost:3000/index.html?_host_Info=Excel$Win32$16.01$en-US$$$$0",
      "port": 9229,
      "timeout": 600000,
      "webRoot": "${workspaceRoot}",
      "preLaunchTask": "Debug: Excel Desktop",
      "postDebugTask": "Stop Debug"
    },
  ]
}

Note: Often online they show port 9222 but I found that at least when I switched to 9229 it didn't start saying Edge Instance: [] repeatedly, but didn't work, I've tried both.

Also note, I've switched to index.html, but that shouldn't matter as long as its correct..

I've tried all variations of the below on both ports:

npx office-addin-dev-settings webview .\manifest.xml edge
npx office-addin-dev-settings webview .\manifest.xml edge-chromium
npx office-addin-dev-settings webview .\manifest.xml edge-legacy
npx office-addin-dev-settings webview .\manifest.xml ie
npx office-addin-dev-settings webview .\manifest.xml default

Any ideas how to debug an Excel Office-JS Add-In without having MicrosoftEdgeWebView2 installed?

I did get it to work w/ my manifest when I had MicrosoftEdgeWebView2 installed so I know my manifest/webserver etc is working and setup correctly.

Answer 1

Well, in essence, when I uninstall MicrosoftEdgeWebView2 it forces the app to use IE as the rendering engine.

There isn't any official VSCode Extension for debugging IE.

The best I could get was automatically opening F12 or IEChooser.exe after launching Excel/Webserver etc.

https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-tools-ie