How to Debug ES6 in WebStorm with Babel

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-es2015

3. 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 -g

Install 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

How fast is your website? Free Website Speed Test


Start Test