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

How can I debug a minified JS in firebug?

提问by Kumar

I have a web page which includes insane amount of minified JS files. The web page works perfectly fine on my local network but throws some JS error on staging. There is an issue in JS and I wan't to debug it. When I load the JS in Firebug's script tag it appears in one long horizontal line. Is there a way out in Firebug that expands or beautifies the script for debugging? I know I can use jsbeautifier but they wont help me. I can not upload an expanded file to CDN, defeats the purpose of using CDN.

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

Points to be noted,
a) I can not control the box which serves JS, its on CDN, I mentioned it.
b) I can use beautifiers etc but would that help me in debugging the script in run time? IMHO, no
c) Being bound by NDA and other legal things I can not share the script but its a generic problem, you can encounter it with a minified jQuery

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

采纳答案by rsp

1. Beautifyyour script
2. Add the CDN host in /etc/hostsor your local DNS to resolve it to your own web server
3. Host the beautified version and everything that you need on said web server
4. Both Firefox and Chrome (versions as of this edit) support beautifying script with the {}button available in the inspector.

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

回答by Kyle Heironimus

Just load the minified file and press the {}button at the bottom and it instantly beautifies, making breakpoints and other debugging possible. (True for Chrome too)

只需加载缩小的文件并按下{}底部的按钮，它就会立即美化，使断点和其他调试成为可能。（Chrome 也是如此）

回答by MarcusTucker

This is a common problem and the Chrome dev team have recently come up with an elegant solution, which they've called Source Maps - see http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/for more info, I think you'll find it's exactly what you (and the rest of us) have been crying out for! :)

这是一个常见问题，Chrome 开发团队最近提出了一个优雅的解决方案，他们称之为 Source Maps -有关更多信息，请参阅http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/，我想你会发现这正是你（和我们其他人）一直渴望的！:)

回答by JB Hurteaux

This is more a workaround, but it can help. The idea is that we will replace files coming from the server by files on your machine.
This will work with any browser.
It takes a bit of setup the first time (15 minutes maybe), but then it can be very convenient.
It can also helps testing your bug-fixes in a live/prod environment.

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

1. Get Fiddler (it's a web debugging proxy), install it, run it.
   http://www.fiddler2.com/fiddler2/
   (Restart browser after install to get the Fiddler extension)
2. If you debug an HTTPS website, check this first:
   http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
3. From now on, you should see in Fiddler ("Web Sessions" pane on the left) all downloads made by your browser, including JS files.
   If not, check this : Fiddler not displaying sessions
4. Find the file you want to debug in the list (Ctrl+F works)
5. Click on the file. Then either:
   • get the file content from the inspectors pane (textView tab), beautify it, save to a file on your local computer
   • or have access to a file which contains the source code (ex: from your source control)
6. Go to AutoResponder tab (top left pane).
   Select "Enable automatic responses" checkbox.
   Select "Unmatched requests passthrough" checkbox.
7. Drag your file from left pane to right pane (prefills rule editor at the bottom)
8. Set the other field with the path of your local file
9. Click the Save button
10. Reload the page and enjoy your debugging session.

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 display session
4. 在列表中找到要调试的文件（Ctrl+F 有效）
5. 单击该文件。然后：
   • 从检查器窗格（textView 选项卡）获取文件内容，美化它，保存到本地计算机上的文件
   • 或有权访问包含源代码的文件（例如：来自您的源代码管理）
6. 转到 AutoResponder 选项卡（左上窗格）。
   选中“启用自动响应”复选框。
   选择“不匹配的请求直通”复选框。
7. 将您的文件从左窗格拖到右窗格（底部的预填充规则编辑器）
8. 使用本地文件的路径设置其他字段
9. 点击保存按钮
10. 重新加载页面并享受您的调试会话。

Fiddler can do many more things, but this use-case answers the initial question.

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

回答by JB Hurteaux

Consider a Change!

考虑改变！

Firefox w/ Firebug was my favorite JavaScript debugging method for almost a year, but I've recently moved to Google-Chrome's Developer-Tools which is far more superior.

带 Firebug 的 Firefox 是我近一年来最喜欢的 JavaScript 调试方法，但我最近转向了 Google-Chrome 的开发者工具，它要好得多。

• Chrome supports an On-The-Fly (built-in feature) beautification of JavaScript resources

• Once beautified, you are free to debug the JavaScript resource file, as it was "natively" downloaded beautified from the web-server. Breaking-points are set by clicking the line number.

• One of the most extremely powerful feature,
  Is once You've Stopped In A Breaking-point, You Are Free To Execute Commands (using console) In The Same Scope You ARE In The Breaking-point. In Firefox you can't do that. Its so easy to debug (even anonymous functions), You'll never be back to Firefox.
  Try It!

• Chrome 支持对 JavaScript 资源进行即时（内置功能）美化

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

• 最强大的功能之一
  是，一旦您在断点处停止，您就可以在与断点处相同的范围内自由执行命令（使用控制台）。在 Firefox 中你不能这样做。 它非常容易调试（甚至是匿名函数），您将永远不会回到 Firefox。
  尝试一下！

回答by Stephen Chung

Pretty-print your JavaScript. Google this and you'll find multiple on-line JS beautifiers.

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

I happen to use http://jsbeautifier.org/myself and it works fine, but search for others and use one that suits your needs.

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

Caveat: You still won't be able to get meaningful localvariable names (which are usually renamed by a minifier). If the code was compiled by the Closure Compiler, then you absoutely won't get any useful information back at all, even when beutified, because then allvariables and functions and properties are mangled (not only local ones).

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

Now, if your problem is with debugging code that comes from outside (e.g. a CDN), obviously that code would be minified, and you can't save your beautified version back there. In this case, you can replace the tags that load code from a CDN with a url pointing to your local version, then you can beautify the code (downloaded from the CDN) into your own server and you can then debug with FireBug.

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

Now, if you don't even control the HTML that contains those tags (e.g. they reside on a outside server), then unfortunately there is no way for you to do what you want without physically downloading the entire site to your own server. Even if you downloaded the entire site (with all the files), it may not work since the site may be driven by a back-end processing language or accesses a back-end database. In such case you'll also need to simulate all those data. It canbe done, however -- you just have to go through a lot of pain. My recommendation is to save a version of the web page and run it on your own server, serving beautified code from your own server to debug.

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

回答by Aamol

Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then it's probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un-minify your JavaScript.

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

In Chrome and Safari, simply select the 'Scripts' tab, find the relevant file and then press the "{ }" (pretty print) icon located in the bottom panel.

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

In Internet Explorer, click the tool icon by the script selection drop down to find the option to format the JavaScript.

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

Opera will automatically prettify minified JavaScript. Source

Opera 会自动美化缩小后的 JavaScript。来源