Have you ever wondered how source maps actually work?

Source map is basically a mapping of position from your output file(for example you bundle) to your source(original file). Specifically mapping start positions of your identifiers.

Source map stores start position of some identifier in your output file and start position of the same identifier in your source file(simplified explanation). But does that in very compact way by storing arrays of numbers in VLQ format which needs less space than storing raw numbers as strings.

This concept not only helps to debug your code in browser by editing your source code but more importantly helps you find exact place in your source code when error occurred in production by mapping error stack trace line:column to according line:column in your source file.

Tools such as Sentry use this approach to help you debug your app.

More about it: https://youtu.be/NkVes0UMe9Y
https://en.m.wikipedia.org/wiki/Variable-length_quantity