Debug JavaScript

Out of the box, the JavaScript files in the /assets/js/src folder are compiled and minified before being placed in the /assets/js folder and served to the browser. This is sort of similar to what happens with CSS, but with some crucial differences.

First: all your JavaScript (and especially modern ES 2015 and ESNext) runs through Babel, which re-compiles it to work with older browsers. (In other words, the script that’s served to the browser is not the same as the script you wrote.)

Second: JavaScript minification is not just about removing spaces and commas. It actually involves rewriting the scripts to make it as small as possible, which makes it pretty much unreadable for humans — even if you un-minify it.

This is important, because in some rare cases, the script you write doesn’t work as expected once it’s gone through the Babel compilation, and you need to be able to figure out what’s going on in the compiled script.

For this reason, you can configure WP Rig to -not- minify JavaScript files during the build process. This is purely for development purposes, but it can be a useful tool for JavaScript debugging.

In this video, we review where and how to turn off JavaScript minification.

(Hint: it is similar to turning off minification for CSS. You can find the settings in config.default.json…but you cut, copy, paste and adjust those settings in your config.json file.

More from this course: