Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

What are Javascript Source Maps?

DZone's Guide to

What are Javascript Source Maps?

· Java Zone
Free Resource

Download Microservices for Java Developers: A hands-on introduction to frameworks and containers. Brought to you in partnership with Red Hat.

What are source maps?

It’s generally a good practice to minify and combine your assets (JS & CSS) when deploying to production. This process reduces the size of your assets and dramatically improves your website’s load time.

Source maps create a map from these compressed asset files back to the source files.

This map allows you to debug and view the source code of your compressed assets, as if you were actually working with the originals.

Take a look at jQuery minified & combined code that was generated from the original. The code practically unreadable and would be difficult to debug.

But, as we all know, no matter how thoroughly you test, sometimes bugs fall will through the cracks. This is why it’s useful to debug Javascript code in production, and that’s when source maps come in handy.

what are javascript source maps

How do you use source maps?

At Logentries we use UglifyJS for minification and source map generation. UglifyJS is a NodeJS library written in Javascript.

To install Uglify JS with NPM:

npm install uglify-js -g

Minify the files and generate source maps:

uglify-js file1.js file2.js -o output.js --source-map output.map.js

The code above tells UglifyJS to:

  • Take file1.js and file2.js as input
  • Compress input files and output them to output.js
  • Generate the source map for the compressed file and output it to output.map.js

Marrying source maps and Django Compressor

Django Compressor is a great Django plugin to mark assets for minification right inside your templates:

{% load compress %}
{% compress js %}
<script src="/static/js/one.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">obj.value = "value";</script>
{% endcompress %}

Behind the scenes you can develop logic to combine and minify the files with any algorithm or third party tools of your choosing.

A great blog post by Chris Roby goes into great detail about how to extend compressor to work with UglifyJS and produce source maps. It is definitely worth the read if you’re running Django.

Browser support

Source maps are a new addition to the developer toolbox. Although the source maps spec lives in Google docs (no kidding), they’re supported by all major browsers: Chrome, Safari, Firefox, and IE11. By default, source maps are disabled so your users will not incur any unnecessary bandwidth overheads.

To enable source maps in Google Chrome, go to Developer Tools, click the little cog icon, and then make sure that “Enable Javascript source maps” is checked.

Enable source maps

That’s it.

Now, each compressed asset file contains a link pointing to its source map, and we’ve just told Chrome not to ignore them.

Demo

If you’d like to see source maps in action, sign up for a FREE Logentries account and take a look at our source code.

Logentries source code

The files highlighted in green are compressed Javascript files; the folders highlighted in blue are generated from source maps and contain the original source code that’s mapped onto the compressed files. We can set breakpoints on mapped code, inspect variables, step through, and do pretty much anything that we can with original code.

Pretty cool, huh?

Download Building Reactive Microservices in Java: Asynchronous and Event-Based Application Design. Brought to you in partnership with Red Hat

Topics:

Published at DZone with permission of Trevor Parsons, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}