Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using VS Code chrome debug extension #144

Closed
sumigoma opened this issue Dec 9, 2015 · 25 comments
Closed

Using VS Code chrome debug extension #144

sumigoma opened this issue Dec 9, 2015 · 25 comments

Comments

@sumigoma
Copy link

sumigoma commented Dec 9, 2015

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
Copy link

juristr commented Dec 10, 2015

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

@PatrickJS
Copy link
Owner

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

@juristr
Copy link

juristr commented Dec 10, 2015

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

@sumigoma
Copy link
Author

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
Copy link
Owner

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

@juristr
Copy link

juristr commented Dec 10, 2015

@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
Copy link
Author

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
Copy link

skolmer commented Dec 10, 2015

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
Copy link

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
Copy link
Owner

I included this into the readme via e336583

@tan9
Copy link

tan9 commented Mar 18, 2016

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
Copy link

@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
Copy link

skolmer commented Mar 19, 2016

@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
Copy link

tan9 commented Mar 21, 2016

@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
Copy link

skolmer commented Mar 21, 2016

@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 added a commit to tan9/angular2-webpack-starter that referenced this issue Mar 22, 2016
@tan9
Copy link

tan9 commented Mar 22, 2016

@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
Copy link

tech-no-logical commented May 12, 2016

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
Copy link

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
Copy link

gpasq commented May 22, 2016

@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
Copy link

Anujarya300 commented Jun 8, 2016

@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
Copy link

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

@santoshsas
Copy link

#1936

@baloodevil
Copy link

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
Copy link

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
Copy link

FDiskas commented Oct 5, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests