All about Source maps

Source Maps

Be it JS or CSS modules everyone minifies them before releasing it to production, this process is crucial and necessary for any Web page/app so that the page can be served faster.

And let's say you also did the same. But what happens when the code you released has a bug that happens only in a certain scenario in production and you want to quickly figure out what's happening?

The only way to identify that will be through debugging using dev tools. And now you are posed with a daunting task of debugging the minified files. Fortunately, CSS debugging doesn't pose much of difficulty because the developer tools easily split out the rules based on the order of importance and all you have to do is remember the selector and search for that in your CSS or SCSS/LESS files. (This is totally under the assumption that you are not hashing your CSS rules). But JS, on the other hand, is not that simple because most of the time your minifier gives alias names to your variables and functions making it harder to recognize. And if you are using compilers like babel and typescript your source code is already transformed to the new source code.

In order to resolve these type of issues. Browser developers added a feature called Source Maps, where your original source file is mapped to the transformed code. This feature makes it easier for developers to debug and identify the issues in their original file, thus reducing the overall burden when debugging in the production environment.

So now after understanding the benefits of source map, You thought that its best that you also include them in your environment and started enabling them, and suddenly you come across a question when the source maps are loaded? Is it when the page is loaded or when dev tools is opened?

Source Maps are of two types of inline source maps and network source maps. Inline source maps are appended directly to your build files in the form of a base64 string and they are loaded when the page is loaded. But the source mapping doesn't happen until the developer tools is open. Network source maps, on the other hand, are links to your binary source map files (example for main.js, source map generated will be main.js.map) which are loaded only when the developer tool is opened. So you need to make sure that you are using Network source maps and not inline source maps, to avoid file size issues.

Now that you have a clear understanding of when source maps are loaded. You enabled it in your staging environment and showed it to your Supervisor for approval. But your Supervisor turns down the idea citing that the minified and transformed code provides some degree of obfuscation which the organization wants on your webpage.

Don't worry, there is a neat trick to get the approval of your Supervisor and Organization with their terms. All you need to do is put your source map in your virtual private network and use that link on the network map. By this way, the source map will be available to debug only within your organization and not to the outside world.

And finally, you have got your approval and have rolled out the source map changes to the production code and started debugging happily

Reference links:
https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ https://stackoverflow.com/questions/44315460/when-do-browsers-download-sourcemaps/44316255#44316255
Written on April 19, 2019