Skip to content
Aback Tools Logo

Source Map Generator

Generate Source Map v3 files from your original JavaScript source and its minified or obfuscated version. The tool tokenizes both inputs, aligns matching tokens to create accurate position mappings, and encodes them using Base64-VLQ for a valid source map JSON. Includes identifier tracking, optional sourcesContent embedding, mapping preview table, and raw JSON viewer. All processing is local and private.

Source Map Generator
Generate Source Map v3 files from original and minified JavaScript code. Enter your beautified source and its minified/obfuscated version to create VLQ-encoded mappings that map positions back to the original code.
67
Mappings
28
Identifiers
1
Source Files
1.6 KB
JSON Size
Source Map Structure
Version:
3
Output file:
bundle.js
Sources:
[src/index.js]
Names:
[28 names]
sourcesContent:
Included
Mappings length:
389 chars
21 original lines → 1 generated line28 identifiers tracked

Why Use Our Source Map Generator?

Source Map v3 Generation

Generate standard Source Map v3 files from your original and minified JavaScript code. Produces valid VLQ-encoded mappings, source file references, names array, and optional sourcesContent for complete source reconstruction. Compatible with browsers, bundlers, and debugging tools.

100% Browser-Local Processing

All source map generation happens entirely in your browser. Your original source code and minified JavaScript never leave your device. No uploads to any server, no signup required, and no usage limits. Completely free forever.

Detailed Mapping Preview

View a complete mapping table showing every generated position and its corresponding original file, line, and column. Explore the raw source map JSON, inspect the decoded VLQ segments, and verify mapping accuracy before downloading or copying.

Instant Generation with Stats

Source maps are generated in real-time as you type or paste code. See immediately how many mappings were created, the source map file size, compression ratio, and the number of source files and named identifiers. Copy or download the generated .map file with one click.

Common Use Cases for Source Map Generator

Debugging Obfuscated Production Code

Generate source maps for your obfuscated JavaScript bundles so you can debug production issues with original variable names, file structure, and comments. Connect the source map to your error monitoring tool (Sentry, Datadog, New Relic) to get readable stack traces from minified production errors.

Obfuscation Pipeline Integration

When applying JS obfuscation (variable renaming, string encoding, control flow flattening) as part of your build pipeline, generate source maps that map the obfuscated output back to the pre-obfuscated code. This allows debugging with readable code while shipping protected JavaScript.

Browser DevTools Debugging

Attach generated source maps to your deployed JavaScript bundles so Chrome DevTools, Firefox Developer Tools, and Safari Web Inspector can display original source code in the Sources panel. Set breakpoints, inspect variables, and step through your original code even when the browser is running minified JavaScript.

CI/CD Source Map Artifacts

Generate source maps during your CI/CD pipeline and upload them to your error tracking service without exposing them to end users. The tool helps you understand the source map format and test your generation pipeline before integrating with your build tools.

Source Map Format Education & Research

Understand how Source Map v3 works by seeing VLQ-encoded mappings generated in real-time from your own code. The tool is excellent for learning about the source map format, VLQ encoding, line/column mappings, and how names and sources are referenced.

Manual Stack Trace Deobfuscation

If you have an obfuscated/minified production stack trace but lost your source maps, manually reconstruct the mapping by pasting your original and minified code. The generated source map can be used with the Source Map Unminifier to recover the exact original code positions.

Understanding Source Map Generation

What is a Source Map?

A source map is a file that maps transformed, minified, or obfuscated code back to its original source. The Source Map v3 format uses Base64-VLQ (Variable Length Quantity) encoding to store position mappings compactly. Each mapping records the generated line/column and its corresponding original file, line, and column, plus an optional identifier name. When a browser or debugger loads a source map alongside minified code, it can display the original source code with correct variable names, file organization, and comments — making debugging production code feasible.

How Our Source Map Generator Works

  1. Input Original Code: Paste your original, readable JavaScript source code into the left panel. This is the pre-minification/pre-obfuscation version that you want to map from.
  2. Input Minified/Obfuscated Code: Paste your minified or obfuscated JavaScript code into the right panel. The generator will compare each line and character position to create accurate mappings between the two versions.
  3. Source Map Generation: The tool generates a valid Source Map v3 JSON file containing VLQ-encoded mappings, a source file list, a names array for identifiers, and optionally the full original source content (sourcesContent) for complete reconstruction. You can copy the JSON or download it as a .map file.

Source Map v3 Format Details

  • Version: The source map format is currently at version 3, defined by the Source Map Specification. The version field is always 3.
  • Mappings: The mappings field contains VLQ-encoded strings separated by semicolons (for line breaks) and commas (for individual segments within a line). Each segment encodes up to 5 values: generated column, source index, original line, original column, and name index — all stored as relative offsets for optimal compression.
  • Sources: An array of original source file paths referenced by index in the mappings. You can specify custom source file names for your project structure.
  • Names: An array of identifier names (variable names, function names, etc.) that appear in both the original and generated code, referenced by index in the mappings.
  • sourcesContent: An optional array containing the full original source code for each source file. When present, debuggers can display the exact original code without needing access to the original files on disk.
  • VLQ Encoding: Base64-VLQ is a compact variable-length encoding where each character represents 6 bits (0-63). The continuation bit (bit 6) signals whether more characters follow for the same value. The sign is encoded as the least significant bit (1 = negative, 0 = positive), allowing negative offsets in relative mappings.

Privacy, Security & Availability

Your JavaScript code is processed entirely within your browser. No code is ever uploaded to any server, stored, logged, or shared with third parties. The tool requires no account creation, no signup, and imposes no code size limits. It is completely free with no premium tiers, usage caps, or hidden charges. You can use it as often as needed for generating source maps, debugging, or educational purposes.

Frequently Asked Questions About Source Map Generator

A source map is a file that maps transformed, minified, or obfuscated JavaScript code back to its original source. It allows debuggers and error monitoring tools to display original source code even when the browser is running minified JavaScript. Generating source maps is essential for debugging production JavaScript, integrating with error tracking services like Sentry, and maintaining developer productivity when deploying optimized code.

Source Map v3 is the current standard format for source maps. It uses Base64-VLQ (Variable Length Quantity) encoding to store position mappings compactly. The format includes: version (always 3), file (output filename), sources (original source file paths), names (identifier names), mappings (VLQ-encoded position data), sourcesContent (optional original source code), and sourceRoot (optional path prefix). The VLQ encoding allows each mapping segment to represent up to 5 values (generated column, source index, original line, original column, name index) using relative offsets for optimal compression.

VLQ (Variable Length Quantity) encoding represents numbers using a variable number of Base64 characters. Each character encodes 6 bits, with the 6th bit (continuation bit) indicating whether the value continues in the next character. The sign is encoded in the least significant bit (0 = positive, 1 = negative). This allows small numbers (which are common in source map position offsets) to be encoded with just 1-2 characters, while larger numbers can use more characters. The encoding is self-terminating and extremely compact for the typical patterns found in source maps.

The generator works by comparing the original (beautified) JavaScript source with the minified/obfuscated version. It tokenizes both inputs and aligns them by content to create position mappings. For each token found in the minified output, it records the generated line/column position and the corresponding original file, line, and column. Identifiers (variable names, function names) are tracked in the names array. The mappings are encoded using Base64-VLQ with relative offsets for maximum compression per the Source Map v3 specification.

sourcesContent is an optional field in the source map that embeds the full original source code for each referenced file. When included, debuggers and deobfuscation tools can display the exact original code without needing access to the original files on disk or a network connection. This is critical for error monitoring services and offline debugging. The downside is that it increases the source map file size since the original source is embedded inline.

Yes. Generated source maps are fully compatible with Chrome DevTools, Firefox Developer Tools, and Safari Web Inspector. To use a source map, either place the .map file alongside your JavaScript file (e.g., script.js and script.js.map), add a //# sourceMappingURL=script.js.map comment at the end of your JavaScript file, or embed the source map as a data URL using //# sourceMappingURL=data:application/json;base64,...

The generator handles this automatically. Source maps are designed to map code that may have completely different line structures — for example, a 100-line beautified file might minify to just 1-3 lines. The generator creates mappings for each token or logical segment, recording the exact original line/column for each generated position. Lines that have no corresponding original mapping (e.g., purely synthetic code) will simply have no mapping entry, which is valid per the specification.

Absolutely. All source map generation happens entirely within your browser. Your original source code and minified JavaScript never leave your device and are never sent to any server. No account is required, no data is stored, and no tracking occurs. This makes the tool safe for generating source maps for proprietary JavaScript code, commercial applications, or security-sensitive projects.

Bundlers like Webpack, Rollup, Vite, and ESBuild generate source maps automatically during the build process. This tool is designed for cases where you need to generate a source map separately — for example, if you lost your original source maps, if you have custom obfuscation that your bundler doesn't support, if you want to understand the source map format by seeing it generated from your own code, or if you need to create a source map for manually minified or concatenated scripts.

Yes, 100% free. There is no signup, no premium tier, no usage limits, and no code size caps. The tool runs entirely in your browser and will always be free to use on Aback Tools.