📄 debugging tutorial the dojo toolkit.mht
字号:
illustrates the=20
five severity levels:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">console.<SPAN=20
class=3Dme1>log</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dst0>"Nothing=20
happening"</SPAN><SPAN class=3Dbr0>)</SPAN>;<BR>console.<SPAN=20
class=3Dme1>debug</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dst0>"Checking to make=20
sure nothing happened"</SPAN><SPAN =
class=3Dbr0>)</SPAN>;<BR>console.<SPAN=20
class=3Dme1>info</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dst0>"Something might=20
happen."</SPAN><SPAN class=3Dbr0>)</SPAN>;<BR>console.<SPAN=20
class=3Dme1>warn</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dst0>"Something=20
happened, but it's no big deal."</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR>console.<SPAN class=3Dme1>error</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"Cough cough!"</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;</DIV>
<P>In the Firebug console, the messages will appear like this:</P><A=20
title=3D"View: firebug_logging.png"=20
href=3D"http://www.dojotoolkit.org/files/firebug_logging.png"><IMG =
class=3Dinline=20
title=3Dfirebug_logging.png alt=3Dfirebug_logging.png=20
src=3D"http://www.dojotoolkit.org/files/firebug_logging.png"></A>=20
<P>In IE, they will appear like this: </P><A=20
title=3D"View: firebug_ie_capture.png"=20
href=3D"http://www.dojotoolkit.org/files/firebug_ie_capture.png"><IMG =
class=3Dinline=20
title=3Dfirebug_ie_capture.png alt=3Dfirebug_ie_capture.png=20
src=3D"http://www.dojotoolkit.org/files/firebug_ie_capture.png"></A>=20
<P>Another useful method, console.dir() dumps variable contents to the =
screen.=20
While console.log works fine for strings and integers, console.dir =
prints more=20
complex variables - objects, arrays, arrays of objects, or whatever. For =
example:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">console.<SPAN=20
class=3Dme1>dir</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dbr0>[</SPAN><BR> =20
<SPAN class=3Dbr0>{</SPAN>attribute: <SPAN =
class=3Dst0>"last_name"</SPAN>,=20
sortDescending: <SPAN class=3Dkw2>true</SPAN><SPAN class=3Dbr0>}</SPAN>, =
<BR> =20
<SPAN class=3Dbr0>{</SPAN>attribute: <SPAN =
class=3Dst0>"last_name"</SPAN>,=20
sortDescending: <SPAN class=3Dkw2>true</SPAN><SPAN =
class=3Dbr0>}</SPAN><BR><SPAN=20
class=3Dbr0>]</SPAN><SPAN class=3Dbr0>)</SPAN>;</DIV>
<P>produces:</P><A title=3D"View: firebug_logging2.png"=20
href=3D"http://www.dojotoolkit.org/files/firebug_logging2.png"><IMG =
class=3Dinline=20
title=3Dfirebug_logging2.png alt=3Dfirebug_logging2.png=20
src=3D"http://www.dojotoolkit.org/files/firebug_logging2.png"></A>=20
<P>So in our example above, we write:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">console.<SPAN=20
class=3Dme1>debug</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN =
class=3Dst0>"dojo.newWidth=20
is"</SPAN> + dojo.<SPAN class=3Dme1>newWidth</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR><SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>domNode</SPAN>.<SPAN class=3Dme1>style</SPAN>.<SPAN=20
class=3Dme1>width</SPAN> =3D dojo.<SPAN =
class=3Dme1>newWidth</SPAN>;</DIV>
<P>Running this, we quickly find that dojo.newWidth is undefined. Maybe =
we=20
spelled it wrong? To quickly find out, we change the debugging statement =
to:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">console.<SPAN=20
class=3Dme1>dir</SPAN><SPAN class=3Dbr0>(</SPAN><SPAN class=3Dst0>"dojo =
is"</SPAN> +=20
dojo<SPAN class=3Dbr0>)</SPAN>;<BR><SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>domNode</SPAN>.<SPAN class=3Dme1>style</SPAN>.<SPAN=20
class=3Dme1>width</SPAN> =3D dojo.<SPAN =
class=3Dme1>newWidth</SPAN>;</DIV>
<P>Nope, there's no property in dojo that looks like newWidth. Finally, =
we spot=20
our error and change the right hand side to "newWidth." Case closed.=20
<H3>Method 2: The "debugger" Statement</H3>
<P>Alternatively you can set a "poor person's breakpoint" in the code. =
Just=20
insert the debugger; statement, which is a legal JavaScript reserved =
word.</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN=20
class=3Dkw2>debugger</SPAN>;<BR><SPAN class=3Dkw1>this</SPAN>.<SPAN=20
class=3Dme1>domNode</SPAN>.<SPAN class=3Dme1>style</SPAN>.<SPAN=20
class=3Dme1>width</SPAN> =3D dojo.<SPAN =
class=3Dme1>newWidth</SPAN>;</DIV>
<P>This statement stops the code and brings you to a Firebug command =
prompt. It=20
appears the code has stopped at ... huh?</P><A title=3D"View: =
debugging4.png"=20
href=3D"http://www.dojotoolkit.org/files/debugging4.png"><IMG =
class=3Dinline=20
title=3Ddebugging4.png alt=3Ddebugging4.png=20
src=3D"http://www.dojotoolkit.org/files/debugging4.png"></A> <BR>
<P>That's a side effect of running dojo/event code. The breakpoints =
don't seem=20
correct at all. </P>
<P>But just click the Console tab and now you can examine variables or =
execute=20
just about any JavaScript you want. In this case, we look at the =
dojo.newWidth=20
property, which has nothing in it. But "dojo" does and we examine it by=20
console.dir(dojo). Basically all the logging features of method 1 are =
available=20
to type here.</P><A title=3D"View: debugging3.png"=20
href=3D"http://www.dojotoolkit.org/files/debugging3.png"><IMG =
class=3Dinline=20
title=3Ddebugging3.png alt=3Ddebugging3.png=20
src=3D"http://www.dojotoolkit.org/files/debugging3.png"></A>=20
<H2>To Follow The dojo.require Trail, Use Dojo Locally</H2>
<P>Since that code is now running, we try a minor variant which sets the =
button=20
to blue:</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> =
<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=3Dkw3>src</SPAN>=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><SPAN class=3Dkw2>></SPAN></SPAN><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN><BR> <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=3Dkw2>></SPAN></SPAN><BR> =20
dojo.require("dojo.parser");<BR> =
=20
dojo.require("dijit.form.Button");<BR> <SPAN =
class=3Dsc2><SPAN=20
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/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.Button"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
Click to break!<BR> <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>"dojo/event"</SPAN> event=3D<SPAN =
class=3Dst0>"onClick"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =20
this.domNode.style.backgroundColor =3D =
dojo.Color.named.aliceblue;<BR> =20
<SPAN class=3Dsc2><SPAN =
class=3Dkw2></script></SPAN></SPAN><BR><SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN> <BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></html></SPAN></SPAN></DIV>
<P>You check the console ... no errors there. But that=20
dojo.Color.named.aliceblue is a little questionable. You know that =
dojo.colors=20
needs to be included, but you thought dijit.form.Button already did =
that. </P>
<P>You can find out for sure by using a local copy of Dojo. CDN Dojo is =
very=20
quiet about the modules it loads. Local Dojo is very noisy. So, assuming =
our=20
local copy of Dojo is installed on the web server underneath /dojoroot, =
the=20
following change:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><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> =
<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=3Dkw3>src</SPAN>=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><SPAN class=3Dkw2>></SPAN></SPAN><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN></DIV>
<P>Yields the following on the console</P><A title=3D"View: =
debugging5.png"=20
href=3D"http://www.dojotoolkit.org/files/debugging5.png"><IMG =
class=3Dinline=20
title=3Ddebugging5.png alt=3Ddebugging5.png=20
src=3D"http://www.dojotoolkit.org/files/debugging5.png"></A>=20
<P>You see every Dojo Core and Dijit Component loaded. Sure enough, =
dojo.colors=20
is not in the list, so we add a dojo.require statement=20
<H2>That Doesn't Look Right ... DOM Inspection</H2>
<P>Unfortunately, that doesn't fix the problem either. When styling =
errors=20
occur, it's a good time to use Firebug's DOM Inspector. You can think of =
it as=20
View Source on steroids.</P>
<UL>
<LI>It displays the <I>current</I> DOM tree, not the one initially =
loaded=20
(which is what View Source shows)=20
<LI>You can examine the DOM properties of nodes by inspecting them - =
that is,=20
pressing Inspect and pointing </LI></UL>
<P>So we click Inspect and point at the screen button</P><A=20
title=3D"View: debugging6.png"=20
href=3D"http://www.dojotoolkit.org/files/debugging6.png"><IMG =
class=3Dinline=20
title=3Ddebugging6.png alt=3Ddebugging6.png=20
src=3D"http://www.dojotoolkit.org/files/debugging6.png"></A>=20
<P>The right-hand side of the console tells what styles and style rules =
are=20
applied to this class. Crossed-off lines are styles that have been =
overriden.=20
Very nice!</P>
<H2>Debugging External Classes With debugAtAllCosts</H2>
<P>dojo/method and dojo/event scripts are good for short, non-reusable =
snippets=20
of code. But when you start building reusable components, you'll be =
storing your=20
code into Dojo-declared classes instead. The good news is the more you =
make this=20
switch, the easier your debugging task will be. </P>
<P>So here's a piece of HTML code and a reusable Dojo-based widget:</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>Goolica Tax Form<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 =
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -