CODEWITHSUNDEEP
firefoxfirebugcode-formatting
Lance Pollard
Lance Pollard

Reputation: 79248

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

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

Upvotes: 42

Views: 27323

Answers (3)

Ciro Santilli OurBigBook.com
Ciro Santilli OurBigBook.com

Reputation: 382802

Firefox 134

"Pretty print source" {} button under the source code:

enter image description here

Firefox 42

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.

enter image description here

Tested on Firefox 42.

Upvotes: 17

benmmurphy
benmmurphy

Reputation: 2505

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/

Upvotes: 19

Brock Adams
Brock Adams

Reputation: 93473

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

Upvotes: 14

Related Questions