如何调试Dojo

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 参数，如下:

 
 <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0//dojo/dojo.js"
djConfig="parSEOnLoad: true,isDebug: true"> 
 </script> 

这个参数对已经启用Firebug的Firefox 是不起作用的. 所以包含这个参数只是使你可以在 IE,Safari,和没有安装Firebug的 Firefox 上调试Dojo程序.

dojo.require错误和Firebug控制台

下面的代码有一个非常小的错误:

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"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 代码中错误

下面的代码存在一个错误:

  <!DOCTYPE HTML 
 PUBLIC 
 "-//W3C//DTD HTML 4.01//EN"
 
 "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. 
 @H_304_403@require 
 ( 
 "dojo.parser" 
 ); 
 
dojo. 
 @H_304_403@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. 
 @H_304_403@domNode. 
 @H_304_403@style. 
 @H_304_403@width = dojo. 
 @H_304_403@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. 
 @H_304_403@log 
 ( 
 "Nothing happening" 
 ); 
 
console. 
 @H_304_403@debug 
 ( 
 "Checking to make sure nothing happened" 
 ); 
 
console. 
 @H_304_403@info 
 ( 
 "Something might happen." 
 ); 
 
console. 
 @H_304_403@warn 
 ( 
 "Something happened,but it's no big deal." 
 ); 
 
console. 
 @H_304_403@error 
 ( 
 "Cough cough!" 
 ); 

在Firebug 控制台中,信息显示如下:

在IE中,显示如下:

另一个方法,console.dir() 把变量的内容全部输出到屏幕. console.log 处理字符串和整型数据比较有优势，console.dir 适合处理更复杂的变量 - 对象,数组,对象数组,或者其它的. 例如:

  console. 
 @H_304_403@dir 
 ([
 
 {attribute: 
 "last_name",sortDescending: 
 true 
 },
 
 {attribute: 
 "last_name",sortDescending: 
 true 
 }
]); 

输出结果:

所以在以上的例子中，我们写入:

  console. 
 @H_304_403@debug 
 ( 
 "dojo.newWidth is" + dojo. 
 @H_304_403@newWidth 
 ); 
 
 
 this. 
 @H_304_403@domNode. 
 @H_304_403@style. 
 @H_304_403@width = dojo. 
 @H_304_403@newWidth; 

运行代码，我们会发现dojo.newWidth没有定义. 是拼写错了吗？要快速找到这个问题,我们把代码修改为:

  console. 
 @H_304_403@dir 
 ( 
 "dojo is" + dojo 
 ); 
 
 
 this. 
 @H_304_403@domNode. 
 @H_304_403@style. 
 @H_304_403@width = dojo. 
 @H_304_403@newWidth; 

很快我们会发现dojo中并没有newWidth这个属性. 最终，我们找到了代码的错误并将这一行右边的代码修改为"newWidth." 问题解决.

方法 2: The "debugger" Statement

另外，也可以为代码设置一个"简单的断点". 就是只增加一个" debugger; "声明,这是一个合法的 JavaScript保留字（预定义字）.

 
 debugger; 
 
 
 this. 
 @H_304_403@domNode. 
 @H_304_403@style. 
 @H_304_403@width = dojo. 
 @H_304_403@newWidth; 

这句代码停止了代码的运行，并打开了一个Firebug 命令窗口. 这表明代码是在这个地方停止的 ...

这是运行 dojo/event 代码的效果. 断点好像并没有产生作用.

点开 Console 标签，检查变量和运行的 JavaScript代码.我们看一下 dojo.newWidth 属性,没有任何东西. 但 "dojo" 是有的，我们可以通过 console.dir(dojo)来查看. 所有方法1的日志属性都在这里列出来了.

跟踪 dojo.require,需要使用本地服务器上的Dojo

上面的代码已经正常运行了，我们调整一下，把按钮（ button ）设为蓝色（ blue）:

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"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包,再修改一下下面的代码:

 
 <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>

 
 修改后代码： 

 
 <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.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）:

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"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. 
 @H_304_403@provide 
 ( 
 "dojobook.online-book.debugging.BuggyWidget" 
 ); 
 
dojo. 
 @H_304_403@require 
 ( 
 "dijit._Widget" 
 ); 
 
dojo. 
 @H_304_403@declare 
 (
 
 "dojobook.online-book.debugging.BuggyWidget",
 
 [dijit._Widget 
 ],
 
 { 
 
postCreate: 
 function 
 () 
 {
dojo. 
 @H_304_403@nonExistentMethod 
 (); 
 
 
 }
}); 

运行这段代码，你会发现一个错误，但是显示的错误位置是不对的:

但当我们把 debugAtAllCosts 标记设置为 true:

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

错误显示的位置就正确了:

重要提示： 你一定要在发布的程序产品中把 debugAtAllCosts 去掉. 它会使客户端的运行变慢. 相比于直接手工添加和删除,我更喜欢用服务器语言（如PHP）来处理这个工作:

 
 <?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> 