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?
JGB: What problems does this solve exactly?
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?
Jess is a video content creator for Learnable and Sitepoint. She digs all things social media, Web 2.0, music, film, digital media and innovation. Feel free get in touch!
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns