JavaScript / Dojo模块模式 - 如何调试？ [英] JavaScript/Dojo Module Pattern - how to debug?
问题描述
我正在与Dojo合作，并使用模块模式，如掌握Dojo 。只要我能看到这种模式是一个普遍而广泛使用的JavaScript模式。我的问题是：我们如何调试我们的模块？
到目前为止，我无法说服Firebug向我显示我的模块的来源。 Firebug似乎仅显示用于执行工厂方法的dojo eval语句。因此，我无法通过我的模块源码。我已经尝试将调试器语句放在我的模块代码中，并且Firebug似乎正确停止，但不显示源代码。
下面的示例代码。这只是一个足够复杂的例子，使调试的需要似乎合理，它不是有用的代码。
页面
<！ -
实验调试
- >
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // EN
http://www.w3.org/TR/html4/strict.dtd\">
< html>
< head>
< title>控制台我< / title>
< style type =text / css>
@import../dojoroot/dojo/resources/dojo.css;
@import../dojoroot/dijit/themes/tundra/tundra.css;
@importedf.css;
< / style>
< script type =text / javascriptsrc =../ 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）;
/ **
*定义模块
* /
（function（）{
//定义主程序函数...
var example = mytest.example;
example.greet = function（args）{
var bulletin = dojo.byId（bulletin）;
控制台.log（公告：+公告）;
如果（公告）{
var content = new dijit.layout.ContentPane（{
id：dummy，
区域：center
}）;
content.setContent（'Greetings！'）;
dojo._destroyElement（公告）;
dojo。 place（content.domNode，dojo.body（），first）;
console.log（greeting done）;
} else {
console.error（no bulletin board ）;
}
}
}）（）;
（回答自己，因为它似乎是一个常见的问题他的解决方案不是很了解。）
似乎可以很好地调试FireBug中的评估代码，只要dojo做一点合作。诀窍是配置dojo以使用 debugAtAllCosts
< script type =text / javascriptsrc =/ dojoroot / dojo / dojo.js
djConfig =parseOnLoad：true，debugAtAllCosts：true>< / script>
这是在dojo校园内描述的调试，其中还注意到，出于性能原因，生产中不推荐使用此设置，并建议使用服务器端条件来控制是否启用此类调试的方法。 / p>
I'm working with Dojo and using the "Module Pattern" as described in Mastering Dojo. So far as I can see this pattern is a general, and widely used, JavaScript pattern. My question is: How do we debug our modules?
So far I've not been able to persuade Firebug to show me the source of my module. Firebug seems to show only the dojo eval statement used to execute the factory method. Hence I'm not able to step through my module source. I've tried putting "debugger" statements in my module code, and Firebug seems to halt correctly, but does not show the source.
Contrived example code below. This is just an example of sufficient complexity to make the need for debugging plausible, it's not intended to be useful code.
The page
<!--
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 -->
The java script I'd like to debug
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");
}
}
})();
(Answering this myself because it seems like a common problem whose solution is not well known.)
It seems that one can nicely debug eval-ed code in FireBug provided that dojo does a little cooperating. The trick is to configure dojo to enable such debugging using debugAtAllCosts
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, debugAtAllCosts: true"></script>
This is described on dojo campus under debugging, which also notes that this setting is not recommended in production for performance reasons and suggests an approach using server-side conditionality to control whether such debugging is enabled.
这篇关于JavaScript / Dojo模块模式 - 如何调试？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
