Human readable javascripts in chrome developer tools

javascript google-chrome-devtools
lisak picture lisak · Dec 19, 2010 · Viewed 47.1k times · Source

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 ...

Answer

fgm2r picture fgm2r · Jun 11, 2011

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:

Chrome 40 pretty print button

Firefox has it in the in the Debugger tab

Firefox 35 prettify source button:

The position of these buttons may change, but it should always be in there

Related questions

How do you launch the JavaScript debugger in Google Chrome?

When using Google Chrome, I want to debug some JavaScript code. How can I do that?

Read More
How do I debug Node.js applications?

How do I debug a Node.js server application? Right now I'm mostly using alert debugging with print statements like this: sys.puts(sys.inspect(someVariable)); There must be a better way to debug. I know that Google Chrome has …

Read More
jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)

I'm seeing error messages about a file, min.map, being not found: GET jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found) Screenshot Where is this coming from?

Read More