Key takeaways
- Debugging transpiled code needs source maps, or breakpoints land on the wrong lines.
- Configure Babel to emit maps and point WebStorm at them before starting a session.
- Verify by setting a breakpoint in source and confirming it stops there, not in the output.
Here are the steps you need to follow in order to debug ES6 code in the WebStorm IDE. After this, you’ll be able to take advantage of all debugging advantages, like setting breakpoints, moving away from console logs and faster understanding of the code of your application.
Prerequisites for Debugging ES6 in WebStorm IDE
1.Add the following NPM modules:
babel-core
babel-preset-es20153. Add the following devDependencies:
"devDependencies": {
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-sourcemaps": "^2.4.1"
}2. Create a new gulp file, you can call it: gulp.babel.js, and paste the below code to this file:
import gulp from 'gulp';
import sourceMaps from 'gulp-sourcemaps';
import babel from 'gulp-babel';
import path from 'path';
const paths = {
es6: ['./src/**/*.js', './test/**/*.js'],
es5: './dist',
sourceRoot: path.join(__dirname, 'src'),
};
gulp.task('babel', () => gulp.src(paths.es6)
.pipe(sourceMaps.init())
.pipe(babel({
presets: ['es2015'],
}))
.pipe(sourceMaps.write('.', { sourceRoot: paths.sourceRoot }))
.pipe(gulp.dest(paths.es5)));
gulp.task('watch', ['babel'], () => {
gulp.watch(paths.es6, ['babel']);
});
gulp.task('default', ['watch']);4. Install NPM modules
It is a good idea to install gulp globally:
npm install gulp -gInstall the npm modules, by running npm install in the root of your application.
5. Run gulp from the root folder of your application, which will create the dist folder with the transpiled scripts + sourcemaps used for debugging ES6 code
Debug Mocha Unit Tests with WebStorm
- in order to debug/add breakpoint to the Mocha tests, you need to do the following:
- add `–compilers js:babel-core/register` the `WebStorm Mocha Configuration -> Extra Mocha options` field
- start debugging the tests by adding breakpoints to the unit tests and while running in the Debug mode
Frequently Asked Questions
Why do my breakpoints land on the wrong lines?
Because the debugger is stepping through the transpiled output, not your source. Babel has to emit source maps and the IDE has to be told where they are, otherwise every breakpoint is offset by however much the transpiler moved the code.
How do I generate source maps with Babel and gulp?
Wrap the babel step between gulp-sourcemaps init and write, and set sourceRoot to your source directory. The maps are written next to the compiled files, which is where WebStorm looks for them.
How do I know the setup is actually working?
Set a breakpoint in an ES6 source file and start a debug session. If execution stops on that line rather than somewhere in the compiled output, the maps are being read correctly.
