Using VS Code chrome debug extension

[sumigoma]

I'm not sure if this falls within the scope of this project, but it would be nice to establish the correct launch.json configuration to make this project debuggable within VS Code using this extension (https://github.com/Microsoft/vscode-chrome-debug), given the webpack configuration used here.

Has anyone had any luck with this?

[juristr]

@sumigoma 👍 Nice plugin, didn't know about it

[PatrickJS]

@sumigoma do you think you can make the file and make a pull-request?

[juristr]

I have half an hour of time, giving it a go 😄

[sumigoma]

I would, but I haven't been able to come up with a launch.json config that works.. I'm wondering if it's because webpack-dev-server doesn't write its bundles to disk (so the extension can't access any source maps) or if it's something else. I've been playing with moving the build folder into src/public, etc., but no luck so far.

[PatrickJS]

yeah it doesn't write to disk since it's all in-memory so perhaps that is a problem

[juristr]

@sumigoma @gdi2290 Currently taking a look at this repo which uses it apparently with webpack: https://github.com/skolmer/react-hot-boilerplate-vscode

//Edit: Also this one: https://github.com/Microsoft/vscode-chrome-debug/issues/63

[sumigoma]

Yep, I've been following the developments, but this project is structured a little differently, and the webpack configuration differs as well.. Will keep messing with it.

[skolmer]

The main change in configuration to get vscode-chrome-debug working with webpack-dev-server is described here: skolmer/react-hot-boilerplate-vscode#1
This is just a hack to avoid sourcemaps that point to files at "webpack:///..."

If someone finds a better way to get vscode chrome debugger working with webpack-dev-server please let us know at https://github.com/Microsoft/vscode-chrome-debug/issues/63

[Gabriel0402]

I tried to set devtoolModuleFilenameTemplate in webpack config to "file:///" and it works. Here's the change for the webpack configuration:

output: {
    path: root('__build__'),
    filename: '[name].js',
    // filename: '[name].[hash].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js',
    // publicPath: 'http://mycdn.com/'
    devtoolModuleFilenameTemplate: function(info){
      return "file:///"+info.absoluteResourcePath;
    }
  },

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "__build__"
        }
    ]
}

The issue in this case is that the webpack is not writing to disk so I run another npm run watch to watch the changes and get the rebuild files. But it seems not efficient. Hope there's a solution that don't need to have to process run at the same time.
Hope it helps!

[PatrickJS]

I included this into the readme via e336583

[tan9]

A working sample here:

https://github.com/tan9/angular2-webpack-starter/pull/1/files

I'm a newbie for modern front-end development. I found it is very tricky to make this project run with VSCode debugger.

After two days' try-and-error, I finally made the working sample. If you are in trouble with VSCode debugging, maybe this can help you out.

Thanks @Gabriel0402 for providing a snippet for a good start. However, the "file:///" path doesn't run on my OS X as described here https://github.com/Microsoft/vscode-chrome-debug/issues/63#issuecomment-163524778 , and webRoot doesn't work due to an breaking change from Visual Studio Code as described https://github.com/Microsoft/vscode-chrome-debug/issues/117#issuecomment-193774722 .

Note: DO NOT put any space in your workspace path. (3/24 updated: vscode-chrome-debug 0.2.3 fixed the space in path issue here.)