{"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 class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span><p class=\"lead\"><!-- pn-tldr --><\/p>\n<h2>Key takeaways<\/h2>\n<ul>\n<li>Debugging transpiled code needs source maps, or breakpoints land on the wrong lines.<\/li>\n<li>Configure Babel to emit maps and point WebStorm at them before starting a session.<\/li>\n<li>Verify by setting a breakpoint in source and confirming it stops there, not in the output.<\/li>\n<\/ul>\n<p><!-- \/pn-tldr -->Here are the steps you need to follow in order to debug ES6 code in the WebStorm IDE. After this, you&#8217;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<h3>Prerequisites for Debugging ES6 in WebStorm IDE<\/h3>\n<p>&nbsp;<\/p>\n<p>1.Add the following NPM&nbsp;modules:<\/p>\n<pre class=\"lang-java\"><code class=\"lang-java\">\nbabel-core\nbabel-preset-es2015\n<\/code><\/pre>\n<p>3. Add the following devDependencies:<\/p>\n<pre class=\"lang-java\"><code class=\"lang-java\">\n\"devDependencies\": {\n\"gulp\": \"^3.9.1\",\n\"gulp-babel\": \"^6.1.2\",\n\"gulp-sourcemaps\": \"^2.4.1\"\n}\n<\/code><\/pre>\n<p>2. Create a new gulp file, you can call it: <em>gulp.babel.js<\/em>, and paste the below code to this file:<\/p>\n<pre class=\"lang-java\"><code class=\"lang-java\">\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', () =&gt; 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'], () =&gt; {\ngulp.watch(paths.es6, ['babel']);\n});\n\ngulp.task('default', ['watch']);\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>4. Install NPM&nbsp;modules<br \/>\nIt is a good idea to install gulp globally:<\/p>\n<pre class=\"lang-java\"><code class=\"lang-java\">\nnpm install gulp -g\n<\/code><\/pre>\n<p>Install the npm modules, by running npm install in the root of your application.<\/p>\n<p>5. Run <em>gulp&nbsp;<\/em>from the root folder of your application, which will create the <em>dist<\/em> folder with the transpiled scripts + sourcemaps used for debugging ES6 code<\/p>\n<h3>Debug Mocha Unit Tests with WebStorm<\/h3>\n<ul>\n<li>in order to debug\/add breakpoint to the Mocha tests, you need to do the following:<\/li>\n<li>add <strong>`&#8211;compilers js:babel-core\/register`<\/strong> the <strong>`WebStorm Mocha Configuration -&gt; Extra Mocha options`<\/strong> field<\/li>\n<li>start debugging the tests by adding breakpoints to the unit tests and while running in the Debug mode<\/li>\n<\/ul>\n<p><!-- pn-faq --><\/p>\n<h2>Frequently Asked Questions<\/h2>\n<h3>Why do my breakpoints land on the wrong lines?<\/h3>\n<p>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.<\/p>\n<h3>How do I generate source maps with Babel and gulp?<\/h3>\n<p>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.<\/p>\n<h3>How do I know the setup is actually working?<\/h3>\n<p>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.<\/p>\n<p><!-- \/pn-faq --><!-- pn-related-reading --><\/p>\n<h2>Related reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/tech\/2017\/12\/how-to-take-screenshots-with-puppeteer-using-headless-chrome-browser\">Take Screenshots With Puppeteer and Headless Chrome<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/tech\/2018\/03\/how-to-click-on-element-with-puppeteer-and-chrome\">How to Click on Element with Puppeteer and Chrome<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/tech\/2018\/08\/end-to-end-testing-of-asos-com-using-testcafe-in-under-30-minutes\">End to End Testing With TestCafe in Under 30 Minutes<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>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&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/tech\/2017\/03\/how-to-debug-es6-in-webstorm-with-babel\" class=\"more-link\" title=\"Read How to Debug ES6 in WebStorm with Babel\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":498,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[26,28,27],"class_list":["post-145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-testing","tag-debugging-es6-code-in-node-js","tag-mocha-unit-tests-debugging-in-es6","tag-webstorm-es6-debugging"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/comments?post=145"}],"version-history":[{"count":4,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/145\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/posts\/145\/revisions\/328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/media\/498"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/media?parent=145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/categories?post=145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/tech\/wp-json\/wp\/v2\/tags?post=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}