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.

回答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

回答2:

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

回答3:

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.

回答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.

回答5:

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.

回答6:

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.

回答7:

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

回答8:

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

来源：https://stackoverflow.com/questions/36783068/cannot-connect-to-the-target-connect-econnrefused-127-0-0-19222

标签

angularjs

visual-studio-code