Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

code A guest post by Joe Lennon, a technology leader from Ireland who works for Core International, one of Ireland’s leading enterprise software companies, where he leads the technology and engineering teams. He is the author of two books, Beginning CouchDB and the forthcoming HTML5 in Action, and can be reached at @joelennon.

In my previous post, Debugging Production JavaScript with Source Maps, I introduced you to the benefits of using Source Maps in your JavaScript applications. In that post, you learned how to debug your jQuery code, even when using the compressed, production version of jQuery. Now, in this post, I’ll show you how to create your own Source Maps using UglifyJS2. As a bonus, I’ll also show you how to generate Source Maps for CoffeeScript code, allowing you to view CoffeeScript source code directly in the browser.

Minifying your Source Code with UglifyJS2

To minify the JavaScript code, I will use the UglifyJS2 library. This is an npm package, so you will need to have Node.js installed in order to use it. To install it, issue the following command at a terminal prompt:

Now, let’s create a really simple app to demonstrate the benefits of generating Source Maps. Create an HTML file named index.html and add the following code to it:

Next, let’s create a JavaScript file named myfile.js with some lines of useless code in it. Toward the end of the file, we’ll include an obvious error so we can easily identify this when debugging using developer tools later on:

In the terminal window, navigate to the location of the files you have created and issue the following command to compress the source into a minified file:

This will generate a new file in our source code’s directory named app.min.js, which is a compressed version of our myfile.js source file. Next, you’ll learn about source maps.

Generating Source Maps using UglifyJS2

If you load the app in Chrome and open Developer Tools, you’ll notice an error in the console, as shown here:

source maps

If you click on the link to the app.min.js file, you’ll see that it’s difficult to determine exactly where the problem is, since it is using the minified source code. This makes debugging difficult. Let’s try again, but this time by asking UglifyJS2 to also generate a Source Map.

If you reload the app in Chrome, this time you’ll notice that Developer Tools reports the error on line 13 of myfile.js, even though the app is specified to load the minified file. The minified file was served for the page, but when we debug using Developer Tools, it fetches the uncompressed source and uses the Source Map to correlate the code from the compressed source accordingly. This makes debugging much simpler.

source maps

As you can see, Source Maps make debugging your apps much easier, and using UglifyJS2 it’s really simple to generate a Source Map at the same time as compressing your code. Next, let’s see how we can generate source maps for CoffeeScript source code, allowing you to debug CoffeeScript code directly in Chrome.

CoffeeScript and Source Maps

CoffeeScript is a compile-to-JavaScript language that abstracts away a lot of the general nuisances in the language. It also provides a cleaner and simpler syntax that is not all that different from the likes of Ruby and Python. Support for generating Source Maps is available in CoffeeScript 1.6.1 and above.

To use CoffeeScript, you’ll need to install it. At the terminal, issue the following command:

Now, let’s recreate the previous example app, this time using CoffeeScript. Create a new directory and copy the index.html file from the previous example into it. Next, create a file named myfile.coffee and add the following code to it:

To compile the CoffeeScript code to JavaScript, and create a Source Map along with it, issue the following command in the terminal:

This will create two files in your app’s directory: myfile.js and myfile.map. Next, we’ll use UglifyJS2 to compress the JavaScript output, and we’ll use a special flag to read in the CoffeeScript Source Map and pass this through when UglifyJS creates its Source Map.

This will create the desired app.min.js file, and an accompanying app.min.map file. If you load the app in Chrome, and launch Developer Tools, you’ll notice that it reports an error on line 7 of myfile.coffee. When you click on the link to the file, you see the CoffeeScript source code, as illustrated here:

source maps

Being able to view and debug the CoffeeScript code directly in the browser makes it much more feasible to use CoffeeScript as part of your JavaScript development workflow.

Summary

In this post, you’ve learned how to create your own Source Maps for JavaScript and CoffeeScript source code. In a future post, I’ll introduce you to CSS source maps and how to create them to map your compressed CSS production code back to their original CSS, LESS and Sass source code.

See below for Source Map and CoffeeScript resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Smashing CoffeeScript is a full-color, practical book that explains CoffeeScript language, syntax, and processes, and Source Maps, and will soon have you producing concise and quality code. Ultimately, you’ll create RIAs and mobile apps faster, with less hassle.
CoffeeScript Application Development gives you an in-depth look at the CoffeeScript language, all while building a working web application. Along the way, you’ll see all the great features CoffeeScript has to offer, and learn how to use them to deal with real problems like sprawling codebases, incomplete data, and asynchronous web requests.
Jump Start CoffeeScript lays out the basics of the CoffeeScript language, its syntax, and the interesting features that set it apart from JavaScript. It should satisfy anyone with an intermediate level of understanding of JavaScript who needs a conceptual and practical introduction to CoffeeScript.

About the author

photo Joe Lennon is a technology leader from Ireland. He works for Core International, one of Ireland’s leading enterprise software companies, where he leads the technology and engineering teams. He has contributed over 20 articles and tutorials to IBM developerWorks, and is an author of two books, Beginning CouchDB and the forthcoming HTML5 in Action. He can be reached at @joelennon.

Tags: CoffeeScript, Javascript, Source Maps, UglifyJS, UglifyJS2,

Comments are closed.