Bug in ChromeDebuggingAttachment settings

[DrYSG]

Very nice tool.

Is it possible to use the VSCODE attach to the live server? Or to Launch the Live server from the launch.json . If so , how does one do that? Or is there a fundamental limitation that I have to use the Chrome Debugger (which I really don't mind, I just wanted to see if I could use the VSCODE debugger also).

Launch.json

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Live Server",
            "url": "http://localhost:5500/WorkBench/Workbench.html",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Live Server",
            "port": 5500,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

[ritwickdey]

Are you talking about this => https://www.youtube.com/watch?v=pcjeJ7pVjKo

If yes, yes! it is possible!
check the settings page https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md

[DrYSG]

The video looks exactly what I want (I am away at a conference, and don't have access to my work computer, but I will try the liveServer.settings.ChromeDebuggingAttachment: true.

I assume that the launch.json should look something like this:

        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }

[ritwickdey]

Okay, First try to close all instance of Google Chrome & start live server. It will open a new window of Google chrome.

Now start chrome debugging attachment.

It should work,

[ritwickdey]

Hi @DrYSG, Thanks for reporting! Just now I've tried, it's not working! May be some how code is broken! I've have to debug it.

A workaround : (you can you commands through AdvanceCustomBrowserCmdLine settings) :

• Set the settings

{
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --remote-debugging-port=9222"
}

[DrYSG]

I must still be missing something. I first launched the live server, had the web page running inside of it, Then I tried to Attach to to Chrome.
I am getting this as the errror:

Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222).

yes, I did shut down all instances of Chrome (V 62) on Windows 10.

and yes, this is what the url the Chrome browser is showing:

http://127.0.0.1:5500/dist/webview2.html

Launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "WebView",
            "url": "http://localhost/WebView/webview.html",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

settings.json (under .vscode)

{
    "liveServer.settings.ChromeDebuggingAttachment": true,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --remote-debugging-port=9222"
}

[ritwickdey]

remove the settings ChromeDebuggingAttachment... It has a bug!

Close all chrome instance, stop live server, start the live server again...

[DrYSG]

Ok, I did that, and yes it is now stopping at the breakpoints. The odd thing now is that that I have a minified bundle.js, with sourcemaps (I use rollupjs). But inside of VSCODE, I see that I can set the breakpoints at the original source, but the locals are all from the minified version (e.g. the local variable sprite, is now "i". Is this a inherent limitation in VSCODE debugging, and in which case I should use Chrome Debugger?

[ritwickdey]

Sorry! I don't get your point! Can you give me an example.?

If you have minified version of js & sourceMap, you can add breakpoints at original js file (not modified version).

[DrYSG]

See above screen shot. The breakpoint is at line #110, which is in the updateSprite(sprite) funnction,

I wanted to look the value of the passed in variable sprite. I have stepped the program to line #112, at this point the local variable loc should be defined.

But if you look at the left of the VSCODE debug window, in the pane called local variables, you see only
this, i and t as being the variables defined. They have the correct values for sprite and loc, but are named i and t,

This is because I am using rollupjs to take the source, and bundle it and then minifiy it (I like rollupjs better than webpack for this work).

The VSCODE debugger is smart enough to use the sourcemaps in bundle.js to show the correct line, but it does not do the local variables. Is this a inherent limit in VSCODE?

Because the Chrome native debugger (F12) does not do this, it shows the local variables with the real names.

[ritwickdey]

Ohh! I got your point! if Chrome native debugger doesn't behave like this, you could be a bug. (I really don't know). Since it is not related of Live Server, I can't help you! Best way to open a new issue request here https://github.com/Microsoft/vscode-chrome-debug/issues.

BTW, one question! When you're hovering on a variable, it that working? and if you do launch request of debugging (not attachment), is that working as expected?

[DrYSG]

That was two questions!

1. Hovering does not show any variables (either an attach or direct launch)
2. variable names are minified with a launch request also.

So it has nothing to do with live-server. I will submit a question to the vscode folks.

[DrYSG]

moved to: https://github.com/Microsoft/vscode-chrome-debug/issues/555

[ritwickdey]

Don't close now, "liveServer.settings.ChromeDebuggingAttachment": true => this setting has a bug!

I'll check later (after 16th Dec)

[ritwickdey]

This issue has been resolved with v3.0.1. Please update the extension and thanks for the reporting.

If you like the extension, please drop a review to vscode marketplace.

[ookil]

Hi I'm not sure if I'm missing something but it still doesn't seem to work for me and I get that same message:
Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222).

What I did was:
in setting.json:
"liveServer.settings.ChromeDebuggingAttachment": true

in launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

and In the "target" field of Chrome, appended --remote-debugging-port=9222