分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

如何调试Dojo

Dojo   发布时间：2022-04-21  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何调试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=@H_607_25@"text/javascript" src=@H_607_25@"http://o.aolcdn.com/dojo/1.0.0//dojo/dojo.js"
djConfig=@H_607_25@"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=@H_607_25@"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=@H_607_25@"text/javascript" src=@H_607_25@"http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.js"
djConfig=@H_607_25@"parSEOnLoad: true,isDebug: true"> </script>
 <script type=@H_607_25@"text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
</script>
</head>
 <body class=@H_607_25@"tundra">
<form>
what's the 411? <input type=@H_607_25@"text" size=@H_607_25@"20" name=@H_607_25@"info" dojoType=@H_607_25@"dijit.form.TextBox"
trim=@H_607_25@"true" propercase=@H_607_25@"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 @H_607_25@"-//W3C//DTD HTML 4.01//EN"
@H_607_25@"http://www.w3.org/TR/html4/Strict.dtd">
<html>
<head>
<title>Fix me!</title>
<style type= @H_607_25@"text/css">
@ import @H_607_25@"http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@ import @H_607_25@"http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type= @H_607_25@"text/javascript" src= @H_607_25@"http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig= @H_607_25@"parSEOnLoad: true"></script>
<script type= @H_607_25@"text/javascript">
dojo. @H_938_403@require ( @H_607_25@"dojo.parser" );
dojo. @H_938_403@require ( @H_607_25@"dijit.form.button" );
var newWidth = @H_607_25@'200px';
</script>
</head>
<body class= @H_607_25@"tundra">
<div dojoType= @H_607_25@"dijit.form.button">
Click to break!
<script type= @H_607_25@"dojo/event" event= @H_607_25@"onClick">
this. @H_938_403@domNode. @H_938_403@style. @H_938_403@width = dojo. @H_938_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_938_403@log ( @H_607_25@"Nothing happening" );
console. @H_938_403@debug ( @H_607_25@"checking to make sure nothing happened" );
console. @H_938_403@info ( @H_607_25@"Something might happen." );
console. @H_938_403@warn ( @H_607_25@"Something happened,but it's no big deal." );
console. @H_938_403@error ( @H_607_25@"Cough cough!" );

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

在IE中,显示如下:

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

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

输出结果:

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

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

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

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

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

方法 2: The "debugger" Statement

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

debugger;
this. @H_938_403@domNode. @H_938_403@style. @H_938_403@width = dojo. @H_938_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=@H_607_25@"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=@H_607_25@"text/javascript" src=@H_607_25@"http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig=@H_607_25@"parSEOnLoad: true"> </script>
 <script type=@H_607_25@"text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.button");
</script>
</head>
 <body class=@H_607_25@"tundra">
<div dojoType=@H_607_25@"dijit.form.button">
Click to break!
<script type=@H_607_25@"dojo/event" event=@H_607_25@"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=@H_607_25@"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=@H_607_25@"text/javascript" src=@H_607_25@"http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig=@H_607_25@"parSEOnLoad: true"> </script>
修改后代码：
<style type=@H_607_25@"text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css"
</style>
 <script type=@H_607_25@"text/javascript" src=@H_607_25@"dojoroot/dojo/dojo.xd.js"
djConfig=@H_607_25@"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=@H_607_25@"text/css">
@import "/dojoroot/dijit/themes/tundra/tundra.css";
@import "/dojoroot/dojo/resources/dojo.css"
</style>
 <script type=@H_607_25@"text/javascript" src=@H_607_25@"/dojoroot/dojo/dojo.js"
djConfig=@H_607_25@"parSEOnLoad: true"> </script>
 <script type=@H_607_25@"text/javascript">
dojo.require("dojo.parser");
dojo.require("dojobook.online-book.debugging.buggyWidget");
</script>
</head>
 <body class=@H_607_25@"tundra">
<div dojoType=@H_607_25@"dojobook.online-book.debugging.buggyWidget"> </div>
</body>
</html>
dojo. @H_938_403@provide ( @H_607_25@"dojobook.online-book.debugging.buggyWidget" );
dojo. @H_938_403@require ( @H_607_25@"dijit._Widget" );
dojo. @H_938_403@declare (
 @H_607_25@"dojobook.online-book.debugging.buggyWidget",
[dijit._Widget ],
{
postCreate: function () {
dojo. @H_938_403@nonExistentMethod ();
}
});

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

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

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

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

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

<?PHP
 $djConfig = $inProduction ? @H_607_25@"parSEOnLoad: true" : @H_607_25@"parSEOnLoad: true,debugAtAllCosts: true";
$loadLOCATIOn = $inProduction ? @H_607_25@"http://o.aolcdn.com/dojo/1.0.0" : @H_607_25@"/dojoroot";
$useXd = $inProduction ? @H_607_25@".xd" : @H_607_25@"";
?>
<style type= @H_607_25@"text/css">
@import @H_607_25@"<?= $loadLOCATIOn ?>/dijit/themes/tundra/tundra.css";
@import @H_607_25@"<?= $loadLOCATIOn ?>/dojo/resources/dojo.css"
</style>
<script type= @H_607_25@"text/javascript" src= @H_607_25@"<?= $loadLOCATIOn ?>/dojo/dojo<?= $useXd ?>.js"
djConfig= @H_607_25@"<?= $djConfig ?>"></script>

原文地址：http://dojotoolkit.org/book/dojo-book-0-9/

转载请标明译者：朱雄业

大佬总结

以上是大佬教程为你收集整理的如何调试Dojo全部内容，希望文章能够帮你解决如何调试Dojo所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：dojo如何调试
猜你在找的Dojo相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap