JavaScript/Dojo 模块模式 - 如何调试？答案

【问题标题】：JavaScript/Dojo Module Pattern - how to debug?JavaScript/Dojo 模块模式 - 如何调试？
【发布时间】：2010-04-13 07:54:29
【问题描述】：

我正在使用 Dojo 并使用 Mastering Dojo 中描述的“模块模式”。就我所见，这种模式是一种通用且广泛使用的 JavaScript 模式。我的问题是：我们如何调试我们的模块？

到目前为止，我还无法说服 Firebug 向我展示我的模块的来源。 Firebug 似乎只显示了用于执行工厂方法的 dojo eval 语句。因此，我无法单步执行我的模块源代码。我尝试在我的模块代码中添加“调试器”语句，Firebug 似乎正确停止，但没有显示源代码。

下面是人为的示例代码。这只是一个足够复杂的例子，使调试的需求变得合理，它并不是有用的代码。

页面

<!--
  Experiments with Debugging
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head> 
    <title>console me</title>

    <style type="text/css">
      @import "../dojoroot/dojo/resources/dojo.css";
      @import "../dojoroot/dijit/themes/tundra/tundra.css";
      @import "edf.css";
    </style>    

    <script type="text/javascript" src="../dojoroot/dojo/dojo.js">
    </script>

    <script type="text/javascript" >
      dojo.registerModulePath("mytest", "../../mytest");

      dojo.require("mytest.example");

      dojo.addOnLoad(function(){
         mytest.example.greet();                     
      });
    </script>

  </head>
  <body class="tundra">
    <div id="bulletin">
      <p>Just Testing</p>
    </div>
  </body>
</html>
<!-- END: snip1 -->

我要调试的java脚本

dojo.provide("mytest.example");
dojo.require("dijit.layout.ContentPane");

/**
 * define module
 */
(function(){
      //define the main program functions...
      var example= mytest.example;
      example.greet= function(args) {

          var bulletin = dojo.byId("bulletin");

          console.log("bulletin:" + bulletin);

          if ( bulletin) {
                var content = new dijit.layout.ContentPane({
                    id: "dummy",
                    region: "center"
                  });
                content.setContent('Greetings!');

                dojo._destroyElement(bulletin);
                dojo.place(content.domNode, dojo.body(), "first");
              console.log("greeting done");
          } else {
              console.error("no bulletin board");
          }           
      }
})();

【问题讨论】：

标签： javascript debugging dojo

【解决方案1】：

（我自己回答这个问题，因为这似乎是一个常见问题，其解决方案并不为人所知。）

如果 dojo 稍微配合一下，似乎可以在 FireBug 中很好地调试 eval 代码。诀窍是使用 debugAtAllCosts

配置 dojo 以启用此类调试

<script type="text/javascript" src="/dojoroot/dojo/dojo.js"
        djConfig="parseOnLoad: true, debugAtAllCosts: true"></script>

这在 dojo 校园的debugging 下进行了描述，它还指出出于性能原因不建议在生产中使用此设置，并建议使用服务器端条件来控制是否启用此类调试的方法。

【讨论】：

debugAtAllCosts 通常应该不再需要在 FF 和 WebKit 上，原因在我的回答中提到
我只能说，如果没有此处显示的 djconfig，调试器将显示“eval”行而不是 eval 代码，并且单步执行没有用。使用 djconfig，我显示完整的源代码是可见的，我可以很好地通过它。
在 Chrome 中我发现我能够调试模块的源代码，但在 Firebug (1.8) 中却不行，所以这个答案非常节省时间，谢谢。

【解决方案2】：

该模式本质上是 xhr+eval...实际上问题出在 eval...Firefox 尤其无法将代码从 eval 跟踪回其原始源，而是指向 eval call site, plus whatever line offset there is评估缓冲区。 Firebug 已实现a clever scheme 来解决此问题，并添加了一个可选提示，如 Dojo 之类的加载器可以使用该提示将原始文件路径嵌入到注释中。 Webkit 现在supports 这个方案也有。它并不完美，但debugger; 和其他断点应该会将您带入正确的缓冲区。

我不确定为什么这些都不适合你。您使用的是哪个版本的 Firebug？

【讨论】：

使用 Firebug 1.5.3 - 我想我找到了答案：debugAtAllCosts，稍后会发布。
不适用于 Firebug 1.8，但在 Chrome 中工作。这里接受的答案对我有用。

【解决方案3】：

此外，如果您使用的是低于 1.7a10 的 Firebug 版本，还要验证您是否已禁用脚本下拉菜单中的“反编译用于 eval() 源”（about:config 中的 extensions.firebug.decompileEvals）。启用后，我认为这会导致 Firebug 用其自己的反编译版本覆盖源代码，并在此过程中以某种方式丢失文件名。

@peller，这可能就是您的回答对我们不起作用的原因。

默认情况下它是禁用的，但我在某个时候打开它并没有意识到它。

作为 Firebug 问题 http://code.google.com/p/fbug/issues/detail?id=4035 的一部分，它也在 1.7a10 中被完全删除。在https://groups.google.com/d/topic/firebug/y2VR17IFHHI/discussion 和https://groups.google.com/d/topic/dojo-interest/nWlZdJDlic8/discussion 也进行了相关讨论。

【讨论】：

【解决方案4】：

这是我发现的一个解决方案，用于解决无法递归到 dojo.require 读取 NG 的要求。

改变

<script src="dojoroot/dojo/dojo.js" type="text/javascript">

到

<script src="dojoroot/dojo/dojo.js.uncompressed.js" type="text/javascript">

这修复了不太有用的问题 undefineddojo._scopeArgs = [未定义]; 否则会出现错误。

【讨论】：

【解决方案5】：

djna 的 debugAtAllCosts 解决方案对我有用，原因在 http://dojotdg.zaffra.com/tag/dojorequire/ 中描述。

然而，请注意使用 debugAtAllCosts 会导致 dojo.require 变为异步，因为它使用脚本插入而不是 xhr+eval。这可能会导致期望 dojo.require 是同步的代码出现问题，而这些代码不是使用 require 本身引入的（如http://kennethfranqueiro.com/2010/08/dojo-required-reading/ 所述）。就我而言，它正在测试我由单元测试框架运行的代码。所以以下失败说 EntityInfo 没有定义

var e1 = new EntityInfo();

直到我把它改成

dojo.addOnLoad(function() {
  var e1 = new EntityInfo();
}

@peller，对我来说，FireBug 1.6.1 将带我到正确的 eval 块，但不是正确的文件和行号（因为它是一个 eval 字符串而不是原始文件）..

【讨论】：

【解决方案6】：

我将添加另一种选择，使用 Chrome。它非常适合调试评估（似乎可以捕捉到一些 Firebug 没有捕捉到的东西）。请注意缓存 JS 文件的问题 - http://code.google.com/p/chromium/issues/detail?id=8742。

就个人而言，Firebug 仍然是我的主要环境，但我现在也在使用 Chrome，因为 evals 变得棘手，以便对问题进行第二次查看。 Chrome 昨天两次帮助我解决了 Firebug 跳过的 dojo 加载程序的未定义函数/变量问题。

【讨论】：