Skip to main content

Source Maps & Debugging

In this tutorial, we'll learn about source maps, which help make debugging your TypeScript code much easier. We'll also explore how to configure source map options in the tsconfig.json file.

What are Source Maps?​

Source maps are files that map your compiled JavaScript code back to your original TypeScript source code. This allows you to debug your TypeScript code directly in your browser's developer tools, even though the browser runs the compiled JavaScript version.

Generating Source Maps​

To generate source maps, you need to enable the sourceMap option in your tsconfig.json file. Set it to true:

JSON
{
  "compilerOptions": {
    "sourceMap": true
  }
}

When the TypeScript compiler compiles your code, it will generate a .js.map file for each .ts file. These map files will be used by your browser's developer tools to display the original TypeScript code during debugging.

Inline Source Maps​

Instead of generating separate .js.map files, you can choose to generate inline source maps. Inline source maps are embedded directly in the compiled JavaScript files as Base64-encoded strings.

To enable inline source maps, set the inlineSourceMap option to true in your tsconfig.json file:

JSON
{
  "compilerOptions": {
    "inlineSourceMap": true
  }
}

Note that you should not enable both sourceMap and inlineSourceMap at the same time, as they are mutually exclusive.

Including TypeScript Source Code​

By default, source maps only include the file names and line numbers of the original TypeScript code. If you want to include the actual TypeScript source code in the source maps, enable the inlineSources option:

JSON
{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true
  }
}

This will embed your TypeScript code directly in the .js.map files (or in the compiled JavaScript files if you're using inline source maps). This can be useful if you're working with a team or distributing your code, as it ensures that the original TypeScript code is always available for debugging.

Conclusion​

In this tutorial, we've explored source maps and their usefulness in debugging TypeScript code. By configuring the tsconfig.json file, you can generate and customize source maps to fit your debugging needs.