如何在 Firefox / Firebug 中美化 JavaScript 和 CSS？

Posted 2023-02-21

【中文标题】如何在 Firefox / Firebug 中美化 JavaScript 和 CSS？

【英文标题】：How can I beautify JavaScript and CSS in Firefox / Firebug?

【发布时间】：2011-03-14 02:16:21

【问题描述】：

有没有办法美化 Firebug 中的 javascript 和 CSS？

我希望能够查看格式化的 JavaScript 代码而不是压缩版本:)。

【问题讨论】：

类似问题：***.com/questions/822119/…

不适用于 Firefox，但... Chrome 开发者工具内置了此功能。在脚本选项卡上，左下栏有一组图标...“”图标是“Pretty print”并执行此转换。

@JonAdams 谢谢。这正是我要问的问题的答案。这是一个赞成票。

Is there a plugin that allows me to automatically unminify the Javascript included on a site?的可能重复

【参考方案1】：

现在有一个插件可以拦截 JavaScript 下载并在此时消除它。

不幸的是，它与 Firefox 挂钩的方式意味着它适用于所有 JavaScript 下载，而不是特定的下载，并且 JavaScript 文件必须使用适当的 MIME 类型提供。

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

【讨论】：

另外，Firefox 3.6 以上不支持。

现在应该可以升级到 firefox 5.x。您可能还想查看内置此功能的新版 chrome 浏览器。因为他们使用解析树，所以在混淆过程中不会破坏您的代码，并且对性能的影响很小。

更新：该插件在 Firefox 18 中不起作用。幸运的是，我只使用 Firefox 来调试特定于 Firefox 的问题，但这对于那些问题来说仍然是一个大问题。

@ax.，也许它因操作系统而异。我在 Mac 上。

@BrianMortenson 在 Windows 和 Linux 中撰写本文时尚未开发 Firefox 开发者版

【参考方案2】：

CSS 已经在 Firebug 中进行了美化，通过比较 CSS 选项卡或 CSS 窗格与原始源代码可以清楚地看到。

JavaScript，唉，不是。目前，您能做的最好的事情是将代码粘贴到 http://jsbeautifier.org/ 之类的内容中。

但是，如果您写 a Firebug extension 这样做，您将得到我们所有的感激。 ;-)

【参考方案3】：

Firefox 开发者工具有：

“Prettify Source”按钮：左下角的大括号图标

“Auto Prettify Minified Sources”设置：默认开启 Prettify Source。

要启用它：转到“调试器”选项卡右上角的引擎图标，不是全局设置引擎。

在 Firefox 42 上测试。

【讨论】：

Firebug 2.0.13 (FF43.0.1) 在脚本选项卡中的脚本名称旁边还有一个 图标。

我有 Firefox Developer Edition 74.0b5（64 位），但在调试器窗格中看不到此图标 。不知道有没有被删掉？或者如何启用它？