40

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Lance
  • 75,200
  • 93
  • 289
  • 503
  • Similar question here: http://stackoverflow.com/questions/822119/online-tool-to-unminify-decompress-javascript – lashleigh Jul 09 '10 at 21:16
  • 8
    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. – Jon Adams Aug 22 '11 at 15:20
  • @JonAdams Thank you. That is exactly the answer to the question I was going to ask. Here is an upvote. – Alexandre Martins Apr 19 '12 at 13:57
  • Possible duplicate of [Is there a plugin that allows me to automatically unminify the Javascript included on a site?](https://stackoverflow.com/questions/4279319/is-there-a-plugin-that-allows-me-to-automatically-unminify-the-javascript-includ) – ivan_pozdeev Jun 01 '17 at 10:57

3 Answers3

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/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
benmmurphy
  • 2,503
  • 1
  • 20
  • 30
  • 1
    Also, no support above Firefox 3.6. – skolima Jul 07 '11 at 12:10
  • 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. – benmmurphy Jul 18 '11 at 16:51
  • 1
    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. – undefined Jan 09 '13 at 23:10
  • @ax., perhaps it differs by OS. I'm on a Mac. – undefined Jan 16 '13 at 23:39
  • @BrianMortenson not working on Firefox Developer Edition at the time of writing in Windows & Linux – Steel Brain Jan 20 '15 at 05:29
  • The link is broken: *"Oops! We can’t find that page"* – Peter Mortensen Jun 12 '21 at 21:10
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. ;-)

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
12

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.

Ciro Santilli OurBigBook.com
  • 347,512
  • 102
  • 1,199
  • 985
  • 1
    Firebug 2.0.13 (FF43.0.1) has also an `{}` icon in the script-tab, next to the script-name. – hinneLinks Dec 22 '15 at 08:33
  • 3
    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? – Sorin Postelnicu Feb 20 '20 at 17:12