Debugging bundled and transpiled code using VS Code Debugger

TLDR

Debugging a web application built using WebPack

In a recent project that I’ve been working on assigned by my professor, he showed us really cool developer tools. In particular, one of them was called WebPack. The idea is to have a “compiler” that packs an entire web application into a single JavaScript file, which can be executed by browsers. This is important if one is running code that uses transpilers such as babel.

While this new tool is truly innovative and offers great advancements in software development workflow, the question begs “How do I debug these apps?”

The Problem: Web apps that have files packed needs to be compiled first

Based on my limited knowledge of Node.JS, the straight forward approach of debugging any Node.JS app is to use a powerful editor such as VSCode and add the configuration for launching the program by targeting index.js or app.js.

A problem you will quickly encounter is if the application uses babel and uses JavaScript features that are not yet implemented in Node.JS, VSCode will throw an error. For example:

Unexpected token imports

If the code is packed with Webpack using all JavaScript features supported by Node.JS, then the app just wouldn’t start with no error messages given.

And if that didn’t work, the next option would be to use the Launch via NPM method.

In order to debug apps like this, a source map is required to allow the debugger to reference where in the individual source files, that single line is referring to. This is  generated by WebPack (with a special option enabled) when the packing takes place.

Furthermore, advanced JavaScript features that are not yet available on the current version of Node.JS also needs to be transpiled first, which occurs when the code is assembled. Usually, this involves having the web application already running (i.e. via webpack-dev-server).

Attempt using Launch via NPM method resulted in the following:

Solution: VS Code Google Chrome Debugger plugin

After consulting with Professor Humphrey, he pointed me to VSCode Chrome Debugger plugin. The idea is start the app in the terminal as usual, then have VSCode use an instance of Google Chrome as a proxy to run the app.

Once the code hits a break-point, Google Chrome will report back the current state of the app and the results will be displayed on VS Code as if you’ve never left VS Code at all. It truly is magic.

Step 1: Set your desired breakpoints

I like setting the breakpoints ahead of time, but doing this step last can’t hurt either.

Step 2: Configure VS Code Debugger

Click on the Debugger icon and in the drop down menu next to the word DEBUG, select Add Configuration, then select Chrome: Launch.

Check to ensure that the port in the url section matches with your app’s configurations.

Step 3: Launch the app in terminal

Bring up your terminal and launch your web application. Typically, this maybe

yarn start
yarn debug
npm start
npm run debug

Step 4: Launch Google Chrome from VSCode Debugger

From VSCode’s debugger page, press the green arrow button to launch chrome.

Once the code hits the break-point you’ve specified, VSCode will activate and pause on that line of code for you to inspect! Happy debugging.

Other solutions

I wrote about this method because it was the easiest method for me to learn. There are also other methods to debug web apps like such outline by Microsoft here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s