What is Source Map in JavaScript: Simple Explanation and Example

A source map in JavaScript is a file that links the minified or compiled code back to the original source code. It helps developers debug by showing the original code in browser tools instead of the compressed version.

How It Works

Imagine you wrote a long story in your native language, but then you translated it into a secret code to make it shorter and faster to share. Later, when you want to read or fix the story, you need a guide to match the secret code back to your original words. A source map is like that guide for JavaScript code.

When JavaScript code is made smaller or changed by tools (like bundlers or compilers), it becomes hard to read. The source map keeps track of where each piece of the original code ended up in the new version. So, when you use browser developer tools to debug, the source map lets you see and work with your original, easy-to-understand code instead of the messy, compressed code.

Example

This example shows a simple JavaScript file and how a source map helps connect it to a minified version.

javascript

// Original code (app.js)
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('Alice');

// Minified code (app.min.js)
function greet(n){console.log("Hello, "+n+"!")}greet("Alice");

// Source map (app.min.js.map) links minified code back to app.js

Output

Hello, Alice!

When to Use

Use source maps whenever you transform your JavaScript code by minifying, bundling, or compiling (like from TypeScript or newer JavaScript versions). They are essential for debugging in production because they let you see the original code in browser tools, making it easier to find and fix bugs.

For example, if you use tools like Webpack, Babel, or TypeScript, enabling source maps helps you understand errors and trace problems without digging through unreadable code.

Key Points

• Source maps connect transformed code to original source code.
• They improve debugging by showing readable code in developer tools.
• Commonly used with minified, bundled, or compiled JavaScript.
• They do not affect how the code runs, only how it is displayed during debugging.

Key Takeaways

Source maps link minified or compiled JavaScript back to the original code for easier debugging.

They are crucial when using tools that change your code like bundlers or compilers.

Source maps let browser developer tools show your original code instead of unreadable versions.

Always enable source maps in development and production debugging to save time fixing bugs.