ECONNREFUSED 127.0.0.1:9222 when trying to run Microsoft Office Add-In Debugger - visual-studio-code

Question

When attempting to run the debugger for the Microsoft Office Add-In Debugger extension for VS Code, I get this error when clicking the 'Play' button:
I have seen this question asked multiple times before for Chrome, but nothing specifically for Microsoft Office Add-Ins.
I have tried:
Restarting VS Code and restarting my machine
Running netstat -an | find /i "listening" to view which ports are listening on my machine, and tried replacing port 9222 with each of these ports for the "port" value in launch.json
Tried updating the port key to target port 4200, (the port which my application is hosted on, https://localhost:4200)
Verifying that the webRoot is the correct path.
Removing the port key in launch.json entirely
For reference, I am running this web add-in in Outlook native on Windows 10 version 1903.
From what I can tell, my launch.json seems okay:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html",
"type": "office-addin",
"request": "launch",
"file": "${workspaceRoot}/index.html",
"browserTarget": "Edge"
},
{
"name": "Launch localhost with sourcemaps",
"type": "office-addin",
"request": "launch",
"url": "http://localhost/mypage.html",
"sourceMaps": true,
"webRoot": "wwwroot",
"webviewTarget": "Edge"
},
{
"type": "office-addin",
"request": "attach",
"name": "Attach to Office Add-ins",
"port": 53483,
"trace": "verbose",
"url": "https://localhost:4200/index.html?_host_Info=Outlook$Win32$16.01$en-US$$$$0",
"webRoot": "${workspaceFolder}/app",
"timeout": 45000
}
]
}
I've walked through the documentation here several times but no luck. Does anyone have any idea on how to get around this so that I can run the debugger for my Outlook web Add-In?

Answer 1

If you worked this out, please come back here and post an explanation so you can help us, as well as us helping you.
Note: you need to tag your office-js questions with office-js (that's what the Office JS Microsoft employees listen to and reply on)
Meanwhile - this workaround seems useful to me:
Put this into your taskpane.html:
<textarea id="out" rows=10 cols=46>debug info here</textarea>
And then instead of using console.log() you can use something like this:-
document.getElementById("out").value += "Ready...\n";
Also - it looks like you can install DevTools and the old EdgeHTML engine (by installing JavascriptBrowser) as per my comments here: Can someone from Microsoft please write a working instruction for how to debug Microsoft-365 Apps now-days (post-August-2021)