Lately I've been using an excellent boilerplate for kickstarting React projects.
Essentially, it's a nicely bundled (React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel) starter kit with a number of excellent additional features that include:
- Redux time travel (via Redux DevTools)
- The excellent webpack-dev-dashboard
- Debugging of ES6 source files using Chrome DevTools
The last feature is the one that I was most excited about, given that debugging the 2MB
bundle.js file was getting a bit tedious on previous projects.
Having said that, I ran into an issue where breakpoints would only hit after the initial load of the web page and the middleware has done it's thing.
To get around this (until this is addressed), I found a nifty tip on react-slingshot's GitHub page:
In order to force the browser debugger to hit a breakpoint, simply add the command
debugger anywhere in your source code, and hey-presto: it will hit the breakpoint every time.