7

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

RollRoll
  • 8,133
  • 20
  • 76
  • 135
  • 2
    possible duplicate of [Add indent to a plain javascript code string](http://stackoverflow.com/questions/10366985/add-indent-to-a-plain-javascript-code-string) – Felix Kling May 29 '12 at 00:37
  • 1
    At least it wasn't obfuscated as well ... I hope O.o Also check the line-endings. Some backwards "Windows editors" will not correctly honor "just \n" lines ... –  May 29 '12 at 00:44

1 Answers1

22

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.

Joseph
  • 117,725
  • 30
  • 181
  • 234
  • Joseph, I'm wondering how you always answer questions that fast, that went through beautifully, and thanks for the additional information. – RollRoll May 29 '12 at 00:41
  • 2
    @EdwinSnts: Like many of the Javascript experts here, he knew the answer off the type of his head and is (presumably) a fast typer. :) You may also be interested in [jsFiddle](http://jsfiddle.net/) for beautifying and further debugging your code. – Elliot Bonneville May 29 '12 at 00:46