What are Source Maps all about?

In the past few weeks we’ve introduced you to some JavaScript frameworks. Now seems a suitable time to bring Source Maps to your attention!

If you’ve ever found yourself wishing there was a hassle-free way to keep your clientside coding simple to debug and read after it’s been combined and minified, then Source Maps is here to make your life that much easier! Basically, this exists to map a combined/minified file back to an unbuilt state.

Since Source Maps is still in its early days, it can benefit from your help! Think you could put it to good use? Do you think it’s worthy of further development?

JGB: I’m here with Michael Mifsud, who is a web developer at 99designs, and Michael is going to tell us all about Source Maps today. Can you start off by telling me what exactly are Source Maps?

Michael: Source Maps are just a name for a way of mapping two equivalent files. If you have a file that has preprocessed or otherwise changed into another file, it’s able to map the outputted file to the source file.

JGB: What do you use Source Maps for?

Michael: The main use for it now is mapping minified JavaScript to the original source JavaScript. So you can always have the best performance production, have the ability and the context of your source files when you’re looking at them in a debugger.

JGB: What problems does this solve exactly?

Michael: Well, we all know that production code mysteriously breaks when it never breaks in development. Trying to debug 30,000 characters in a long single line JavaScript file is a nightmare. With Source Maps now you can dig into it and see what it looked like when you wrote it and have a bit of context.

JGB: So why exactly would someone want to be able to live debug anyway?

Michael: Well you can never control when things break. You’re often able to reproduce something in production that you can’t reproduce in development. So it gives you the ability to, in that moment, with the full context, figure out what’s gone wrong.

JGB: So who can use Source Maps then and what skills do you need to have to use them?

Michael: Essentially it’s for anybody who as part of their build process is minifying and concatenating files. Essentially you lose all context. It becomes one big jumble. So any kind of sizable web site will be doing this as a step. The concept of live debugging is for anybody.

But doing it in a production environment is incredibly hard. If you have the Source Maps you’re able to see what you have created yourself. Creating the Source Maps itself is a bit of a chore. It’s to be done automated, it’s not something you’d generally do manually. So if you have a DevOps crew or some sort of deployment process it’d be part of that.

JGB: So if Source Maps are so useful, why aren’t they currently being used?

Michael: As with anything, it takes time. There’s infrastructure changes that need to made to automate the creating of Source Maps, and the software that generates them is few and far between. As with all the new HTML5 stuff it’s a living spec. It’s in the third version now and it often changes. So people aren’t willing to invest a lot of time into software that may change.

But you can use third-party libraries. Right now it’s limited to Google’s closure compiler which is a Java library, and Java is not something that comes in a lot of modern web stacks or web development stacks. So it does take time and effort on the company’s behalf to get this into place. But there are people using it. It’ll grow as it gets more stable and easier to use.

JGB: So what’s the future for Source Maps then?

Michael: Well, right now, the main use is mapping minified JavaScript to normal JavaScript, because it’s a one-to-one mapping. Ideally in the future you’ll be able to map any preprocessed file from a CoffeeScript or SASS to the generated CSS or JavaScript. It’s a bit of a way off now, the issue there is that there is no longer a one-to-one mapping. In SASS you have things like mix-ins where there’s no longer direct line-to-line correlation, and there’s logic involved. It’s kind of the next step or next iteration of Source Maps.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Eddie

    Having used source maps with compiled executables in Delphi, I would say that it makes sense to use them for compiled/minified JS. However, I was a bit dissatisfied with this article because there were no references to what tools to use or how to actually create them. A followup article on this would be greatly helpful.