Source maps play a vital role in debugging minified JavaScript by linking generated code back to its original source. When you encounter an error in a minified file like `bundle.min.js`, the source map translates that error to the exact line in your original TypeScript file, enabling easier troubleshooting. The process involves three main stages: transpilation (TypeScript to JavaScript), bundling (combining files), and minification (compressing code). At each stage, source maps maintain a connection to the original code. The structure of a source map is defined in a JSON format, typically with a `.js.map` extension. Key components include the version number, the generated file name, sources (original file paths), and the mappings string. The mappings field uses Variable Length Quantity (VLQ) encoding to efficiently represent the relationship between positions in the minified code and their original locations. Instead of storing absolute positions, source maps encode small differences, which keeps file sizes manageable. Segments in the mappings string represent these positional mappings. A segment can contain one value for unreferenced columns or four to five values that map a position in the minified file to its corresponding location in the source file. Semicolons in the string denote line breaks, allowing the decoder to understand which line a segment belongs to. This structure makes it possible to effectively track changes and variable renaming while minimizing data size. Understanding how source maps work enhances the debugging experience, allowing developers to work more efficiently with compacted code.