{"id":145,"date":"2017-03-30T09:37:05","date_gmt":"2017-03-30T09:37:05","guid":{"rendered":"http:\/\/loadfocus.com\/blog\/tech\/?p=145"},"modified":"2019-04-26T08:46:23","modified_gmt":"2019-04-26T08:46:23","slug":"how-to-debug-es6-in-webstorm-with-babel","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/tech\/2017\/03\/how-to-debug-es6-in-webstorm-with-babel","title":{"rendered":"How to Debug ES6 in WebStorm with Babel"},"content":{"rendered":"<\/span> < 1<\/span> minute read<\/span><\/span>

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.<\/p>\n

Prerequisites for Debugging ES6 in WebStorm IDE<\/h3>\n

 <\/p>\n

1.Add the following NPM modules:<\/p>\n

\nbabel-core\nbabel-preset-es2015\n<\/code><\/pre>\n
3. Add the following devDependencies:<\/p>\n
\n\"devDependencies\": {\n\"gulp\": \"^3.9.1\",\n\"gulp-babel\": \"^6.1.2\",\n\"gulp-sourcemaps\": \"^2.4.1\"\n}\n<\/code><\/pre>\n
2. Create a new gulp file, you can call it: gulp.babel.js<\/em>, and paste the below code to this file:<\/p>\n
\nimport gulp from 'gulp';\nimport sourceMaps from 'gulp-sourcemaps';\nimport babel from 'gulp-babel';\nimport path from 'path';\n\nconst paths = {\nes6: ['.\/src\/**\/*.js', '.\/test\/**\/*.js'],\nes5: '.\/dist',\n\nsourceRoot: path.join(__dirname, 'src'),\n};\n\ngulp.task('babel', () => gulp.src(paths.es6)\n.pipe(sourceMaps.init())\n.pipe(babel({\npresets: ['es2015'],\n}))\n.pipe(sourceMaps.write('.', { sourceRoot: paths.sourceRoot }))\n.pipe(gulp.dest(paths.es5)));\n\ngulp.task('watch', ['babel'], () => {\ngulp.watch(paths.es6, ['babel']);\n});\n\ngulp.task('default', ['watch']);\n<\/code><\/pre>\n
 <\/p>\n
4. Install NPM modules
\nIt is a good idea to install gulp globally:<\/p>\n
\nnpm install gulp -g\n<\/code><\/pre>\n
Install the npm modules, by running npm install in the root of your application.<\/p>\n
5. Run gulp <\/em>from the root folder of your application, which will create the dist<\/em> folder with the transpiled scripts + sourcemaps used for debugging ES6 code<\/p>\n
Debug Mocha Unit Tests with WebStorm<\/h3>\n