如何调试Dojo

青旅半醒 2022-08-27 03:52 158阅读 0赞

Dojo是非常小、非常快速的，并且使用了非常聪明的技巧来节省内存和时间. 不足的是：Dojo并不大量的跟踪程序错误,因为这会使代码变得臃肿，速度变得很慢. 刚开始接触的时候，如果你的代码运作不正常，返回的错误可能会令你非常困惑.

不用担心! 这里提供的一些技巧，会使你成为一个自信、成功的程序调试员. 提前了解这些技巧会让你学习Dojo变得更加容易.

## 使用 Firebug 或者是 Firebug Lite ##

我们不得不强调一下. Firebug, 一个开源的Firefox测试插件, 非常适用于JavaScript, HTML 和 CSS 的调试. 你可以从 [**Firebug 网站**][Firebug] 下载.

如果你不是Firefox 使用者? 你可以考虑转换过来用Firefox,至少在开发Dojo程序的时候使用Firefox. 跨平台运行是Dojo的一个优点. 所以你使用的越充分，你的代码可迁移性就越强，你选择那个浏览器也就无所谓了.

还不相信吗? 没问题. 如果你使用 Internet Explorer 或者 Safari, 你可以使用跟Dojo捆绑在一起的 Firebug Lite library. 它提供了一些Firebug的调试日志和命令行属性. 虽然不是非常全面，但也是一个相当好的替代方法.

要使用 Firebug Lite, 你需要设置 isDebug 参数，如下:

[**<script**][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>**][html]  
[**<head>**][head]  
[**<title>**][title]Fix me! **</title>**  
 [**<style**][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**][script]type="text/javascript"src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.js"  
djConfig="parseOnLoad: true, isDebug: true"**>** **</script>**  
 [**<script**][script]type="text/javascript"**>**  
dojo.require("dojo.parser");  
dojo.require("dijit.form.Textbox");  
**</script>  
</head>**  
 [**<body**][body]class="tundra"**>**  
[**<form>**][form]  
What's the 411? [**<input**][input]type="text"size="20"name="info" dojoType="dijit.form.TextBox"  
trim="true" propercase="true" /**>** [**<br>**][br]  
**</body>  
</html>**

没有Firebug, 这短代码会产生一个无用的弹出窗口(IE) 或者 什么也没显示 (Firefox). 看起来textbox是肯定不对的. 你输入一个小写的名称并引起了错误... 正确的写法是第一个字母大写吗？ 也不是.

使用Firebug，错误是非常容易跟踪的. 首先, 右下角会有一个提示.

[![debugging1.png][]][debugging1.png]

点击"1 Error" ，Firebug 控制台会弹出:

[![debugging2.png][]][debugging2.png]

回过头来看一下代码, 你注意到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. 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. log ( "Nothing happening" );  
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 控制台中, 信息显示如下:

[![firebug\_logging.png][firebug_logging.png]][firebug_logging.png]

在IE中, 显示如下:

[![firebug\_ie\_capture.png][firebug_ie_capture.png]][firebug_ie_capture.png]

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

console. dir (\[  
 \{ attribute: "last\_name", sortDescending: **true** \},  
\{ attribute: "last\_name", sortDescending: **true** \}  
\]);

输出结果:

[![firebug\_logging2.png][firebug_logging2.png]][firebug_logging2.png]

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

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

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

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

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

### 方法 2: The "debugger" Statement ###

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

**debugger**;  
**this**. domNode. style. width = dojo. newWidth;

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

[![debugging4.png][]][debugging4.png]

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

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

[![debugging3.png][]][debugging3.png]

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">  
 [**<html>**][html]  
[**<head>**][head]  
[**<title>**][title]Fix me! **</title>**  
 [**<style**][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**][script]type="text/javascript"src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"  
djConfig="parseOnLoad: true"**>** **</script>**  
 [**<script**][script]type="text/javascript"**>**  
dojo.require("dojo.parser");  
dojo.require("dijit.form.Button");  
**</script>  
</head>**  
 [**<body**][body]class="tundra"**>**  
[**<div**][div] dojoType="dijit.form.Button"**>**  
Click to break!  
[**<script**][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**][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**][script]type="text/javascript"src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"  
djConfig="parseOnLoad: true"**>** **</script>**

修改后代码：

[**<style**][style]type="text/css"**>**  
@import "dojoroot/dijit/themes/tundra/tundra.css";  
@import "dojoroot/dojo/resources/dojo.css"  
**</style>**  
 [**<script**][script]type="text/javascript"src="dojoroot/dojo/dojo.xd.js"  
djConfig="parseOnLoad: true"**>** **</script>**

控制台会显示：

[![debugging5.png][]][debugging5.png]

你可以看到所有加载的Dojo 核心 和 Dijit 组件。 很明显, dojo.colors 不在里面, 所以我们要增加一个 dojo.require。

## 还是不对 ... 检查DOM ##

如果你的问题还没有解决，那真的很不幸.发生样式错误的时候，我们就需要使用 Firebug的 DOM 检查器了.

*  它显示了当前的 DOM 结构, 并不是刚开始的时候加载的
 *  你可以查看每个节点的DOM属性- 那就是, 按 Inspect 并指向目标

我们点击 Inspect ，并指向屏幕中的按钮

[![debugging6.png][]][debugging6.png]

控制台的右面显示了样式，以及这个类使用的样式. 带中划线的是无用的样式. 非常不错!

## 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>**][html]  
[**<head>**][head]  
[**<title>**][title]Goolica Tax Form **</title>**  
 [**<style**][style]type="text/css"**>**  
@import "/dojoroot/dijit/themes/tundra/tundra.css";  
@import "/dojoroot/dojo/resources/dojo.css"  
**</style>**  
 [**<script**][script]type="text/javascript"src="/dojoroot/dojo/dojo.js"  
djConfig="parseOnLoad: true"**>** **</script>**  
 [**<script**][script]type="text/javascript"**>**  
dojo.require("dojo.parser");  
dojo.require("dojobook.online-book.debugging.BuggyWidget");  
**</script>  
</head>**  
 [**<body**][body]class="tundra"**>**  
[**<div**][div] dojoType="dojobook.online-book.debugging.BuggyWidget"**>** **</div>  
</body>  
</html>**

dojo. provide ( "dojobook.online-book.debugging.BuggyWidget" );  
dojo. require ( "dijit.\_Widget" );  
dojo. declare (  
 "dojobook.online-book.debugging.BuggyWidget",  
\[dijit.\_Widget \],  
\{   
postCreate: **function** () \{   
dojo. nonExistentMethod ();  
\}  
\});

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

[![debugging8.png][]][debugging8.png]

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

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

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

[![debugging7.png][]][debugging7.png]

**重要提示：** 你一定要在发布的程序产品中把 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>

**原文地址：[http://dojotoolkit.org/book/dojo-book-0-9/][http_dojotoolkit.org_book_dojo-book-0-9]**

转载请标明译者：朱雄业

[Firebug]: http://getfirebug.com/
[script]: http://december.com/html/4/element/script.html
[html]: http://december.com/html/4/element/html.html
[head]: http://december.com/html/4/element/head.html
[title]: http://december.com/html/4/element/title.html
[style]: http://december.com/html/4/element/style.html
[body]: http://december.com/html/4/element/body.html
[form]: http://december.com/html/4/element/form.html
[input]: http://december.com/html/4/element/input.html
[br]: http://december.com/html/4/element/br.html
[debugging1.png]: http://www.dojotoolkit.org/files/debugging1.png
[debugging2.png]: http://www.dojotoolkit.org/files/debugging2.png
[firebug_logging.png]: http://www.dojotoolkit.org/files/firebug_logging.png
[firebug_ie_capture.png]: http://www.dojotoolkit.org/files/firebug_ie_capture.png
[firebug_logging2.png]: http://www.dojotoolkit.org/files/firebug_logging2.png
[debugging4.png]: http://www.dojotoolkit.org/files/debugging4.png
[debugging3.png]: http://www.dojotoolkit.org/files/debugging3.png
[div]: http://december.com/html/4/element/div.html
[debugging5.png]: http://www.dojotoolkit.org/files/debugging5.png
[debugging6.png]: http://www.dojotoolkit.org/files/debugging6.png
[debugging8.png]: http://www.dojotoolkit.org/files/debugging8.png
[debugging7.png]: http://www.dojotoolkit.org/files/debugging7.png
[http_dojotoolkit.org_book_dojo-book-0-9]: http://dojotoolkit.org/book/dojo-book-0-9/