Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222 - angularjs

Question

I am trying to debugg my angular code with vscode but doesnt work.
Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

Answer 1

I'm not sure you still need it, but I found the solution, since I was facing the same issue myself.
You must launch Chrome with remote debugging enabled in order for the extension to attach to it.
Windows
Right click the Chrome shortcut, and select properties
In the "target" field, append --remote-debugging-port=9222
Or in a command prompt, execute /chrome.exe --remote-debugging-port=9222
OS X
In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Linux
In a terminal, launch google-chrome --remote-debugging-port=9222
I've found this info on the vs code chrome extension's github:
https://github.com/Microsoft/vscode-chrome-debug
Note - If you have already running instances of Chrome. Close them first before opening the updated Chrome window. Ref:- https://github.com/Microsoft/vscode-chrome-debug/issues/111

Answer 2

I got this error because I forgot to close the chrometabs from the previous time the application ran.
Just close those tabs and you are up and running again.

Answer 3

If you running this application in windows, and show you this message, try just restart your machine.
This works for me!

Answer 4

Add-on to the details added by digaomatias
Note: Stop already running Chrome instances/tabs before opening the updated Chrome window.
Reference from Github.

Answer 5

I was able to resolve this issue by stopping the debugger, closing all of my running Chrome windows, and then re-starting the debugger. Note that I'm using IIS Express.

Answer 6

To test and debug in vs code with angular and karma here is a solution,
angular test case to work you have to make a setting in 2 files,
1. Karm.conf.json ( this is a file that set your karma test runner.
2. LaunchSetting.json ( this is file used by your Chome Debugger extension in vs code)
So always first you have to run your karma test runner, on that port and then you can attach debugger on running port.
Step 1) Setup Karma.conf.json,
open default file created by cli,
you got something like this,
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
if you run ng test, you see in console you got some info like is Chrome is running, as well a page will open in browser with http://localhost:9876,
Now time to add headlesschrome with port 9222,
inside config.set, add this,
customLaunchers:{
ChromeHeadless:{
base:'Chrome',
flags:[
'--headless',
'--disable-gpu',
'--no-sandbox',
// Without a remote debugging port, Google Chrome exits immediately.
'--remote-debugging-port=9222',
]
}
}
and now go and add to the browser array ChoromeHeadless, so updated array will look like this, browsers: ['Chrome','ChromeHeadless'],
now run ng test you got in console chrome and chrome headless both running,
Step 2) Time to set up your launcher, to debug on 9222, debug to work you need sourcmap creation to work properly, that is important,
so for same to work just copy-paste config setting from below configuration array to your launchsetting.json configuration array as new config,
configurations: [
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"*": "${webRoot}/*",
},
"sourceMaps": true,
}
]
run ng test, and then go to debugger choose the config we add, your debugger working,
if you using npm run test, then make sure in your package.config where you define a run test, you have not set source map to false, if not then you can set debugger with,
npm run test as well.

Answer 7

Simply close the visual studio and open it again. It has solved my problem

Answer 8

I updated the Visual Studio Code to the latest version, the issue got resolved.

Answer 9

It's a issue about the debugger Browser. I solved it like this:
Install VS Code add in Microsoft Edge Tools for VS Code
Create a lauch config as:
{
"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,
}
Microsoft Edge Tools for VS Code
Then F5 start to debug.

Answer 10

Go to Tools => Options => Debug => General => and uncheck "Enable JavaScript debugging for Asp.Net (Chrome and IE)

Answer 11

Use like this:
{
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
"userDataDir": "${workspaceRoot}/out/chrome",
"runtimeExecutable": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
}