Error processing "attach": connect ECONNREFUSED 127.0.0.1:9222

[ConyKitty]

I use yo office build the Excel Javascript addin, follow the installation steps:

https://github.com/OfficeDev/vscode-debugger-extension-for-office-addins

When it goes to 8th step, run: npm start, it ask if allow the localhost loopback:

Debugging is being started...
App type: desktop
? Allow localhost loopback for Microsoft Edge WebView? Yes
Enabled debugging for add-in c9ec17d0-77f0-485a-ad1c-368d68f2f768.
Starting the dev server... (webpack serve --mode development)
The dev server is running on port 3000. Process id: 16836
Sideloading the Office Add-in...
Debugging started.

I choose yes as above, the Excel window popout with addin works well. Then I try to start debug in VS Code, this error pop out.

I'm sure to use Admin about Powershell and VS Code. Excel: 2016 npm: +-- generator-office@1.8.0 +-- install@0.13.0 +-- npm@8.3.0 `-- yo@4.3.0

launch.json:
        {
      "name": "Attach to Office Add-ins (Edge Legacy)",
      "type": "office-addin",
      "request": "attach",
      "url": "https://localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$en-US$$$$0",
      "port": 9222,
      "timeout": 45000,
      "webRoot": "${workspaceFolder}",
      "trace": "verbose",
    }

Here a same question, but not nice solution for me till now (Dec 26) https://stackoverflow.com/questions/36783068/cannot-connect-to-the-target-connect-econnrefused-127-0-0-19222

[millerds]

What version of Edge is being used in step 8? Can you get me the version of Edge you have installed?

The modifications to the launch.js file the instructions provide the setting for Edge Legacy and Edge Chromium and each of them use a different port. In step 10 you need to choose the right config settings for the browser and if you don't you can get an error like this.

Based on the error it looks like VS Code is looking for Edge Legacy and I'm guessing what is actually launching in setup 8 is the Chromium version. You could try using the other setting and see if that works for you.

[ConyKitty]

Hi Miller, The Edge is 96.0.1054.62 (Official Build)

I delete all the launch.js, and re build the lanunch.js with VS Code add in Microsoft Edge Tools, the launch as below:

{ "name": "Launch Microsoft Edge and open the Edge DevTools", "request": "launch", "type": "vscode-edge-devtools.debug", "url": "https://localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$en-US$$$$0", "port": 9222, } The issue is about the Edge, thanks for your help.

[millerds]

Are you looking for further help or does that work for you?

[ConyKitty]

Hi Miller, I'm still stuck here. I use the "Launch Microsoft Edge and open the Edge DevTools" as debugger tool last time, and "request" set to "launch", so it recreate a new web window in VS Code addin Edge DevTools, but it's not attached to the opened Excel window and sideloaded taskpane, which is auto opened after npm started, So I can't debug in VS Code. I should use the VS Code addin "office-addin" to enable debug. As my Edge is base on Chromium, so I set the webview as edge:

>>>npx office-addin-dev-settings webview .\manifest.xml edge
The web view type is set to Microsoft Edge (Chromium)

Then I run debug by config from office addin, it's still with that ECONNREFUSED 127.0.0.1:9222 error.

{ "type": "office-addin", "request": "attach", "name": "Attach to Office Add-ins", "port": 9222, "trace": "verbose", "url": "https://localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$en-US$$$$0", "webRoot": "${workspaceFolder}", "timeout": 45000, } Here's some questions:

1. Refer to https://docs.microsoft.com/en-us/office/dev/add-ins/concepts/browsers-used-by-office-web-add-ins, Office 2016's browser is IE 11, which is rarely used in Win10+, does the sideload taskpane run in IE or Edge?
2. Can VS Code office addin set the sideload browser? May it change to Edge DevTool or Debugger for Chrome ? If yes, what's the right way to set to them ?

[millerds]

That is a good doc to pay attention to and reminds me of some things we should verify:

• What version of office do you have installed?
• What version of the OS are you running on?
• Do you have "webview2" installed (check programs installed on the OS)?

The thing that is being attached to is the control being used by Office and not an actual browser so there is no Chrome to attach to. That npx command you ran is a way to tell Office to you a different type of control if it is available.

One of the main things determining the attach in the launch.json is the "type" property. "office-addin" (and port 9222) is for attaching to the legacy webview control used by office and if that is not what is being loaded by Office that you get that error message. If you look in that document you linked to earlier, you'll see another config that has a type "edge" (and port 9229) and that is the one that connects to webview2 (which would match your version of edge installed if you have a current version of office as well).

I have learned recently that VS Code and a plugin has been changed such that the type "edge" is no longer correct. You'll need to take that config and update "type" to be "pwa-msedge" and the "useWebView" property should be changed from "advanced" to true (no quotes). That should work with webview2 controls.

I would also note that the configs in the document require you to have launched Office with a side loaded add-in already (using 'npm start' for example). We have since updated the projects generated by 'yo office' to include launch.json and task.json settings that will launch the office application with the add-in sideloaded and attach to that process (give the contraints I talked about earlier about versions and type).

[ConyKitty]

• The office: Professional plus 2016
• OS: Windows 10 Professional 20H2
• Yes, with Microsoft Edge WebView2 Runtime 98.0.1108.43 installed

I change the launch.json config to :

{ "name": "Attach Office AddIn", "request": "attach", "type": "pwa-msedge", "useWebView": true, "port": 9229, "trace": true, "url": "https://localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$en-US$$$$0", "webRoot": "${workspaceFolder}", "timeout": 45000, } But the debug still not work, I set 3 breakpoints, then I clicked Run to set selected cell into yellow(Example method), the selected cell turn into yellow without stop in breakpoint. It seems in debug state: After a while the debug console output:

Verbose logs are written to: [c:\Users\max.han\AppData\Roaming\Code\logs\20220210T220655\exthost1\ms-vscode.js-debug\vscode-debugadapter-94b82518.json.gz]()

Here is the file:

vscode-debugadapter-9f0107ff.json.gz

[millerds]

Because you are using Pro plus 2016 installation of Office then this method of debugging won't work. Over the years there was been 2 versions of the office web view . . . the ie version, the edge legacy version, and the edge chromium version. This debug setting is for the edge chromium version and while you have the current version of edge and webview2 installed, this older version of office isn't using them. See this site for a table with the explinations

https://prod.support.services.microsoft.com/en-us/office/which-browsers-work-with-office-for-the-web-and-office-add-ins-ad1303e0-a318-47aa-b409-d3a5eb44e452#:~:text=Office%20Add-ins%20%20%20%20OS%20%20,%20%20Chrome%20%206%20more%20rows%20

In order to debug the older IE webview you need to use the standalone debugger tools as explained at https://docs.microsoft.com/office/dev/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10. Unfortunately, this does not work with VS Code. If you want to do that you'll need to update your version of office.

[ConyKitty]

Hi millerds, Thanks for all your reply, now it's clear that the old version of office not support the 'new' debug tool.