Human readable javascripts in chrome developer tools
https://stackoverflow.com/questions/4484407
-
11-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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 ...
Solution
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
OTHER TIPS
Isn't there the Pretty Print icon (looks like: { }), at least on Windows there is one, within the Scripts tab?
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).
