42

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

Improve this question
4

3 Answers 3

Reset to default
19

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Also, no support above Firefox 3.6.
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.
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.
@ax., perhaps it differs by OS. I'm on a Mac.
@BrianMortenson not working on Firefox Developer Edition at the time of writing in Windows & Linux
|
19

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.

Improve this answer

6 Comments

Firebug 2.0.13 (FF43.0.1) has also an {} icon in the script-tab, next to the script-name.
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?
It looks like Auto Prettify has been removed as of v52.
why do they remove useful stuff like Auto Prettify, what is wrong with them
In FiFo 115.19.0esr (64-bit) the "prettify" {} button is available (again?). Just at a different position: Bottom left of the code window/tab, not the file list.
|
14

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.