我正在使用Dojo，并使用Mastering Dojo中描述的“Module Pattern”。就我所知，这个模式是一个通用的、广泛使用的JavaScript模式。我的问题是：我们如何调试我们的模块？
到目前为止，我还不能说服Firebug显示我的模块的源代码。Firebug似乎只显示了用于执行工厂方法的dojo eval语句。因此，我不能单步调试我的模块源代码。我尝试在我的模块代码中放入“debugger”语句，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");
}
}
})();
6条答案
按热度按时间uxhixvfz1#
（我自己回答这个问题，因为它似乎是一个常见的问题，其解决方案并不为人所知。）
看起来，如果dojo做一些协作，就可以很好地调试FireBug中的eval-ed代码。诀窍是使用debugAtAllCosts配置dojo以启用此类调试
这在dojo campus的debugging下有描述，它还指出，出于性能原因，不建议在生产环境中使用此设置，并建议使用服务器端条件来控制是否启用此类调试。
toiithl62#
另外，如果你使用的是低于1.7a10的Firebug版本，还要确认你已经在脚本下拉菜单中禁用了“Decompile for eval（）source”（extensions.firebug.decompileEvals in about：config）。当启用时，我认为这会导致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中进行了相关讨论。
balp4ylt3#
这里有一个我发现的无法递归到dojo的解决方案。需要从阅读NG的mudules。
变更
到
这修复了不太有用的未定义dojo._scopeArgs = [undefined];人们不这么看的错误。
sqougxex4#
这种模式本质上是xhr+eval......实际上问题出在eval上......特别是Firefox无法从eval跟踪代码到其原始源代码，而是指向eval缓冲区中的eval call site, plus whatever line offset there is。Firebug实现了a clever scheme来解决这个问题。并添加了一个可选的提示，Dojo这样的加载器可以使用它来将原始文件路径嵌入到注解中。Webkit现在也支持这个方案。它并不完美，但是
debugger;和其他断点应该会将您带到正确的缓冲区。我不知道为什么这些对你都不起作用。你用的是哪个版本的Firebug？
eeq64g8w5#
djna的debugAtAllCosts解决方案适合我，原因在http://dojotdg.zaffra.com/tag/dojorequire/中描述过。
然而注意，使用debugAtAllCosts会导致dojo.require成为异步的，因为它使用脚本插入而不是xhr+eval。这可能会导致期望dojo.require成为同步的代码出现问题，而使用require本身并没有带来这样的问题（如X1 E1 F1 X所述）。在我的例子中，它是测试单元测试框架运行的代码。因此，以下语句失败，因为EntityInfo未定义
直到我把它改成
@peller，对我来说，FireBug 1.6.1会把我带到正确的eval块，但不是正确的文件和行号（因为它是一个eval字符串，而不是原始文件）。
kse8i1jr6#
我将添加另一个选择，使用Chrome。它非常适合调试evals（似乎捕捉到了Firebug没有捕捉到的一些东西）。请注意它缓存JS文件的问题-http://code.google.com/p/chromium/issues/detail?id=8742。
就个人而言，Firebug仍然是我的主要环境，但我现在也在使用Chrome，当evals的问题变得棘手时，我可以从另一个Angular 来看待这个问题。Chrome昨天两次帮助我解决了dojo加载器的未定义函数/变量问题，Firebug跳过了这些问题）。