Webpack debug watch variables <not available>

I’ve been developing a SPA app using Webpack to bundle and minify my static files even in my dev environment and started hitting a problem where I couldn’t set breakpoints in certain places where I would normally be able to set them. Plus, when execution was stopped on a breakpoint then I was unable to view (or watch) variables which were clearly in scope at the time. In Chrome dev tools these variables would appear as in the watch pane.

The problem was that I had the Uglify plugin configured in my webpack.config

...
plugins: [new webpack.optimize.UglifyJsPlugin({})],
...

As soon as I removed that from the config and rebuit packages I was able to debug normally via source-maps by running

webpack -d

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>