如何在firebug中调试缩小的JS？

Question

我有一个网页，其中包含大量的缩小JS文件。网页在我的本地网络上工作得非常好，但在登台时抛出了一些JS错误。 JS中存在一个问题，我不想调试它。当我在Firebug的脚本标签中加载JS时，它出现在一条长水平线上。在Firebug中是否存在扩展或美化脚本以进行调试的方法？我知道我可以使用jsbeautifier，但他们不会帮助我。我无法将扩展文件上传到CDN，无法使用CDN。

要注意的事项，
a）我无法控制服务于JS的盒子，它在CDN上，我提到它 b）我可以使用美化器等但是这会帮助我在运行时调试脚本吗？恕我直言，没有 c）受NDA和其他法律事务的约束，我无法共享脚本，但它是一个普遍的问题，你可以用一个缩小的jQuery来遇到它

Answer 1

更新：现在有一个firebug扩展程序可以美化JavaScript：

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

在Firefox 12.0中它非常适合我。

感谢此answer发现它。

Answer 2

1. Beautify您的脚本
2. 在/etc/hosts或您的本地DNS中添加CDN主机以将其解析为您自己的网络服务器
3. 在所述网络服务器上托管美化版本和所需的一切
4. Firefox和Chrome（此编辑版本）都支持使用检查器中提供的{}按钮来美化脚本。

Answer 3

只需加载缩小的文件，然后按下底部的{}按钮即可美化，使断点和其他调试成为可能。 （也适用于Chrome）

Answer 4

这是一个常见问题，Chrome开发团队最近提出了一个优雅的解决方案，他们称之为源地图 - 有关详情，请参阅http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/，我认为您会找到它正是你（以及我们其他人）一直在呼喊的！ ：）

Answer 5

这是一种解决方法，但它可以提供帮助。我们的想法是，我们将用您机器上的文件替换来自服务器的文件。
这适用于任何浏览器。
第一次（可能是15分钟）需要一些设置，但是它可以非常方便。
它还可以帮助在实时/生产环境中测试您的错误修复。

1. 获取Fiddler（它是一个Web调试代理），安装它，运行它。
   http://www.fiddler2.com/fiddler2/
   （安装后重新启动浏览器以获取Fiddler扩展名）
2. 如果您调试HTTPS网站，请先检查一下：
   http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
3. 从现在开始，您应该在Fiddler（左侧的“Web会话”窗格）中看到您的浏览器所做的所有下载，包括JS文件。
   如果没有，请查看：Fiddler not displaying sessions
4. 在列表中找到要调试的文件（Ctrl + F可用）
5. 点击该文件。然后：
   • 从检查器窗格（textView选项卡）获取文件内容，美化它，保存到本地计算机上的文件
   • 或有权访问包含源代码的文件（例如：来自源代码管理）
6. 转到AutoResponder选项卡（左上方窗格）。
   选择“启用自动回复”复选框。
   选择“不匹配的请求直通”复选框。
7. 将文件从左窗格拖到右窗格（预填充底部的规则编辑器）
8. 使用本地文件的路径设置其他字段
9. 点击保存按钮
10. 重新加载页面并享受调试会话。

Fiddler可以做更多的事情，但这个用例回答了最初的问题。

Answer 6

考虑改变！

Firefox w / Firebug是我最喜欢的JavaScript调试方法近一年，但我最近转向Google-Chrome的Developer-Tools，它更加优越。

• Chrome支持JavaScript资源的On-The-Fly（内置功能）美化

• 一旦美化，您就可以自由调试JavaScript资源文件，因为它是从Web服务器上“美化”下载的。通过单击行号设置断点。

• 极其强大的功能之一，
  是一旦你在一个突破点停止，你可以自由执行命令（使用控制台）在相同的范围你是在破坏点。在Firefox中你不能这样做。 它很容易调试（甚至是匿名函数），你永远不会回到Firefox 试一试！

Answer 7

漂亮打印您的JavaScript。谷歌这个，你会发现多个在线JS美化。

我碰巧自己使用http://jsbeautifier.org/并且它运行正常，但是搜索其他人并使用符合您需求的其他人。

警告：您仍然无法获得有意义的本地变量名称（通常由缩小器重命名）。如果代码是由 Closure Compiler 编译的，那么你绝对不会得到任何有用的信息，即使是被认可，因为那时所有变量，函数和属性被破坏了（不仅是当地的）。

现在，如果你的问题是来自外部的调试代码（例如CDN），显然代码会被缩小，你无法将美化版本保存在那里。在这种情况下，您可以使用指向本地版本的URL替换从CDN加载代码的标记，然后您可以将代码（从CDN下载）美化到您自己的服务器中，然后您可以使用FireBug进行调试。

现在，如果您甚至不控制包含这些标记的HTML（例如，它们驻留在外部服务器上），那么很遗憾，如果不将整个网站物理下载到您自己的网站上，您就无法做任何您想做的事情。服务器。即使您下载了整个站点（包含所有文件），它也可能无法工作，因为该站点可能由后端处理语言驱动或访问后端数据库。在这种情况下，您还需要模拟所有这些数据。然而，可以完成 - 你只需要经历很多痛苦。我的建议是保存一个版本的网页并在你自己的服务器上运行，从你自己的服务器上提供美化代码进行调试。

Answer 8

在JavaScript上放置断点使调试变得更加容易，但如果您的代码已经生成，那么它可能已经缩小了。你怎么调试缩小的代码？有用的是，有些浏览器可以选择缩小你的JavaScript。

在Chrome和Safari中，只需选择“脚本”标签，找到相关文件，然后按下面板中的“{}”（漂亮打印）图标。

在Internet Explorer中，单击脚本选择下拉列表中的工具图标，找到格式化JavaScript的选项。

Opera会自动美化缩小的JavaScript。 Source