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.
Is Your Infrastructure Ready for Global Traffic Spikes?
Unexpected load surges can disrupt your services. With LoadFocus’s cutting-edge Load Testing solutions, simulate real-world traffic from multiple global locations in a single test. Our advanced engine dynamically upscales and downscales virtual users in real time, delivering comprehensive reports that empower you to identify and resolve performance bottlenecks before they affect your users.
Prerequisites for Debugging ES6 in WebStorm IDE
1.Add the following NPM modules:
babel-core
babel-preset-es2015
3. Add the following devDependencies:
Think your website can handle a traffic spike?
Fair enough, but why leave it to chance? Uncover your website’s true limits with LoadFocus’s cloud-based Load Testing for Web Apps, Websites, and APIs. Avoid the risk of costly downtimes and missed opportunities—find out before your users do!
"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.
LoadFocus is an all-in-one Cloud Testing Platform for Websites and APIs for Load Testing, Apache JMeter Load Testing, Page Speed Monitoring and API Monitoring!
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.