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

Javascript 如何在firebug中调试缩小的JS?,javascript,debugging,firefox,firebug,Javascript,Debugging,Firefox,Firebug,我有一个网页,其中包括疯狂数量的缩小JS文件。该网页在我的本地网络上运行良好,但在登台时抛出一些JS错误。JS中有一个问题,我不想调试它。当我在Firebug的脚本标记中加载JS时,它会出现在一条长长的水平线上。Firebug中是否有扩展或美化调试脚本的方法?我知道我可以用JS美容器,但他们帮不了我。我无法将扩展文件上载到CDN,这违背了使用CDN的目的 需要注意的要点, a) 我无法控制提供JS的盒子,它在CDN上,我提到过它。 b) 我可以使用美化器等,但这能帮助我在运行时调试脚本吗?IMH


我有一个网页,其中包括疯狂数量的缩小JS文件。该网页在我的本地网络上运行良好,但在登台时抛出一些JS错误。JS中有一个问题,我不想调试它。当我在Firebug的脚本标记中加载JS时,它会出现在一条长长的水平线上。Firebug中是否有扩展或美化调试脚本的方法?我知道我可以用JS美容器,但他们帮不了我。我无法将扩展文件上载到CDN,这违背了使用CDN的目的

需要注意的要点,
a) 我无法控制提供JS的盒子,它在CDN上,我提到过它。
b) 我可以使用美化器等,但这能帮助我在运行时调试脚本吗?IMHO,没有

c) 由于受到NDA和其他法律事务的约束,我无法共享脚本,但这是一个一般性问题,您可以使用缩小的jQuery漂亮地打印您的JavaScript。谷歌这个,你会发现多个在线JS美化

我碰巧使用了我自己,它工作得很好,但是寻找其他人,使用一个适合你需要的

警告:您仍然无法获得有意义的局部变量名(通常由缩略语重命名)。如果代码是由闭包编译器编译的,那么您绝对不会得到任何有用的信息,即使在使用时也是如此,因为这样所有的变量、函数和属性都会被破坏(不仅仅是本地的)

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

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

  • 你的剧本
  • 在或本地DNS中添加CDN主机,以将其解析到您自己的web服务器
  • 在所述web服务器上托管美化版和您需要的所有内容
  • Firefox和Chrome(本次编辑的版本)都支持使用inspector中可用的
    {}
    按钮美化脚本

  • 这是一个常见的问题,Chrome开发团队最近提出了一个优雅的解决方案,他们称之为源代码映射-有关更多信息,请参阅,我想您会发现这正是您(和我们其他人)一直在迫切需要的

    这更像是一种解决方法,但它可以帮助您。我们的想法是用您机器上的文件替换来自服务器的文件。
    这将适用于任何浏览器。
    第一次安装需要一点时间(可能需要15分钟),但之后会非常方便。
    它还可以帮助您在live/prod环境中测试bug修复

  • 获取Fiddler(它是一个web调试代理),安装它,运行它。

    (安装后重新启动浏览器以获取Fiddler扩展)
  • 如果调试HTTPS网站,请首先检查以下内容:
  • 从现在起,您应该在Fiddler(“Web会话”窗格左侧)中看到您的浏览器进行的所有下载,包括JS文件。
    如果没有,请检查以下内容:
  • 在列表中找到要调试的文件(Ctrl+F有效)
  • 单击该文件。然后:
    • 从inspectors窗格(textView选项卡)获取文件内容,对其进行美化,并保存到本地计算机上的文件中
    • 或者可以访问包含源代码的文件(例如:来自源代码管理)
  • 转到自动应答器选项卡(左上窗格)。
    选中“启用自动响应”复选框。
    选中“未匹配的请求传递”复选框
  • 将文件从左窗格拖到右窗格(底部的前缀规则编辑器)
  • 用本地文件的路径设置另一个字段
  • 单击保存按钮
  • 重新加载页面并享受调试会话

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

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

    考虑一下改变吧! Firefox w/Firebug是我近一年来最喜欢的JavaScript调试方法,但最近我转向了谷歌Chrome的开发工具,它要优越得多

    • Chrome支持动态(内置功能)美化JavaScript资源

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

    • 最强大的功能之一,
      一旦在断点处停止,就可以在断点处的相同范围内自由执行命令(使用控制台)。在Firefox中你不能这么做。 它很容易调试(即使是匿名函数),您永远不会回到Firefox。
      试试看


      • 在JavaScript上放置断点使调试更加容易,但如果您的代码已经进入生产环境,那么它可能已经被缩小了。如何调试缩小的代码?有益的是,一些br