189

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

lisak
  • 21,611
  • 40
  • 152
  • 243

3 Answers3

423

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

fregante
  • 29,050
  • 14
  • 119
  • 159
fgm2r
  • 4,490
  • 1
  • 17
  • 14
  • 3
    On Windows it's a small icon that resembles -> { }. Caption says Pretty Print. – omninonsense Jun 11 '11 at 19:41
  • 1
    @with Thanks for mentioning that. I wonder why they implemented it differently on Windows/Mac OS. – fgm2r Jun 11 '11 at 19:49
  • 5
    does anyone know what happened to this Chrome feature? I think I've seen that in the past in my Chrome, but now it seems gone. – superjos Jan 29 '12 at 17:18
  • 1
    @superjos They've changed it to be the same on Mac OS and Windows now. – fgm2r Jan 29 '12 at 18:42
  • 3
    uhm, but I'm not even able to see that in context menu. Only the 'inspect item' command is there. See [screenshot](http://img692.imageshack.us/img692/1558/googlegooglechrome.png). – superjos Jan 29 '12 at 18:51
  • 1
    @superjos Hmm, weird. You seem to have quite a few items missing. And when I click on empty space in the code view I only get "Save as...". – fgm2r Jan 29 '12 at 19:19
  • 1
    Still no dice for me when I try to prettify [this javascript](http://code.highcharts.com/mapdata/custom/africa.js). [Here's a screenshot](http://i.imgur.com/nGDxCa3.png) – KyleMit Dec 17 '14 at 01:30
  • 2
    OMG **THAT** is a button – Simon_Weaver Mar 09 '18 at 01:25
6

Isn't there the Pretty Print icon (looks like: { }), at least on Windows there is one, within the Scripts tab?

omninonsense
  • 6,644
  • 9
  • 45
  • 66
3

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

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317