Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript source map : keeping map file local only to debug production javascript

I would like to debug production website, but I don't want to upload the map file on the server (for privacy reason, because it is public right ?).

Is it possible ?

like image 734
Laurent Debricon Avatar asked Mar 27 '13 14:03

Laurent Debricon


People also ask

Should you use source maps in production?

Most JavaScript and CSS sources are usually minified and source maps serve as a memory map to the compressed files. It's generally a good practice to minify and combine your assets (Javascript & CSS) when deploying to production.

How do source map files work?

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.

What are JavaScript Sourcemaps?

A Sourcemap is a file that maps from the transformed source to the original source. It is a mapping between the generated/transpiled/minified JavaScript file and one or more original source files. The main purpose of Sourcemaps is to aid debugging.

How do I enable source maps?

To enable source maps in Google Chrome, go to Developer Tools, click the little cog icon, and then make sure that “Enable Javascript source maps” is checked. That's it.


2 Answers

I don't believe any browsers currently allow loading source maps ondemand from local files, so you have to put the sourcemaps online somehow.

One solution could be to create a .htaccess file (or something similar, if you aren't using Apache) that restricts access to the sourcemap (and the original source files) to clients that aren't from your local network.

You should realize though, that if you want to prevent access to the sourcemaps for security reasons, then all you will achieve is a false sense of safety. Javascript is public, and even if it is minified and encrypted, it is fairly easy to unencrypt it. Do not put any sensitive data in your javascript. Not even if you minify and encrypt it.

like image 101
AHM Avatar answered Sep 21 '22 00:09

AHM


Following might be useful for you

Multi-level Source Maps - The CSS Ninja

The link also explains using UglifyJS2 with which an input source map can be specified. However, I have not tested with a local input source

Also, you can try hosting the file on local and changing your hosts file to point something like local.mydomain.com to localhost. And then specify local.mydomain.com/js/my-orig-js-file.js as the Source Root

like image 20
Om Shankar Avatar answered Sep 21 '22 00:09

Om Shankar