Question

a nice former developer wanted to make our lives harder before leaving our company and developed a whole javascript UI framework in one single line. I mean…probably he messed up after the development…

the point is… there are a lot of bugs I need to fix.. and I am wondering how you guys would approach to automatically indent the whole code.

thanks

Answer 1

a whole javascript UI framework in one single line

The process of turning readable development code into gibberish production code is called minification/uglification. In a gist, this process optimizes the code for production use. Depending on the implementation, it could do (but not limited to) the following:

• compress the code by removing whitespace (which turns it into a one-liner)
• compress by renaming variables and functions into shorter ones
• compress syntax by using alternative syntax (like ifs to ternaries, for to while)
• remove dead/unreachable code

how you guys would approach to automatically indent the whole code

There are a lot of tools for this task:

• You can use JSBeautifier, an online tool for formatting JS and HTML. Handy for a quick format. There’s a plugin for that if you happen to use Sublime Text editor.

• If you use Grunt, there’s a JSBeautifier task built to perform the same functionality as the online version of JSBeautifier.

• Chrome has a pretty print option in the Sources tab of dev tools. This indents the compressed code on the debugger (it does not modify the file).

• If the file happens to have an accompanying source map (a file with the same name as the file of the code, but has a *.map extension), then you’re in luck. A source map is like a dictionary containing a mapping of the raw names with the compressed names. Source maps are supported in Chrome and Firefox dev tools, but not enabled by default. If you enable it, the browser will try to download them (assuming they are contained together with the minified file) and use them for view in the Source tab of the developer tools.