Reputation: 399

Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

I am trying to debugg my angular code with vscode but doesnt work.

Upvotes: 19

Answers (12)

Luciano Dourado

Reputation: 502

I had a similar issue with Nextjs and firefox

Error: connect ECONNREFUSED 127.0.0.1:60619

I solved by going into Tools > Browser Tools > Remote Debugging > adding the host address in the network location section.

Upvotes: 0

Ron

Reputation: 1931

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

Upvotes: 1

Max

Reputation: 11

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.

Upvotes: 0

Laxmi Naarayanan

Reputation: 1

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

Upvotes: 0

benjaminoerskov

Reputation: 240

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.

Upvotes: 9

sai

Reputation: 319

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

Upvotes: 0

Peter DiFalco

Reputation: 11

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.

Upvotes: 1

Mohit

Reputation: 311

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.

Upvotes: 0

Yalle Prado

Reputation: 43

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

Upvotes: 3

Rafael Corrêa Gomes

Reputation: 1907

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"
}

Upvotes: -2

digaomatias

Reputation: 1194

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

Upvotes: 30

Datta1

Reputation: 21

Add-on to the details added by digaomatias

Note: Stop already running Chrome instances/tabs before opening the updated Chrome window.

Reference from Github.

Upvotes: 1

Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

Answers (12)

Related Questions