DEV Community

Valerii Petryniak
Valerii Petryniak

Posted on

Source Maps

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs