Human readable javascripts in chrome developer tools
JavascriptGoogle Chrome-DevtoolsJavascript Problem Overview
does anybody know whether Chrome Developer Tools can format javascripts into human readable form ? Some kind of beautifier would be handy. Let say that I'm using some JS library and I need to instantiate its object, so that I should know what to put into constructor. But searching through this huge library that has 4 lines in the Chrome Developer Tools user interface is quite annoying...
Otherwise the server side needs to take care of implementing "dev mode" that supplies javascript files that are not minified ...
Javascript Solutions
Solution 1 - Javascript
Some browsers have a Pretty print button that looks like this {} and it appears for HTML, JS, and/or CSS depending on the browser.
Chrome has it in the in the Sources tab:
Firefox has it in the in the Debugger tab
:
The position of these buttons may change, but it should always be in there
Solution 2 - Javascript
Isn't there the Pretty Print icon (looks like: { }), at least on Windows there is one, within the Scripts tab?
Solution 3 - Javascript
There is the http://jsbeautifier.org/ for online usage (you need to copy/paste).
On that site they have a link to fiddler (a web debugging proxy) and a JavaScript Formatter for it (3rd extention).