Debugging a web application built using WebPack
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
Unexpected token imports
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.
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
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.
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.