Setting up source maps in react project with typescript
Introduction
Debugging and testing are two important phases of software development. A software developer spends a considerable amount of time testing and debugging his/her module or project.
But as soon as the module leaves the developer desk it tends to have different behaviors due to several factors in different environments. It’s hard for a developer to debug the modules in different environments away from his development machines. In such situations, special symbol files are required; for the .NET environment PDB files, and web applications source maps are needed.
Definition
Normally the client-side code is compiled into minified versions for execution but it tremendously reduces the readability of code, which makes it harder to debug and read.
At this point, the magic of source maps comes into action to make life easier.
It’s a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map that holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location.
How to generate source maps with typescript
Every typescript project has a special configuration file named: tsconfig.json. This file contains the settings or properties according to which typescript code will be compiled into JavaScript code. To generate source maps, just enable the source maps property
```config
“noEmit”: false,
“source-map”: true
```
This small change in the configuration and recompiling means a lot in terms of debugging and reading code in development environments.
Source maps are usually generated with the same name as the compiled file with one distinction, the name of source maps file will have the keyword “map” in it e.g. App.js.map
Where one can see the difference
- There will be “.map” files present in the build folder
- Chrome developer tools are the playground for any frontend developer, here under the “sources” tab, one can easily able to find the file name one wants to view. Now here comes the magic of source maps that one can able to read the code clearly as reading in some IDE and also able to place the debug point at any line.
Happy debugging :)