How can I beautify JavaScript and CSS in Firefox / Firebug?

Question

Is there a way to beautify JavaScript and CSS in Firebug?

I'd like to be able to view formatted JavaScript code instead of the compressed version :).

Ajay

Similar question here: #822619 – Disquisition

Not for Firefox, but... Chrome developer tools has this feature built-in. On the script tab, bottom left bar has a set of icons... the "{}" icon is "Pretty print" and does this conversion. – Eastwardly

@JonAdams Thank you. That is exactly the answer to the question I was going to ask. Here is an upvote. – Fermium

Possible duplicate of Is there a plugin that allows me to automatically unminify the Javascript included on a site? – Beverle

Answer 1

CSS is already beautified in Firebug, as clearly seen by comparing the CSS tab or CSS pane with the raw source.

JavaScript, alas, is not. The best you can do, for now, is to paste the code into something like http://jsbeautifier.org/ .

However, if you write a Firebug extension that does this, you will have all of our gratitude. ;-)

Activism

Answer 2

There is now a plugin that intercepts JavaScript downloads and deminifies it at that point.

Unfortunately, the way it hooks into Firefox means that it applies to all JavaScript downloads and just not specific ones and the JavaScript files have to be served with an appropriate MIME type.

https://addons.mozilla.org/en-US/firefox/addon/247565/

Bronwen

Also, no support above Firefox 3.6. – Mastoiditis

should be good up to firefox 5.x now. You may also want to look at new versions of the chrome browser that have this feature built-in. Because they use the parse-tree they won't break your code during obfuscation and it will have very little performance impact. – Bronwen

Update: The plugin does not work in Firefox 18. Fortunately I only use Firefox for debugging Firefox-specific issues, but this is still a big problem for those issues. – Noll

@ax., perhaps it differs by OS. I'm on a Mac. – Noll

@BrianMortenson not working on Firefox Developer Edition at the time of writing in Windows & Linux – Biller

The link is broken: "Oops! We can’t find that page" – Cholon

Answer 3

Firefox Developer Tools has:

• "Prettify Source" button: braces {} icon on bottom left

• "Auto Prettify Minified Sources" setting: turns Prettify Source on by default.

  To enable it: go to the engine icon on top right of the Debugger tab, not the global settings engine.

Tested on Firefox 42.

Member

Firebug 2.0.13 (FF43.0.1) has also an {} icon in the script-tab, next to the script-name. – Orrin

I have Firefox Developer Edition 74.0b5 (64-bit) and I don't see this icon {} in the Debugger pane. Do you guys know if it was removed? Or how to enable it? – Gingras

It looks like Auto Prettify has been removed as of v52. – Epitasis