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.
At the time of writing this post, Source Maps were available in the developer tools of the latest versions of Google Chrome, Mozilla Firefox and Apple Safari browsers.
What are Source Maps?
Source Maps are essentially a way of mapping the lines and columns of your compressed, production source code, back to their original locations in the corresponding uncompressed source files. Modern browsers that support Source Maps can then continue to load the page as normal using the production file, but when you launch developer tools it will also download the Source Map and uncompressed source. When an error occurs, it will then show the line numbers and code from the uncompressed, development source – making debugging as easy as pie.
Source Maps in action
The best way to learn how Source Maps work is to see them in action. Let’s debug some broken jQuery code to see the difference Source Maps make. First, let’s see what debugging looks like without Source Maps. In the figure below, I’ve loaded the compressed, production jQuery release, but the Source Map and the uncompressed, development code is not available.
The error in this example points to a problem on line 6 of
jquery-2.0.3.min.js. When you click on the link to drill into the source, you are taken to the unreadable minified code, which makes debugging pretty difficult:
Let’s see what happens when we provide a Source Map and the original source code to the browser. To do this, I downloaded the uncompressed, development version of jQuery and the map file from http://jquery.com/download/. The browser will continue to load and use the production version to render the page, but when you use developer tools to debug the app, it will also load the development version and use the Source Map to translate the location of the error in the production file to its corresponding location in the development file.
As you can see, the error now points to a problem on line 7,845 of
jquery-2.0.3.js. Drilling into the source, you can see the original source line where the problem occurred, as shown here:
With Source Maps, you can see exactly where in the original source code the error occurred, and this makes debugging and solving the problem much more straightforward.
Note: If you load jQuery from their Content Delivery Network (CDN), the Source Maps will be made available by default. If you load jQuery locally, you will need to make sure that you download the Source Map and both the production and development versions of jQuery in order to get the benefits of Source Maps.
See below for Source Map and jQuery 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.|
|jQuery HOTSHOT walks you step by step through 10 projects designed to familiarize you with the jQuery library and related technologies. Each project focuses on a particular subject or section of the API, but also looks at something related, like jQuery’s official templates, or an HTML5 feature like localStorage.|
About the author
|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.|