Microsoft/vscode-chrome-debug

A Visual Studio Code extension to debug your Javascript code on targets that support the Chrome Debugging Protocol.

Rob Lourens

@roblourens

It's expected that you have the code in your workspace, if you don't already. But in what way did it fail?

Ruslan Kurchenko

@henko-okdev

@roblourens I retrieve next exception:
Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

Also, I tried to add "webRoot": "${workspaceRoot}/pack/formview/app" config and it didn't help me

Rob Lourens

@roblourens

That implies that chrome isn't listening on that port - see some troubleshooting tips here - https://github.com/Microsoft/vscode-chrome-debug#cannot-connect-to-the-target-connect-econnrefused-1270019222

strongant

@strongant

Extension has not been invoked for the current page (see activeTab permission). Chrome pages cannot be captured.
I have a try many times,sometimes is correct,sometimes is error?

Ruslan Kurchenko

@henko-okdev

@roblourens you were right! I've closed all chrome processes and rerun it and debuger is working :) Thank you!

José Diaz Seng

@joseds

Hi, I am learning how to use webpack via the SurviveJS book. I just went through the chapter on sourcemaps and tried to get debugging working in the current VS Code Insiders version. I created the following launch configuration:

(sorry, hit return key too early..., details following)

José Diaz Seng

@joseds

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4040/index.html",
            "sourceMaps": false,
            "webRoot": "${workspaceRoot}"
        }
    ]

I am working on Windows 10 using a current version of Chrome.
Now, my problem is that breakpoints are not being hit. When inserting a debugger; statement, execution stops there and I can step through my code, also the breakpoints in the code following are being hit. VS Code tells me "Breakpoint ignored because target path not found" on hovering over a breakpoint. Do you have an idea how to fix this? I would also be fine with an attach configuration.

Rob Lourens

@roblourens

You have sourceMaps: false - maybe you are setting the breakpoint in a source file that isn't loaded in Chrome?

Or you can use the .scripts command to see which urls are loaded. They will be resolved to files on disk using your webRoot - see if it makes sense.

José Diaz Seng

@joseds

I have used sourcemaps generated by webpack. Juho Vepsäläinen (the author of the SurviveJS webpack book) suggested to use sourcemaps of type source-map insted of eval-source-map. This together with the following configuration

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4040/index.html",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]

made it work, with eval-source-map it does not. I need to better understand what is going on. I will try using .scripts to see what goes wrong when trying to use eval-source-map.

osaton

@osaton

Has anyone had success loading external sourcemaps over https?

Rob Lourens

@roblourens

@osaton - Microsoft/vscode-chrome-debug-core#65 coming soon...

@joseds For webpack you may also need to use sourceMapPathOverrides, depending on what all is going on in your webpack setup

osaton

@osaton

@roblourens oh, nice!

José Diaz Seng

@joseds

@roblourens Thanks for the pointer. I use the sourceMapPathOverrides launch setting now and activate logging as follows:

            "url": "http://localhost:4040/index.html",
            "webRoot": "${workspaceRoot}/build",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./app/*": "${workspaceRoot}/app/*"
            },
            "diagnosticLogging": true

The breakpoints look right now in VS Code (no "target path not found any more"), but they are not being hit. When looking at the log file, it seems that the fact that webpack-dev-server uses some hash in the path for the in-memory files it serves could be the reason for the files on disk not being found(?) E.g. the log file says

SourceMap: mapping webpack:///./app/component.js?60be => c:\Users\jose\Documents\GitHub\survivejs-webpack\app\component.js?60be, via sourceMapPathOverrides entry - "webpack:///./app/*":

where of course the file on disk is just component.js, so maybe the suffix ?60be is the reason while the file is not found.

Rob Lourens

@roblourens

That could be a problem, although there are other reasons that a bp may not be hit, like if it's in global code that runs immediately when the page starts. In that case you can check whether it's hit when you reload the page. Otherwise, can you open an issue for it?

José Diaz Seng

@joseds

Thanks for the quick reply. The bp is also not hit on reloading the page, I checked that. Maybe I am doing something wrong still, but at least how the bps are shown now (as active) in VS Code is not consistent with their behavior, so there might be an issue here. I will prepare a small example and open an issue based on it.

Rob Lourens

@roblourens

Thanks, an example would be great

José Diaz Seng

@joseds

@roblourens I have created an issue Microsoft/vscode-chrome-debug#339 pointing to a little project reproducing it. It also shows that just switching to source-mapsourcemaps using the same launch configuration makes breakpoints work. I have written up what could be the issue, but I may be wrong. Thanks again!

osaton

@osaton

@roblourens Thanks for the update! Now external sourcemaps load properly over https :tada:

osaton

@osaton

Is it possible to “Inspect” Chrome instance that is being used for remote debugging? Or is that a Chrome feature to quit when trying to do so?

con-ssc

@con-ssc

only one debugger can be connected I think so either devtools or vscode

Assaf

@assaftenen

anyone got maybe aworking s;aunch.json configuration for debugging electron app?

Andre Weinand

@weinand

@assaftenen have you tried this: http://electron.atom.io/docs/tutorial/debugging-main-process-vscode/

Gunter Spranz

@gunters63

I am using VS Code 1.9.0, Debugger for Chrome 2.5.2 and Chrome 56.0.2924.87. I currently have the issue I can launch the debugger on a project in VS Code. Chrome comes up fine. But when I try to open the developer tools Chrome crashes immediately. It seemed to work last friday (there were some updates to VS Code and the debugger extension afaik). Anyone has similar experiences?

Gunter Spranz

@gunters63

Does this have something to do with Microsoft/vscode-chrome-debug#83 Strange that it worked a couple of times last friday.

Assaf

@assaftenen

@weinand yep, it does debug the app, but only under the scope of main page e.g main.js, or index.js.

Andre Weinand

@weinand

@assaftenen what other parts of an electron app do you want to debug?

Rob Lourens

@roblourens

@gunters63 That isn't expected to work unfortunately. Only one thing can debug Chrome at a time. I want to improve the experience there somehow, though

Gunter Spranz

@gunters63

Thanks, Rob

Teodorescu Stefan Eduard

@StefanEduard

hey how can i set up vs code chrome debugger for localfile

{
"version": "0.1.0",
"configurations": [
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost/mypage.html",
"webRoot": "${workspaceRoot}/app/files"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html"
},
]
}

i dont get how to set up "url": "http://localhost/mypage.html",
"webRoot": "${workspaceRoot}/app/files""

if that is the problem

Rob Lourens

@roblourens

@StefanEduard You need to start your own server, then provide the URL

Assaf

@assaftenen

At WebStorm by using F12 key, you can get small file scheme for quick file navigation. Does this behavior exists some how at VS Code?

Rob Lourens

@roblourens

Not sure what you mean by that - like what cmd+P does in vscode?

con-ssc

@con-ssc

I think he means the loaded scripts overview like in the dev tools

José Diaz Seng

@joseds

Hi, today debugging stopped working for me, I start Chrome as usual with --remote-debugging-port=9222 and did not change my launch configurations. Attach and launch configurations fail with error "Cannot connect to runtime process, timeout after 10000 ms - (reason: Got a response from the target app, but no target pages found)." I checked the log file, it says "Discovering targets via http://127.0.0.1:9222/json". Opening that URL shows an empty array... Should I see something there?

José Diaz Seng

@joseds

Never mind... After having updated Chrome to the current version it works again!