When writing this article, I feel like I’m about to explain how to translate back from Chinese to English although I don’t understand much Chinese. You know what I mean, it’s all about a magic dictionary that helps us trace back to the language we initially better understand: the sourcemap.

This tool is so magic that not all developers can see what’s inside, but they are able to use it. Just like a dictionary that we don’t know how it works but it… just works when we use it.

In this tutorial, we’ll explore in more details how it works from the inside out. I’ve read another similar articles on the subject, especially the official specification, but I found that it wasn’t clear enough about its internal mechanism. So, I will try to explain sourcemap in my own words in this article.

As usual, following examples will be written in JavaScript and we’ll use Babel as transpilation tool.

For the same reason mentioned above, some of us do not really need to understand deeply the sourcemap to use it. Just skip this pretty long article if you’re not interested in computing history and complex mathematical concepts.

Before going deep dive into how sourcemap works, let’s get back to some mathematical concepts: Base64 Encoding and VLQ (Variable Length Quantity). I think we need to take time to completely understand what they are and how they work before digging into sourcemap.