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.)

[Gabriel0402]

@tan9 This is great work. I can also make my debugger work with this write to file plugin. And some little suggestions to the PR. For windows machine, the launch.json should be

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceRoot}\\dist",
      "diagnosticLogging": true,
      "sourceMaps": true
    }
  ]
}

And I don't know if there're some edge cases for the check of absolute path, but your devtoolModuleFilenameTemplate didn't work for me which is windows os. And I'm still using

devtoolModuleFilenameTemplate: function (info) {
      return "file:///" + info.absoluteResourcePath;
    }

to make it work. Cheers

[skolmer]

@Gabriel0402 to make this work on osx and windows you can use the following configuration:

devtoolModuleFilenameTemplate: function(info){
  if(info.absoluteResourcePath.charAt(0) === '/') {
    return 'file://'+info.absoluteResourcePath;
  } else {
    return 'file:///'+info.absoluteResourcePath;
  }      
},
devtoolFallbackModuleFilenameTemplate: function(info){
  if(info.absoluteResourcePath.charAt(0) === '/') {
    return 'file://'+info.absoluteResourcePath+'?'+info.hash;
  } else {
    return 'file:///'+info.absoluteResourcePath+'?'+info.hash;
  }      
}

[tan9]

@Gabriel0402, for chrome launch request, you must close all your chrome.exe before launching. Even though you close all Chrome windows, chrome will resident in your Windows' system tray, close it too.

For the devtoolModuleFilenameTemplate resolving in Windows, my colleague confirmed that he can break on his source code without any problem. Can you dump (console.log(resourcePath)) the resolved path for further investigation?

@skolmer In my OS X, info.absoluteResourcePath may be resolved as something like node_modules/rxjs/Observable.js, and I don't know why. So I have to normalize it to absolute path before os specific path url workaround:

devtoolModuleFilenameTemplate: function (info) {
  var resourcePath = info.absoluteResourcePath;
  if (resourcePath.indexOf(__dirname) !== 0) {
    // Normalize resouce path if it is not an absolute path
    // (e.g. 'node_modules/rxjs/Observable.js')
    resourcePath = helpers.root(resourcePath);
  }
  if (resourcePath.charAt(0) === '/') {
    // Mac OS X absolute path has a leading slash already
    // https://github.com/Microsoft/vscode-chrome-debug/issues/63#issuecomment-163524778
    return 'file://' + resourcePath;
  } else {
    return 'file:///' + resourcePath;
  }
}

Can you break on node_modules/rxjs/Observable.js without this normalization?

[skolmer]

@tan9 You can have a separate chrome session per project if you set chrome's userDataDir in your launch.json
"userDataDir": "${workspaceRoot}/.vscode/chrome"

Not sure why absoluteResourcePath contains a relative path in your case. What devtool is set in your webpack config? I'm using devtool: 'cheap-module-inline-source-map'

[tan9]

@skolmer Thanks for the userDataDir tip, I can google and then copy and paste again!

I am using 'cheap-module-inline-source-map' too, as described here: https://github.com/tan9/angular2-webpack-starter/pull/1/files

[tech-no-logical]

I got it to work with the latest (1.1) version of visual studio code by only changing a couple of things after a clean install of both vscode and angular2-webpack-starter:

use
devtool: 'source-map',
instead of
devtool: 'cheap-module-source-map',
in ./config/webpack.dev.js

install and use the write-file-webpack-plugin :
npm install --save write-file-plugin

and add the plugin to ./config/webpack.dev.js by adding :
const WriteFilePlugin = require('write-file-webpack-plugin');
under the Webpack Plugins at the top, and adding :
new WriteFilePlugin()
to the list of plugins, after the DefinePlugin()

this ensures the source-maps are written to disk.
the whole file :
webpack.dev.js.zip

finally, use this launch-config :

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000/",
      "sourceMaps": true,
      "diagnosticLogging": true,
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.vscode/chrome"

    }]
}

notice the absence of '/dist/' in the webroot. with this config, source-maps are in ./dist/, but they point to ./src/. vscode prepends the absolute root to the workspace, and correctly resolves the file.

also, in the latest version of the debugger, vscode already fixes the webpack:/// urls in the source-maps, so you don't have to.

hope this helps someone.

edit : I forgot one thing : the write-file-webpack-plugin is still needed. will update this later.
edit2 : updated

[tech-no-logical]

I just noticed that after following my own procedure, I hit a bug in vscode, I think. on the first run of the project, when I immediately start a debugging session before opening any source files, vscode hangs and must be killed. opening a single file before beginning a debug alleviates this.

[gpasq]

@tech-no-logical, your comment got it working for me. Thanks much!

One typo: npm install --save write-file-plugin should be npm install write-file-webpack-plugin --save-dev

I am also seeing the vscode hang that you mention in your second comment.

[Anujarya300]

@tech-no-logical, that worked for me too. Thanks lot buddy.

I had to modify one more thing in my webpack.dev.js file, removed sourceMapFilename: [name].map.js from output: section. Let webpack do by itself to create the source map files, otherwise your Breakpoint will not hit in TypeScript file, but in JS streamed content instead.

Please also note that these changes only do in dev config not in prod environment.

And here is my partial webpack.dev.js:

`

const WriteFilePlugin = require('write-file-webpack-plugin');

 module.exports = webpackMerge(commonConfig, {

// devtool: 'cheap-module-eval-source-map',

devtool: 'source-map',

output: {
    path: helpers.root('dist'),
    publicPath: 'http://localhost:7777/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js',
},

plugins: [
    new WriteFilePlugin(),
    new ExtractTextPlugin('[name].css'),
],

devServer: {
    historyApiFallback: true,
    stats: 'minimal'
}
 }`

[mshahin364]

@tech-no-logical, It's working for me. But VS code getting hang as config your procedure.

[santoshsas]

#1936

[baloodevil]

I followed the directions in @Anujarya300 comment and got it working. But then found that all that was needed of that code (in the latest version of the starter) was to add const WriteFilePlugin = require('write-file-webpack-plugin'); near the top, and new WriteFilePlugin(), inside the output - plugins section. These changes write out several files to the dist folder instead of using in-memory. Install the plugin with npm install write-file-webpack-plugin --save-dev. It would be good to enhance the project with a conditional include of WriteFilePlugin if VS Code is detected using detection like this.

[trkrameshkumar]

The bellow config works for me,

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000/",
            "sourceMaps": true,
            "trace": true,
            "webRoot": "${workspaceRoot}/src",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

Also "diagnosticLogging": true, is deprecated, use "trace":true instead

[FDiskas]

@trkrameshkumar or just
"verboseDiagnosticLogging": true against "trace": true, ☕