Understanding Source Maps: Simplifying Debugging
Tags: webdev, sourcemap, debugging, typescript
Published: 2023-07-12 18:05:38

Photo by [cottonbro studio](https://www.pexels.com/photo/man-in-gray-long-sleeve-suit-holding-a-pen-8369520/)

### Introduction

Today, we are talking about source maps, a crucial tool in modern web development that makes debugging significantly easier.


### What is a Source Map?

Definition of the **Source Map** from [Firefox official docs](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html):
> A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.


### Debugging with Source Maps
Let's dive into two common debugging scenarios and see how source maps can simplify the process.

- **Debugging Transpiled code**

In the past, websites/web applications used to be created  with simple HTML, CSS, and Javascript. However, in the present day, we are usually building these web applications with various development tools such as:

- JavaScript frameworks: Angular, React, Vue, Svelte, etc.
- High-level programming languages: TypeScript, Flow, etc.
- CSS preprocessors: SCSS, LESS, PostCSS, etc.

These tools then transpile our code into standard HTML, JavaScript, and CSS that browsers can understand.

Without source maps, debugging the transpiled code can be cumbersome. However, with source maps, the debugging experience becomes seamless.

- **Debugging minified code:**

Minifying is a common practice for optimizing production code. (for example, using [Terser](https://github.com/terser/terser) to minify and mangle JavaScript).

However, minification often obfuscates the code, making it challenging to debug. Source maps come to the rescue again by mapping the minified code back to its original, unminified form.


### Generating source maps

Source maps are files with names ending with .map (for example, **example.min.js.map** and **styles.css.map**). They can be generated by most build tools, for example, **Typescript**, **Webpack**, **Rollup**, etc.

Some tools include source maps by default, while others may need additional configuration to produce them.

- Demo

Here, we will be creating a web page with Typescript code transpiled into Javascript to log **"Hello World"** in the browser console when a button is clicked. To generate an error, button has not been included in the HTML file.

This is the Typesript configuration file (**tsconfig.json**) of the project and as we can see we have enabled the source map generation option in line 6.

{% embed https://gist.github.com/qur786/c85958c2450d0b503c42ce1d78a4d46f %}

The complete code of this project can be found here {% embed https://github.com/qur786/Introduction-to-source-map %}

When we transpile Typescript file **index.ts** into Javascript, besides **index.js** file it also creates one more file called **index.js.map**. This is a source map that a browser can use to recreate **index.ts** file from **index.js**.

{% embed https://gist.github.com/qur786/6ef2c8a2d7114073609c4ed5d6c4e1a2 %}

When we render the webpage in the browser using a server ([Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) VSCode extension has been used here to server the **index.html** file in localhost), we see an error in the browser console, it contains the stack trace of the error. As we can see it is pointing at **index.ts** even though the browser in no way has access to our **index.ts** file or using it in any way.


![Console tab of a browser showing stack trace of an error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sly8k2e6sbcip0g96iz.png)

If we check the browser **Sources** tab, we find we have both our Typescript and Javascript files.


![Source tab of a browser showing TS code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89vql3blsm168uj2j1pp.png)

Thus, from here we can also debug the code using our source Typescript code via the browser debugger. This may not seem to have a huge impact on debugging since the file transpiled here is very short. But eventually, for a larger and more complex project, it can ease a developer's job of debugging.


### Conclusion:


Generating a source map for your transpiled/minified code allows you to simplify debugging and trace errors back to the original source. Incorporate source maps into your development workflow to enhance your debugging experience and streamline the error-tracing process.

Happy coding!