Dojo是非常小、非常快速的，并且使用了非常聪明的技巧来节省内存和时间. 不足的是：Dojo并不大量的跟踪程序错误,因为这会使代码变得臃肿，速度变得很慢. 刚开始接触的时候，如果你的代码运作不正常，返回的错误可能会令你非常困惑.
不用担心! 这里提供的一些技巧，会使你成为一个自信、成功的程序调试员. 提前了解这些技巧会让你学习Dojo变得更加容易.
使用 Firebug 或者是 Firebug Lite
我们不得不强调一下. Firebug,一个开源的Firefox测试插件,非常适用于JavaScript,HTML 和 CSS 的调试. 你可以从 Firebug 网站 下载.
如果你不是Firefox 使用者? 你可以考虑转换过来用Firefox,至少在开发Dojo程序的时候使用Firefox. 跨平台运行是Dojo的一个优点. 所以你使用的越充分，你的代码可迁移性就越强，你选择那个浏览器也就无所谓了.
还不相信吗? 没问题. 如果你使用 Internet Explorer 或者 Safari,你可以使用跟Dojo捆绑在一起的 Firebug Lite library. 它提供了一些Firebug的调试日志和命令行属性. 虽然不是非常全面，但也是一个相当好的替代方法.
要使用 Firebug Lite,你需要设置 isDebug 参数，如下:
djConfig="parseOnLoad: true,isDebug: true"> </script>
这个参数对已经启用Firebug的Firefox 是不起作用的. 所以包含这个参数只是使你可以在 IE,Safari,和没有安装Firebug的 Firefox 上调试Dojo程序.
dojo.require错误和Firebug控制台
下面的代码有一个非常小的错误:
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fix me! </title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.js"
djConfig="parseOnLoad: true,isDebug: true"> </script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Textbox");
</script>
</head>
<body class="tundra">
<form>
What's the 411? <input type="text" size="20" name="info" dojoType="dijit.form.TextBox"
trim="true" propercase="true" /> <br>
</body>
</html>
没有Firebug,这短代码会产生一个无用的弹出窗口(IE) 或者 什么也没显示 (Firefox). 看起来textbox是肯定不对的. 你输入一个小写的名称并引起了错误... 正确的写法是第一个字母大写吗？ 也不是.
使用Firebug，错误是非常容易跟踪的. 首先,右下角会有一个提示.
点击"1 Error" ，Firebug 控制台会弹出:
回过头来看一下代码,你注意到dojo.require中 "Textbox" 的大小写错了. 这是一个常见的错误,但也很容易改正. 忘记 dojo.require,或者 dojoType 属性的类拼写错误也是常见错误. 无论是怎样的情况,Firebug 都可以直接指出来.
Firebug Lite 提供了一个相似的控制台,但它是在浏览器窗口的底部显示. 要把它关掉,你需要把 isDebug 标记设为 false，并重新执行页面.
Dojo/Method 和 Dojo/Event 代码中错误
下面的代码存在一个错误:
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fix me!</title>
<style type= "text/css">
@ import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@ import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type= "text/javascript" src= "http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig= "parseOnLoad: true"></script>
<script type= "text/javascript">
dojo. require ( "dojo.parser" );
dojo. require ( "dijit.form.Button" );
var newWidth = '200px';
</script>
</head>
<body class= "tundra">
<div dojoType= "dijit.form.Button">
Click to break!
<script type= "dojo/event" event= "onClick">
this. domNode. style. width = dojo. newWidth;
</script>
</div>
</html>
但是你看控制台的时候,并没有明显的错误. 在使用其他语言的时候，可以使用调试器为"this.domNode"行设置一个断点（breakpoint）. Firebug调试器同样也可以做到,这段代码中我们不使用. 因为"dojo/event" 、 "dojo/method" 这两种脚本类型的编译和 "text/javascript" 是不同的. 但这里还有两种方法可以选择.
方法 1: 调试日志
第一种方法是调试日志,如果你用过像log4j这样的日志工具就会觉得非常熟悉. 思路就通过写日志信息，输出变量的值和执行的代码.
为什么不用alert()呢 ? JavaScript alert() 是一个非常受欢迎的。值得信赖的调试工具,但会引起下面的问题:
- 如果有很多错误提示,不断的点击[OK]是非常烦人的
- 太多的文字输出会使提示窗的大小比平面窗口还大
- 程序发布的时候需要手工删除所有的 alert()
- alert() 如果放在一个死循环中，会一直的弹出窗口，直到关闭浏览器进程
- 输出对象内容和数组不方便
很明显，alert并不够强大. 在 Dojo 日志中,你可以把错误严重程度和信息提示联系起来,就像log4j一样. 下面的代码举例说明了5个等级的调试错误:
console. debug ( "Checking to make sure nothing happened" );
console. info ( "Something might happen." );
console. warn ( "Something happened,but it's no big deal." );
console. error ( "Cough cough!" );
在Firebug 控制台中,信息显示如下:
在IE中,显示如下:
另一个方法,console.dir() 把变量的内容全部输出到屏幕. console.log 处理字符串和整型数据比较有优势，console.dir 适合处理更复杂的变量 - 对象,数组,对象数组,或者其它的. 例如:
{attribute: "last_name",sortDescending: true },
{attribute: "last_name",sortDescending: true }
]);
输出结果:
所以在以上的例子中，我们写入:
this. domNode. style. width = dojo. newWidth;
运行代码，我们会发现dojo.newWidth没有定义. 是拼写错了吗？要快速找到这个问题,我们把代码修改为:
this. domNode. style. width = dojo. newWidth;
很快我们会发现dojo中并没有newWidth这个属性. 最终，我们找到了代码的错误并将这一行右边的代码修改为"newWidth." 问题解决.
方法 2: The "debugger" Statement
另外，也可以为代码设置一个"简单的断点". 就是只增加一个" debugger; "声明,这是一个合法的 JavaScript保留字（预定义字）.
this. domNode. style. width = dojo. newWidth;
这句代码停止了代码的运行，并打开了一个Firebug 命令窗口. 这表明代码是在这个地方停止的 ...
这是运行 dojo/event 代码的效果. 断点好像并没有产生作用.
点开 Console 标签，检查变量和运行的 JavaScript代码.我们看一下 dojo.newWidth 属性,没有任何东西. 但 "dojo" 是有的，我们可以通过 console.dir(dojo)来查看. 所有方法1的日志属性都在这里列出来了.
跟踪 dojo.require,需要使用本地服务器上的Dojo
上面的代码已经正常运行了，我们调整一下，把按钮（ button ）设为蓝色（ blue）:
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fix me! </title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"> </script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.form.Button">
Click to break!
<script type="dojo/event" event="onClick">
this.domNode.style.backgroundColor = dojo.Color.named.aliceblue;
</script>
</div>
</html>
查看控制台 ... 没有显示错误. 但dojo.Color.named.aliceblue 是有点值得怀疑的. 我们都知道 dojo.colors 需要被加载,但我们不确定是不是 dijit.form.Button 已经包含了这个加载。
当你使用本地Dojo的时候，可以顺利的把它找出来. CDN Dojo 对它加载的模块是保持沉默的. 本地 Dojo 则是非常�嗦的. 所以,确定在服务器目录（underneath /dojoroot）安装了Dojo包,再修改一下下面的代码:
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"> </script>
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"> </script>
控制台会显示：
你可以看到所有加载的Dojo 核心 和 Dijit 组件。 很明显,dojo.colors 不在里面,所以我们要增加一个 dojo.require。
还是不对 ... 检查DOM
如果你的问题还没有解决，那真的很不幸.发生样式错误的时候，我们就需要使用 Firebug的 DOM 检查器了.
- 它显示了当前的 DOM 结构,并不是刚开始的时候加载的
- 你可以查看每个节点的DOM属性- 那就是,按 Inspect 并指向目标
我们点击 Inspect ，并指向屏幕中的按钮
控制台的右面显示了样式，以及这个类使用的样式. 带中划线的是无用的样式. 非常不错!
Debugging External Classes With debugAtAllCosts
dojo/method 和 dojo/event 脚本适合用于简短、不重复利用的代码片段. 但如果你开始构建重复利用的组件,你需要把代码保存到Dojo声明的类中. 好处就是这种方法你用的越多，调试起来就越容易.
下面是个一个 HTML 代码和一个可重复利用的Dojo部件（widget）:
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Goolica Tax Form </title>
<style type="text/css">
@import "/dojoroot/dijit/themes/tundra/tundra.css";
@import "/dojoroot/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true"> </script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojobook.online-book.debugging.BuggyWidget");
</script>
</head>
<body class="tundra">
<div dojoType="dojobook.online-book.debugging.BuggyWidget"> </div>
</body>
</html>
dojo. require ( "dijit._Widget" );
dojo. declare (
"dojobook.online-book.debugging.BuggyWidget",
[dijit._Widget ],
{
postCreate: function () {
dojo. nonExistentMethod ();
}
});
运行这段代码，你会发现一个错误，但是显示的错误位置是不对的:
但当我们把 debugAtAllCosts 标记设置为 true:
djConfig="parseOnLoad: true,debugAtAllCosts: true"> </script>
错误显示的位置就正确了:
重要提示： 你一定要在发布的程序产品中把 debugAtAllCosts 去掉. 它会使客户端的运行变慢. 相比于直接手工添加和删除,我更喜欢用服务器语言（如PHp）来处理这个工作:
$djConfig = $inProduction ? "parseOnLoad: true" : "parseOnLoad: true,debugAtAllCosts: true";
$loadLocation = $inProduction ? "http://o.aolcdn.com/dojo/1.0.0" : "/dojoroot";
$useXd = $inProduction ? ".xd" : "";
?>
<style type= "text/css">
@import "<?= $loadLocation ?>/dijit/themes/tundra/tundra.css";
@import "<?= $loadLocation ?>/dojo/resources/dojo.css"
</style>
<script type= "text/javascript" src= "<?= $loadLocation ?>/dojo/dojo<?= $useXd ?>.js"
djConfig= "<?= $djConfig ?>"></script>
原文地址：http://dojotoolkit.org/book/dojo-book-0-9/
转载请标明译者：朱雄业版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。