loading words...

Apr 19, 2019 14:36:35

Debug (Babel) ES6 From VSCode Using Breakpoints

by @valentino | 252 words | 60🔥 | 358💌

Valentino Urbano

Current day streak: 60🔥
Total posts: 358💌
Total words: 170604 (682 pages 📄)

This article is part 1 of 2.


**Stop debugging with console.log and start using breakpoints.**


I'm working on a vanilla JS project (without using any frameworks), but I couldn't renounce to use ES6 in it, it's just so useful over plain JS. That means that I had to compile my code since unfortunately not all browsers support ES6 yet, but we're getting closer. The problem is that I also wanted to debug using VSCode on my ES6 files. I got so used to debugging in VSCode with every single language I use that it just become second nature to go to debug and press run to start the application.

This time nothing happened at first. After setting up the configuration file for JS I managed to get the debugger running (also thanks tothe instruction on the VSCode page), but behold, it was only finding the compiled files and not the original ES6 files. I wanted to set the breakpoints in my original files while the browser would execute the compiled file. Some more setup was needed to make that work.

This process only works for Chrome since it's the only officially supported channel. There are similar extensions for Firefox and iOS Safari if you prefer those, but they're not officially supported so they might still have a few more bugs than the Chrome version.


The second part of the article (coming tomorrow) goes into the installation and configuration process. It is not particularly lengthy, but there are a few things to keep in mind.

contact: email - twitter / Terms / Privacy