📄 debugging tutorial the dojo toolkit.mht
字号:
Tutorial</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-297><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/introduction">Introduct=
ion</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-324><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo-0">Par=
t 1:=20
Life With Dojo</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-298><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit-0">Part =
2:=20
Dijit</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-299><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo-0">Part=20
3: JavaScript With Dojo and Dijit</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-300><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo-0">Par=
t 4:=20
Testing, Tuning and Debugging</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-301><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-5-dojox-extensions=
-dojo-0">Part=20
5: DojoX</A> </LI></UL>
<LI class=3Dcollapsed id=3Dmenu-item-54><A title=3D"The Dojo Book, =
0.4"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-4">The Dojo Book, =
0.4</A>=20
</LI></UL></DIV></DIV></DIV></DIV>
<DIV class=3D"col-b content-region-container">
<DIV id=3Dmain-container><!-- main_content region -->
<H2>Debugging Tutorial</H2><!--Node: -->
<DIV class=3Dnode>
<DIV class=3Dsubmitted>Submitted by criecke on Thu, 11/22/2007 - =
03:06.</DIV>
<DIV class=3Dcontent>
<P>Dojo is very lean and speedy, and uses some very clever tricks to =
save memory=20
and time. The downside: Dojo does not contain much error trapping, which =
would=20
bloat and slow down the code. If your code is not behaving, some of the=20
resulting errors can look mighty puzzling at first.</P>
<P>No worries! Here are a few tips to make you a confident, successful =
bug=20
finder. Knowing these ahead of time will make your Dojo learning curve =
less=20
steep.</P>
<H2>Use Firebug or Firebug Lite</H2>
<P>We can't stress this enough. Firebug, an open source debugging =
extension for=20
Firefox, is <I>essential</I> for JavaScript, HTML and CSS debugging. You =
can=20
download it from the <A href=3D"http://getfirebug.com/">Firebug web =
site</A>. </P>
<P>Not a Firefox user? You may want to consider switching, at least for=20
development work. One of Dojo's virtues is its hiding of cross-platform=20
differences. So the more you rely on it, the more your code will be =
portable,=20
and the less difference your development browser choice matters.</P>
<P>Still not convinced? That's OK too. If you use Internet Explorer or =
Safari,=20
you can use the Firebug Lite library, bundled with Dojo. This gives you =
some of=20
the logging and command line features of Firebug. It's not a full =
emulation, but=20
it's a fairly good alternative and is fully API-compatible. </P>
<P>To use Firebug Lite, you must include the isDebug config parameter =
like=20
so:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/javascript"</SPAN> <SPAN =
class=3Dkw3>src</SPAN>=3D<SPAN=20
class=3Dst0>"http://o.aolcdn.com/dojo/1.0.0//dojo/dojo.js"</SPAN> =
<BR> =20
djConfig=3D<SPAN class=3Dst0>"parseOnLoad: true, =
isDebug:=20
true"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN></DIV>
<P>This parameter has no effect on Firefox browsers with Firebug already =
present. So including this parameter makes your debugging code usable in =
IE,=20
Safari, and Firefox with no changes. </P>
<H2>Faulty dojo.require's and the Firebug Console</H2>
<P>The following code has a subtle bug:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN=20
class=3Dsc0><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML =
4.01//EN"</SPAN><BR><SPAN=20
class=3Dsc0> =20
"http://www.w3.org/TR/html4/strict.dtd"></SPAN><BR><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/html.html"><SPAN=20
class=3Dkw2><html></SPAN></A></SPAN><BR><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/head.html"><SPAN=20
class=3Dkw2><head></SPAN></A></SPAN><BR><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/title.html"><SPAN=20
class=3Dkw2><title></SPAN></A></SPAN>Fix me!<SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></title></SPAN></SPAN><BR> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/style.html"><SPAN=20
class=3Dkw2><style</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/css"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
@import=20
"http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";<BR> =
;=20
@import=20
"http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"<BR> =
<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></style></SPAN></SPAN><BR> =
=20
<SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/javascript"</SPAN> <SPAN =
class=3Dkw3>src</SPAN>=3D<SPAN=20
class=3Dst0>"http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.js"</SPAN> =
<BR> =20
djConfig=3D<SPAN=20
class=3Dst0>"parseOnLoad: true, isDebug: true"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN><BR> =
<SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text/javascript"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
=20
dojo.require("dojo.parser");<BR> =
=20
dojo.require("dijit.form.Textbox");<BR> <SPAN=20
class=3Dsc2><SPAN class=3Dkw2></script></SPAN></SPAN><BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></head></SPAN></SPAN><BR><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/body.html"><SPAN=20
class=3Dkw2><body</SPAN></A> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"tundra"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN><BR><SPAN =
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/form.html"><SPAN=20
class=3Dkw2><form></SPAN></A></SPAN><BR>What's the 411? <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text"</SPAN> <SPAN class=3Dkw3>size</SPAN>=3D<SPAN =
class=3Dst0>"20"</SPAN>=20
<SPAN class=3Dkw3>name</SPAN>=3D<SPAN class=3Dst0>"info"</SPAN> =
dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.TextBox"</SPAN><BR> =
=20
trim=3D<SPAN class=3Dst0>"true"</SPAN> propercase=3D<SPAN=20
class=3Dst0>"true"</SPAN> /<SPAN class=3Dkw2>></SPAN></SPAN><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/br.html"><SPAN=20
class=3Dkw2><br></SPAN></A></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></body></SPAN></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></html></SPAN></SPAN></DIV>
<P>Without Firebug, this code may pop up an unhelpful dialog box (IE) or =
display=20
nothing (Firefox). In either case the textbox doesn't look right. You =
check this=20
by entering a lowercase name and tabbing out of the box ... the =
propercase=20
attribute should capitalize the first letter. It doesn't. </P>
<P>With Firebug the error is easier to spot. First, there's an indicator =
at the=20
bottom right hand corner.</P><A title=3D"View: debugging1.png"=20
href=3D"http://www.dojotoolkit.org/files/debugging1.png"><IMG =
class=3Dinline=20
title=3Ddebugging1.png alt=3Ddebugging1.png=20
src=3D"http://www.dojotoolkit.org/files/debugging1.png"></A> <BR><BR>
<P>You click on the "1 Error" message and the Firebug console pops =
up:</P><A=20
title=3D"View: debugging2.png"=20
href=3D"http://www.dojotoolkit.org/files/debugging2.png"><IMG =
class=3Dinline=20
title=3Ddebugging2.png alt=3Ddebugging2.png=20
src=3D"http://www.dojotoolkit.org/files/debugging2.png"></A> <BR>
<P>Looking back at your code, you notice the capitalization on "Textbox" =
in the=20
dojo.require is wrong. That's a common mistake, but easily fixed. It's =
also=20
common to forget the dojo.require, or to misspell the class in the =
dojoType=20
attribute. In each case, Firebug will set you straight.</P>
<P>Firebug Lite will give you a similar console, but it will appear =
naturally at=20
the bottom of your browser window. To turn it off, you must set the =
isDebug flag=20
to false and run the page again.</P>
<H2>Errors In Dojo/Method and Dojo/Event Code</H2>
<P>The following code has an error:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><!DOCTYPE =
HTML <SPAN=20
class=3Dkw2>PUBLIC</SPAN> <SPAN class=3Dst0>"-//W3C//DTD HTML=20
4.01//EN"</SPAN><BR> <SPAN=20
class=3Dst0>"http://www.w3.org/TR/html4/strict.dtd"</SPAN>><BR><htm=
l><BR><head><BR><title>Fix=20
me!</title><BR> <style type=3D<SPAN=20
class=3Dst0>"text/css"</SPAN>><BR> @<SPAN=20
class=3Dkw2>import</SPAN> <SPAN=20
class=3Dst0>"http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.cs=
s"</SPAN>;<BR> =20
@<SPAN class=3Dkw2>import</SPAN> <SPAN=20
class=3Dst0>"http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"</SPA=
N><BR> =20
</style><BR> <script type=3D<SPAN=20
class=3Dst0>"text/javascript"</SPAN> src=3D<SPAN=20
class=3Dst0>"http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"</SPAN> =
<BR> =20
djConfig=3D<SPAN =
class=3Dst0>"parseOnLoad:=20
true"</SPAN>></script><BR> <script type=3D<SPAN =
class=3Dst0>"text/javascript"</SPAN>><BR> =
dojo.<SPAN=20
class=3Dme1>require</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"dojo.parser"</SPAN><SPAN class=3Dbr0>)</SPAN>;<BR> =
=20
dojo.<SPAN class=3Dme1>require</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"dijit.form.Button"</SPAN><SPAN =
class=3Dbr0>)</SPAN>;<BR> =20
<SPAN class=3Dkw2>var</SPAN> newWidth =3D <SPAN=20
class=3Dst0>'200px'</SPAN>;<BR> =20
</script><BR></head><BR><body <SPAN =
class=3Dkw2>class</SPAN>=3D<SPAN=20
class=3Dst0>"tundra"</SPAN>><BR><div dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.Button"</SPAN>><BR> Click to =
<SPAN=20
class=3Dkw1>break</SPAN>!<BR> <script type=3D<SPAN=20
class=3Dst0>"dojo/event"</SPAN> event=3D<SPAN=20
class=3Dst0>"onClick"</SPAN>><BR> <SPAN=20
class=3Dkw1>this</SPAN>.<SPAN class=3Dme1>domNode</SPAN>.<SPAN=20
class=3Dme1>style</SPAN>.<SPAN class=3Dme1>width</SPAN> =3D dojo.<SPAN=20
class=3Dme1>newWidth</SPAN>;<BR> =
</script><BR></div>=20
<BR></html></DIV>
<P>But when you look at the console, there's no apparent error. If you =
were=20
programming in other languages, you might use a debugger and set a =
breakpoint on=20
the "this.domNode" line. Firebug's debugger let's you do that, but not =
on this=20
particular code. Scripts of type "dojo/event" and "dojo/method" are =
compiled and=20
interpreted differently than "text/javascript" ones. But there are a =
couple of=20
alternate debugging methods.</P>
<H3>Method 1: Logging</H3>
<P>The first method is <I>logging</I>, and if you've used modern logging =
tools=20
like log4j you'll find it familiar. The idea is to write trace messages =
to a log=20
which you can then use to find variable values or the last executed bit =
of code.=20
</P>
<P>Why not just use alert() ? The trusty JavaScript alert() is a =
favorite=20
debugging tool, but it suffers from the following problems:</P>
<UL>
<LI>If you have many alerts, it's annoying to keep clicking [OK]=20
<LI>Too much text can make the dialog box overflow the screen=20
<LI>You must remember to remove every alert() before release=20
<LI>alert() in a tight loop might make it impossible to stop without =
killing=20
the browser process=20
<LI>You cannot easily print object contents or arrays </LI></UL>
<P>Clearly alert's just not powerful enough. In Dojo logging, you can =
associate=20
messages with severity, just like in log4j. The following code =
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -