CODEWITHSUNDEEP
javascriptnode.jsdebuggingbabeljs
Magnus
Magnus

Reputation: 7839

JavaScript Development in ES6 With Debugging

I have been trying to find a way to write ES6 JavaScript code, with real-time debugging features.

The problem is that ES6 code needs transpiling before browsers can interpret it (easy with babel), thus making it hard to work with debugging breakpoints.

I found these two articles helpful:

  1. how-to-debug-es6-nodejs-with-vscode
  2. debug-es6-code-in-node-js

My question:

What are skilled JavaScript developers doing about the above issue these days? Any of the three below?

  1. Writing in ES6, transpiling it with babel/webpack upfront, and then trying to debug the new and messy ES5 code
  2. Somehow synching the ES6 original code with the transpiled ES5 generated code, using source maps, to make debugging work
  3. Not writing ES6 code at all

Upvotes: 1

Views: 1057

Answers (3)

Anders
Anders

Reputation: 580

I spent a few hours on the same exact challenge myself, in Visual Studio Code.

I won't take credit for solving it, praise for that goes to Dustin Callaway. You can find simple step by step instructions in his medium article here.

In summary (debugging transpiled code in Visual Studio Code):

  • Visual Studio Code (VSC) does not run any code. Node runs the code and VSC adds debugging features on top
  • VSC scans the source file for breakpoints when launching the debugger
  • It then uses a source map to find out where in the running code the breakpoints belong and thus where Node should stop
  • Babel can watch your code for changes and re-compile as necessary real-time

Dustin's instructions let you debug ES6 files real-time in Visual Studio Code.

Whenever you are ready for production, just recompile and bundle with Babel and Webpack.

Upvotes: 1

Marques Woodson
Marques Woodson

Reputation: 497

Source maps seem to be the simplest way for debugging code, for me at least.

Upvotes: 0

dashton
dashton

Reputation: 2714

Most commercial projects I've worked on in the last few years have been set up so you write ES6 code, use Webpack, Babel/ Babel-Loader, with source-maps enabled.

Debug easily then in Chrome dev tools.

Upvotes: 1

Related Questions