How to debug a web app running in an another VSCode instance?

Firstly I have to say that this extension has a potential of becoming on of the most important VSC extensions, sadly either I don’t get how to make it work with my project or there is a big problem with it…

So, I have a node.js Express web app that I develop&debug with VSCode. And immediately I have a problem placing launch config for client side debugging in the same folder. It would have been nice being able to debug client-side and server-side scripts in the same IDE instance, but afaik VSCode allows only one debugger at a time, and since you can’t open the same folder/project twice with VSCode - I tried to nest it:

webapp.dev/
|-.vscode/    - express app configs
|-static/
  |-js/
    |-.vscode/    - vscode-firefox-debug configs
    |-index.js
|-webapp.js

and I used the following launch.json in vscode-firefox-debug configs folder

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index",
            "type": "firefox",
            "request": "launch",
            "url": "http://webapp.dev", //localhost actually, domain adssigned locally in hosts file
            "webRoot": "D:/Projects/webapp.dev",
            "profile": "VSCodeDebugode" // devtools.debugger.remote-enabled, devtools.chrome.enabled, devtools.debugger.workers, devtools.debugger.prompt-connection are set as suggested
        }
    ]
}

Theoretically it should work, since my express static paths resolve also to static/js/. So When i try to do something in, for example, static/js/index.js, like setting a breakpoint - I get

WARN |007.119|FirefoxDebugSession: Can't convert path d:/Projects/webapp.dev/static/js/index.js to url

BTW, notice how the error states d:/... and my config has D:/.... If I also use d:/ in the config - debugger doesn’t even recognize the static/js/index.js file (breakpoints are gray and no errors on setting them). Adding terminating / doesn’t help either.

I think the problem is that there is no .html file under webRoot. There is no, because html is generated with a templating engine and cached in-memory only.

So is this even possible? If so, how? If not - consider it a feature request: maybe an option to ignore html and watch only for js?

Also, it is stated in the readme that devtools.debugger.remote-enabled, devtools.debugger.prompt-connection are only needed for attach, but without devtools.debugger.remote-enabled the launch request won’t work either. I think you should move this table in the #Starting section.

Thanks

[hbenl]

😃 Great! I’ll fix the filepath-to-url mapping code soon so others won’t stumble into these problems. Thanks for the bugreport and the sample project!

[hbenl]

Yes, you’re right. I didn’t want to mess with the user’s configuration (automatically lower-casing drive letters) because if there is a setup where VS Code expects an upper-case drive letter I would break the user’s configuration. Anyway, now that the webRoot path is normalized, the need to manually enter an absolute path should be gone, since only webRoot paths that are relative to the workspace make sense and they can now be entered like ${workspaceRoot}/...