Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222 #111

Closed
steckdev opened this Issue Feb 26, 2016 · 58 comments

Comments

Projects
None yet
@steckdev
Copy link

steckdev commented Feb 26, 2016

Attempting to debug testapp but unable to start chrome in debug mode. Is there any known issue of why chrome would not launch into debug mode even though the "SPAWN" task is setup up properly and chrome has been completely close/end task. Is there some other instruction that is not included in the readme or a known issue with the latest chrome. Version 48.0.2564.116 m (64-bit) - Google Chrome is up to date.

"configurations": [
    {
        "name": "test chrome",
        "type": "chrome",
        "request": "launch",
        //"url": "http://localhost:8080/index.html",
        "url": "file:///C:/Users/tsteck/Downloads/vscode-chrome-debug-master/vscode-chrome-debug-master/testapp/wwwroot/index.html", (Hard coded path)
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "wwwroot"
    },

::::DEBUG CONSOLE::::
›OS: win32 ia32
›Node version: v4.1.1
›Adapter version: 0.2.2
›initialize({"adapterID":"chrome","linesStartAt1":true,"pathFormat":"path"})
›launch({"name":"test chrome","type":"chrome","request":"launch","url":"file:///C:/Users/tsteck/Downloads/vscode-chrome-debug-master/vscode-chrome-debug-master/testapp/wwwroot/index.html","sourceMaps":true,"diagnosticLogging":true,"webRoot":"wwwroot","outDir":null,"program":null,"cwd":"c:\Users\tsteck\Downloads\vscode-chrome-debug-master\vscode-chrome-debug-master\testapp","runtimeExecutable":null})
›spawn('C:\Program Files (x86)\Google\Chrome\Application\chrome.exe', ["--remote-debugging-port=9222","--no-first-run","--no-default-browser-check","file:///C:/Users/tsteck/Downloads/vscode-chrome-debug-master/vscode-chrome-debug-master/testapp/wwwroot/index.html"])
›Attempting to attach on port 9222
›Error: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222
at Object.errP (C:\Users\tsteck.vscode\extensions\msjsdiag.debugger-for-chrome-0.2.2\out\webkit\utilities.js:331:13)
at C:\Users\tsteck.vscode\extensions\msjsdiag.debugger-for-chrome-0.2.2\out\webkit\webKitConnection.js:156:26
at process._tickCallback (node.js:369:9)
›To client: {"seq":0,"type":"response","request_seq":2,"command":"launch","success":false,"message":"[webkit-debug-adapter] Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222"}
›From client: disconnect({"restart":false})
›To client: {"seq":0,"type":"response","request_seq":3,"command":"disconnect","success":true}

@nicky-lenaers

This comment has been minimized.

Copy link

nicky-lenaers commented Feb 26, 2016

Same issue

@auchenberg

This comment has been minimized.

Copy link
Contributor

auchenberg commented Feb 26, 2016

Hi @steckdev, @nicky-lenaers

Can you try to kill any Chrome instances, and start it manually with remote debugging enabled? The path should be C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 on Windows.

Once launched, can you then try to visit http://127.0.0.1:9222/json in any browser?

@nicky-lenaers

This comment has been minimized.

Copy link

nicky-lenaers commented Feb 26, 2016

@auchenberg Tried your suggestion, browser still return ERR_CONNECTION_REFUSED

@nicky-lenaers

This comment has been minimized.

Copy link

nicky-lenaers commented Feb 26, 2016

@auchenberg I forgot to kill some left over Chrome processes, now it is working, but only if there is absolutely no Chrome processes running.

@auchenberg

This comment has been minimized.

Copy link
Contributor

auchenberg commented Feb 26, 2016

Good to hear!

Yeah, it's super annoying. We are working with the Chrome team to figure out if there's a better way. It would be wonderful if remote debugging could be enabled "on the fly" when needed.

Let me know if you have other issues, or have ideas for improvements!

/k

@auchenberg auchenberg closed this Feb 26, 2016

@nicky-lenaers

This comment has been minimized.

Copy link

nicky-lenaers commented Feb 27, 2016

Great to here there's a lot of progress. Awesome plugin really!

@auchenberg

This comment has been minimized.

Copy link
Contributor

auchenberg commented Feb 27, 2016

Thanks 😇

@Cosmos-it

This comment has been minimized.

Copy link

Cosmos-it commented Apr 6, 2016

Ran into similar problem.

@auchenberg

This comment has been minimized.

Copy link
Contributor

auchenberg commented Apr 7, 2016

@Cosmos-it Have you tried to kill all Chrome processes first?

@Cosmos-it

This comment has been minimized.

Copy link

Cosmos-it commented Apr 7, 2016

@auchenberg I have killed all my chrome and I still had issues.
Here is he launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch index.html with sourcemaps",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/app/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost/index.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/wwwroot"
},
{
"name": "Attach with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}

What am I suppose to do with this? Do I need to add my project path?

@auchenberg

This comment has been minimized.

Copy link
Contributor

auchenberg commented Apr 8, 2016

Hi @Cosmos-it

No, something is fishy with your Chrome instance, as our debugger can't connect to Chrome. Sorry to ask this, but restart your box to make sure Chrome is killed or run something like killall chrome

@wangbourne

This comment has been minimized.

Copy link

wangbourne commented May 20, 2016

same thing happen here since i always get:
[debugger-for-chrome] Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

@auchenberg

This comment has been minimized.

Copy link
Contributor

auchenberg commented May 21, 2016

@wangbourne Which platform are you on, and are you sure Chrome has been started with remote debugging enabled?

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Jun 10, 2016

I've tried several of the recommendations, I get the error too
[debugger-for-chrome] Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

...I'm trying so hard to get it working!
On Windows 10, using webpack dev server to host site. My chrome shortcut has this appended --remote-debugging-port=9222

Trying to get this to work:

        {
            "name": "AttachTo:web without sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }

Any other ideas?
Thanks

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Jun 10, 2016

okay. after rebooting a few times... I think I got this. What was weird I would run netstat -aon > ports.txt and do a search on the file and nothing was listening on 9222. Not sure what in Windows10/Chrome makes this stop working but a good test to make sure it is running is just to hit
http://127.0.0.1:9222/json from chrome, it should return tons of JSON.

I guess case open/solved. I wasted too much time on this :-(

@roblourens

This comment has been minimized.

Copy link
Member

roblourens commented Jun 10, 2016

Sorry it took so long, I'm glad it's working now. You're right that if nothing is responding on http://localhost:9222 then there's nothing the extension can do. If it happens again, check whether there are any chrome.exe processes running in the background, I think that can happen.

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Jun 10, 2016

no problem. thanks for responding anyway @roblourens :-)
I learned my lesson!

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Jun 10, 2016

After all that time spent, I still ran into issues afterwards. I was getting the error: Got response from target app, but no valid target pages found...

Hours upon hours later... A couple things for the next poor dev that has issues with this:

  • Specify a userDataDir - this will avoid collisions with other chrome instances you may already have running. I've noticed because of this, chrome just stops listening on any port you specify. Below is what I use and it is great!
        {
            "name": "Launch",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000/#/about",
            "port": 9223,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/out/chrome"
        }
  • If you are using WebPack... I'm sorry, you may have another issue if you use the dev server. See this for more detail: webpack and vscode issue

And there you have it, good luck.
Reece

@sw-devendra

This comment has been minimized.

Copy link

sw-devendra commented Jul 15, 2016

I am facing similar issue. (Cannot connect to the target:undefined)
But I am trying remote debugging, which means that the target device is not the same PC.
I passed IP of the device using "address" parameter in the "attach" configuration. The parameter seems to be allowed in the configuration because I do not see any error on adding the parameter. But it does not work.

I could debug using webinspector by entering http://IP-of-device:port in a chrome browser in my PC. So connection to the device is not a problem.

@auchenberg

This comment has been minimized.

Copy link
Contributor

auchenberg commented Jul 15, 2016

@devendra020280 Can I get you to set diagnosticLogging: true on your launch.json and provide the log?

@roblourens

This comment has been minimized.

Copy link
Member

roblourens commented Jul 15, 2016

@devendra020280 Remote debugging isn't officially supported at the moment. It tries to use the address but can't guarantee that it will work.

@roblourens

This comment has been minimized.

Copy link
Member

roblourens commented Jul 15, 2016

The log should contain more error info though, if you want to debug it.

@AbhieSpeaks

This comment has been minimized.

Copy link

AbhieSpeaks commented Aug 3, 2016

Chrome Canary support will be highly appreciated as thats what most of us use for development and debugging and Chrome for personal browsing.

@roblourens

This comment has been minimized.

Copy link
Member

roblourens commented Aug 3, 2016

You can use Canary if you set the runtimeExecutable launch config property to the path to the Canary chrome.exe.

@meiry

This comment has been minimized.

Copy link

meiry commented Aug 6, 2016

@reecebradley
You Solution working great! thanks

@nacho4d

This comment has been minimized.

Copy link

nacho4d commented Aug 23, 2016

@reecebradley @roblourens Thanks! This worked for me:

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

This comment has been minimized.

Copy link

vapits commented Sep 1, 2016

Guys i would love some help on this. I tried everything you said above but the issue it still here for me. So I revert back to my initial json setup:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/",
            "sourceMaps": false,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": false,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

image

Any ideas?

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Sep 8, 2016

@vapits u figure out ur issue?

@ghost

This comment has been minimized.

Copy link

ghost commented Sep 9, 2016

This worked for me :
right click (chrome shortcut) -> properties -> target
I passed the next message (in windows):
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
After, I have edited the launch.json file :

{
    "version": "0.2.0",
    "configurations": [
         {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/my_project/",  //if your server works with a different port (like 8080) you need to set : "http://localhost:8080/my_project/",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "port": 9222
         }
    ]
}
@hopp

This comment has been minimized.

Copy link

hopp commented Sep 9, 2016

@GhouilaNabil Your comment helped.
I'm using chrome as default browser, so I have always more than one window open.
It seems that remote debugging works only if all windows are running with --remote-debugging-port enabled.switch.

@roblourens

This comment has been minimized.

Copy link
Member

roblourens commented Sep 9, 2016

If you have other Chrome instances open, you should check out the userDataDir flag for your launch config. There's a section about it in the readme, but it will launch a new instance of Node using a new profile at the location you specify. For example I like to do "userDataDir": "${workspaceRoot}/.vscode/chrome"

@klanglie

This comment has been minimized.

Copy link

klanglie commented Sep 20, 2016

I was having issues with this as well. It turns out that settings in my tsconfig file were messing things up. Source Maps were not being found hence nothing could be debugged. I fixed this by removing "mapRoot" and "sourceRoot". Now my config file looks like this and debugging is working:

{ "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "module": "commonjs", "moduleResolution": "node", "noEmitOnError": true, "noImplicitAny": true, "sourceMap": true, "target": "es5", "removeComments": false, "suppressImplicitAnyIndexErrors": true, "outDir": "app/lib", "rootDir": ".", "skipDefaultLibCheck": true, "typeRoots": [ "../node_modules/@types" ], "types": [ "core-js" ] }, "exclude": [ "e2e", "node_modules", "typings", "typings/index.d.ts", "typings/globals" ] }

@HydTechie

This comment has been minimized.

Copy link

HydTechie commented Nov 16, 2016

@reecebradley - you are genius!!!!!!!!!!!!!!!! rest of the internet IS BIG waste of (COPY PASTE) servers energy!
truck load of thanks @ your feet!! hugs from hyderabad!
specifying this entry -- userDataDir - ended by "Angular 2 labour"

@mukeshselvaraj

This comment has been minimized.

Copy link

mukeshselvaraj commented Nov 28, 2016

@reecebradley - after adding "userDataDir" i am able to launch chrome browser. But when I tried to insert a breakpoint i am getting warning in vscode

breakpoint ignored because generated code not found (source map problem)

and my breakpoint never hit. Can you please help me?

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Nov 29, 2016

@mukeshselvaraj The last time recall an issue similar to that was when trying to debug in chrome's debugger tools after attaching in vscode. vscode and chrome debugger (in-browser) are mutually exclusive.

I'd need to look deeper and try to recreate the problem after work.

@mukeshselvaraj

This comment has been minimized.

Copy link

mukeshselvaraj commented Nov 30, 2016

@reecebradley Thank you. Please let me know.

@HydTechie

This comment has been minimized.

Copy link

HydTechie commented Dec 1, 2016

@mukeshselvaraj - Debug issues in my case solved as below: 1. NPM, GIT installations and code working folder stays in the same drive. 2. connection time out error could be becoz of any compilation error in the code 3. general checks like npm cache clean and npm install would clear 4. launch.json would be as ::
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000/login",
"webRoot": "${workspaceRoot}/app/files",
"sourceMaps": true
},
{
"name": "Launch",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:3000/index.html",
"port": 9222,
"sourceMaps": true,
"diagnosticLogging": true,
"webRoot": "${workspaceRoot}",
"userDataDir": "temp"
}
]
}
4. breakpoint hit would be realized, some times, at run time.. keep the breakpoint as is, it will get hit at runtime..for the error : breakpoint ignored

hope it helps,

@mukeshselvaraj

This comment has been minimized.

Copy link

mukeshselvaraj commented Dec 11, 2016

Thank you @HydTechie. Followed your steps exactly but still getting the same issue.

@auchenberg

This comment has been minimized.

Copy link
Contributor

auchenberg commented Dec 12, 2016

@mukeshselvaraj It sounds like you are facing another problem that the initial one, which was about launching/attaching to Chrome.

In order not to pollute this issue, can you open a new issue with a copy of your launch.json config and log after enabling "diagnosticLogging": true?

Happy to help here.

@HydTechie

This comment has been minimized.

Copy link

HydTechie commented Dec 12, 2016

@mukeshselvaraj try below
launch.json
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000/",
"webRoot": "${workspaceRoot}/app/files",
"sourceMaps": true
},
{
"name": "Launch",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:3000",
"port": 9222,
"sourceMaps": true,
"diagnosticLogging": true,
"webRoot": "${workspaceRoot}",
"userDataDir": "temp"
}
]
}

and Try F5 on vsCode, it should start a new browser instance of chrome and be able to debug.

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Dec 12, 2016

@mukeshselvaraj
Just want to point out, back to your specific error:

breakpoint ignored because generated code not found (source map problem)

You will get that if you didn't already start your application. In my case, I use the terminal to run npm start before I try to launch any chrome debugger. The debugger doesn't know how you want to start your application - could be node or gulp or dotnet etc.

If you need something automated to start your application before you debug it, look at "preLaunchTask" in your launch.json. NOTE: This doesn't work too well as a web server process has to keep running in the background and vscode wants whatever task you use to finish before the chrome debugger can start. I haven't spent too much time locating a work around.

Hope this helps,

Reece

@mukeshselvaraj

This comment has been minimized.

Copy link

mukeshselvaraj commented Dec 12, 2016

Thank You @reecebradley @HydTechie @auchenberg. Below have mentioned launch.json

{ "version": "0.2.0", "configurations": [ { "name": "Launch localhost with sourcemaps", "type": "chrome", "request": "launch", "url": "http://localhost:3000/", "sourceMaps": true, "diagnosticLogging": true, "webRoot": "${workspaceRoot}/app/files" }, { "name": "Launch", "type": "chrome", "request": "launch", "url": "http://localhost:3000/", "port": 9222, "sourceMaps": true, "diagnosticLogging": true, "webRoot": "${workspaceRoot}", "userDataDir": "temp" } ] }

Still facing the same issue. Unable to debug in VSCode.

image

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Dec 12, 2016

Hi @mukeshselvaraj

At this point, with this "diagnosticLogging": true, turned on, you should hop over to the "Debug Console". You can find it under "View" menu or try CTRL + SHIFT + Y. Post what you see.

Thanks,
Reece

@mukeshselvaraj

This comment has been minimized.

Copy link

mukeshselvaraj commented Dec 12, 2016

Thank You @reecebradley Please find below mentioned console log

Paths.scriptParsed: could not resolve /AppModule/AppComponent/component.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK).
Paths.scriptParsed: could not resolve /CustomersModule/CustomersComponent/host.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK).
Paths.scriptParsed: could not resolve /AppModule/AppComponent/host.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK).
Paths.scriptParsed: could not resolve /AppModule/module.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK).
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
App bootstrapped

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Dec 12, 2016

Hi @mukeshselvaraj

The debug console has an error that is more related to compilation rather than debugger. I went ahead and tried running DanWahlin's repo and I got something very similar:

C:\_\projects\_starter\Angular2-JumpStart>npm start

> angular2-jumpstart@1.0.0 start C:\_\projects\_starter\Angular2-JumpStart

> tsc && concurrently "tsc -w" "node server.js"

[1] C:\_\projects\_starter\Angular2-JumpStart\server.js:24
[1]     let customerId = +req.params.id;
[1]     ^^^
[1]
[1] SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
[1]     at exports.runInThisContext (vm.js:53:16)
[1]     at Module._compile (module.js:373:25)
[1]     at Object.Module._extensions..js (module.js:416:10)
[1]     at Module.load (module.js:343:32)
[1]     at Function.Module._load (module.js:300:12)
[1]     at Function.Module.runMain (module.js:441:10)
[1]     at startup (node.js:139:18)
[1]     at node.js:968:3
[1] node server.js exited with code 1
                                     [0] 2:38:13 PM - Compilation complete. Watching for file changes.

Add this to the top "use strict"; of the server.js file and the compilation issue goes away. After that, try debugging.

Reece

@mukeshselvaraj

This comment has been minimized.

Copy link

mukeshselvaraj commented Dec 16, 2016

Thank you @reecebradley. Now compilation issues are resolved. But still unable to debug. Please refer screenshot.
image

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Dec 16, 2016

Please post the debug console logs and console output.

@mukeshselvaraj

This comment has been minimized.

Copy link

mukeshselvaraj commented Dec 16, 2016

Paths.scriptParsed: could not resolve /CustomersModule/CustomersCardComponent/component.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK). Paths.scriptParsed: could not resolve /CustomersModule/CustomersGridComponent/component.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK). Paths.scriptParsed: could not resolve /CustomersModule/FilterTextboxComponent/component.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK). Paths.scriptParsed: could not resolve /AppModule/AppComponent/component.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK). Paths.scriptParsed: could not resolve /CustomersModule/CustomersComponent/host.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK). Paths.scriptParsed: could not resolve /AppModule/AppComponent/host.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK). Paths.scriptParsed: could not resolve /AppModule/module.ngfactory.js to a file under webRoot: c:\Users\Jalzeera\Workshop\Projects\GitHub\Angular2-JumpStart. It may be external or served directly from the server's memory (and that's OK). Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. App bootstrapped

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Dec 16, 2016

BTW - that means your web server is probably not running. Therefore, no breakpoint will be hit.

What is in the console window?

@maxime1992

This comment has been minimized.

Copy link

maxime1992 commented Feb 10, 2017

Any luck on that ? Same problem here ...

@Danish8321

This comment has been minimized.

Copy link

Danish8321 commented Mar 11, 2017

{
"version": "0.2.0",
"configurations": [
{
// "type": "chrome",
// "request": "launch",
// "name": "Launch Chrome against localhost",
// "url": "http://localhost:8080/Home.html/",
// "webRoot": "${workspaceRoot}/Javascript Practice/Home.html"
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
//"url": "http://localhost/my_project/", //if your server works with a different port (like 8080) you need to set : "http://localhost:8080/my_project/",
"url": "http://localhost:8080/Home.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/Javascript_Practice/Home.html",
"port": 8080
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 8080,
"url": "http://localhost:8080/Home.html",
"webRoot": "${workspaceRoot}"
}
]
}

@Danish8321

This comment has been minimized.

Copy link

Danish8321 commented Mar 11, 2017

above is my launch.json file and its showing error as drescribed below:
"This site can’t be reached

localhost refused to connect.
Search Google for localhost 8080 Home
ERR_CONNECTION_REFUSED"

please help me out....

@roblourens

This comment has been minimized.

Copy link
Member

roblourens commented Mar 11, 2017

Sounds like your server isn't running - you need to setup your own server, the extension doesn't do it for you.

@reecebradley

This comment has been minimized.

Copy link

reecebradley commented Mar 11, 2017

@Danish8321 @maxime1992
Perhaps you already know this but there is a common misconception with Visual Studio Code behavior vs Visual Studio.

In Visual Studio, you can just run debug and your solution compiles, starts the hosting process like IIS Express or Kestrel, then the VS debugger attaches to the hosting process - which allows you to debug app startup, and off you go. All of this automatically.

In Visual Studio Code, not all of it is automatic. The first 2 steps usually occur in npm start - not all projects are configured to do that but most do nowadays.

  1. Make sure your JavaScript compiles successfully (often if this fails, then your web server won't start, read the build output carefully) - for example
  2. Make sure your web server started successfully by opening another browser and using the URL that is specified in the project
  3. IF all the above succeeds, then you can start the VS Code Chrome Debugger.

Additionally, I do recommend this configuration to prevent some of the Chrome Debugger issues I ran into.

Please post the "OUTPUT" and "DEBUG CONSOLE" logs if you need further help.

@dvsoukup

This comment has been minimized.

Copy link

dvsoukup commented Mar 23, 2017

I added the "userDataDir" to my launch config and it worked out great.
Shoutout to @reecebradley for the suggestion, and @roblourens to showing he puts it in his .vscode directory. I too think this is a good spot as it will create a lot of "noise" that you don't want included in your project. Just be sure to include this directory in your .gitignore!

Here is my config setup. This launches an express server running Nodemon, attaches debugger to nodemon (to debug server-side code.... express routes and what not...), then launches a chrome browser where I can debug all the javascript there. Because of this it uses the "compound" configuration... seems to work great for me though.

Note that this is against an AngularJS project. If you want a similar setup against Angular 2, then you'll likely need to toggle sourcemaps on, as well as set the "outDir" to point to the directory(s) where transpiled files drop into.

Hope this helps someone in the future so they don't waste hours on hours trying to figure out how the in hell to get the VS Code debugger working!

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch via nodemon",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/nodemon/bin/nodemon.js",
            "stopOnEntry": false,
            "args": [
                "--debug",
                "--nolazy",
                "${workspaceRoot}/app/server/server.js"
            ],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "restart": true,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "sourceMaps": false
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Nodemon",
            "address": "localhost",
            "port": 5858,
            "restart": true
        },
        {
            "name": "Launch chrome with debugger",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/app/client",
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        }
    ],
    "compounds": [
        {
            "name": "Launch WebSite",
            "configurations": [
                "Launch via nodemon",
                "Attach to Nodemon"
            ]
        },
        {
            "name": "Launch WebSite with chrome",
            "configurations": [
                "Launch via nodemon",
                "Attach to Nodemon",
                "Launch chrome with debugger"
            ]
        }
    ]
}
@Danish8321

This comment has been minimized.

Copy link

Danish8321 commented Mar 29, 2017

@Danish8321

This comment has been minimized.

Copy link

Danish8321 commented Mar 29, 2017

@ernestoherrera

This comment has been minimized.

Copy link

ernestoherrera commented Apr 11, 2017

how do you launch chrome in remote debugging mode in OSx Sierra

@Microsoft Microsoft locked and limited conversation to collaborators Apr 11, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.