Skip to main content
Home  ›  Blog

Debugging Minified JavaScript thanks to Source-Maps - LL2

Working with minified JavaScript - like when using jQuery or AngularJS in a live environment - is troubling when you want to debug something. So let me introduce you to the JavaScript Source Map. This is Lessons Learned #2 from the development of 2sxc 7.

I'll create some more posts after this to help you fully automate the creation of source-maps using Grunt, npm, Lint etc. - but first let's start with the basics:

Minified JavaScript is impossible to work with

This is what minified JavaScript looks like - you cannot possibly debug it:

Now in reality - we would like to see this in the debugger:

So even though the browser receives a minified file, when debugging we want the real thing.

Enter the JavaScript Source Map

By convention, any minified JS can have a final line telling the browser that there is help material for debugging - like this:

The file it points to looks very chaotic - it's instructions telling the browser how the minified JavaScript relates to the real deal. It looks like this - but you won't be able to reasonably read it:

Thanks to this piece of magic the browser will now show you the original code when debugging. You can even set break-points and everything. This is awesome!

Hope this helps you!

With love from Switzerland,

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler