无法连接到目标：连接 ECONNREFUSED 127.0.0.1:9222答案

【问题标题】：Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222无法连接到目标：连接 ECONNREFUSED 127.0.0.1:9222
【发布时间】：2016-04-22 01:19:10
【问题描述】：

我正在尝试使用 vscode 调试我的 Angular 代码，但不起作用。

无法连接到目标：连接 ECONNREFUSED 127.0.0.1:9222

【问题讨论】：

127.0.0.1 通常是绑定到本地主机的 IP 地址。显然您的客户端尝试在端口9222 连接到您的本地主机，但那里没有运行任何东西
如何启用 9222？ wamp 的 localhost 正在运行

标签： angularjs visual-studio-code

【解决方案1】：

我不确定您是否仍然需要它，但我找到了解决方案，因为我自己也面临同样的问题。

您必须启动 Chrome 并启用远程调试才能附加扩展程序。

Windows

右键单击 Chrome 快捷方式，然后选择属性在“目标”字段中，附加 --remote-debugging-port=9222 或者在命令提示符下，执行 /chrome.exe --remote-debugging-port=9222

OS X

在终端中，执行 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

在终端中，启动 google-chrome --remote-debugging-port=9222

我在 vs code chrome 扩展的 github 上找到了以下信息： https://github.com/Microsoft/vscode-chrome-debug

注意 - 如果您已经运行了 Chrome 实例。在打开更新的 Chrome 窗口之前先关闭它们。参考：-https://github.com/Microsoft/vscode-chrome-debug/issues/111

【讨论】：

兄弟，这个命令不起作用。请帮助我 OS X 在终端中，执行 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
fwiw 在我的launch.json 中我必须添加以下参数才能使这项工作："runtimeArgs": [" --remote-debugging-port=9222"]
Chrome 连接到 127.0.0.1 (localhost) 但它决定不连接到 127.0.0.1:9222 (localhost:9222)。请帮忙。

【解决方案2】：

我收到此错误是因为我忘记关闭上次应用程序运行时的 chrometab。只需关闭这些选项卡，您就可以重新启动并运行。

【讨论】：

【解决方案3】：

我可以通过停止调试器、关闭所有正在运行的 Chrome 窗口，然后重新启动调试器来解决此问题。请注意，我使用的是 IIS Express。

【讨论】：

【解决方案4】：

附加到digaomatias添加的详细信息

注意：在打开更新后的 Chrome 窗口之前停止已经运行的 Chrome 实例/标签。

来自Github的参考。

【讨论】：

【解决方案5】：

如果您在 Windows 中运行此应用程序并显示此消息，请尝试重新启动计算机。这对我有用！

【讨论】：

【解决方案6】：

这样使用：

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

【讨论】：

【解决方案7】：

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.

【讨论】：

【解决方案8】：

只需关闭 Visual Studio 并再次打开即可。解决了我的问题

【讨论】：

【解决方案9】：

我将 Visual Studio Code 更新到最新版本，问题得到解决。

【讨论】：

【解决方案10】：

这是调试器浏览器的问题。我是这样解决的：

在 Microsoft Edge Tools for VS Code 中安装 VS Code

创建一个 lauch 配置为：

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

然后F5开始调试。

【讨论】：