firebug实用技巧_第1页
firebug实用技巧_第2页
firebug实用技巧_第3页
firebug实用技巧_第4页
firebug实用技巧_第5页
已阅读5页，还剩25页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、第 8 章 调试技巧理想的软件开发是不需要调试的，但在现实开发过程中，开发人员总是会因为不同的原因而犯各种各样的错误，以至于给所构建的系统带来不同程度的危害。有些错误浅显而低级，比如用错了大小写，或者写错了变量名等等；而有些错误是复杂的逻辑错误，这类错误往往隐藏较深，不容易找出错误的原因；另外一些错误可能是功能实现的方式有问题，导致程序有性能瓶颈等等。可以说，软件开发就是不断编码和调试的过程。使用好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。本章将向读者详细介绍使用 Firebug 和 Aptana 调试 JavaScript 程序的一些技巧。深入解析 Firebug 的调

2、试功能在本书的第五章中已经向读者介绍过了 Firefox 浏览器的优秀调试插件Firebug 的界面和基本功能。本节将向读者深入讲解如何利用 Firebug 的控制台输出各种自定义的信息、查看错误提示，如何利用命令行工具在页面上执行JavaScript 代码，以及如何使用脚本查看器进行脚本的调试。检查常规错误当 Firefox 遇到一个 JavaScript 错误时， Firebug 会在其控制台输出一个错误信息。这个错误信息包含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及事件对象信息。下面这个示例中，在测试按钮的事件处理函数中调用了一个不存在的函数，代码如下所示。&l

3、t;!DOCTYPEhtmlPUBLICFirebug的控制台中。还支持5种占位 Inxptc t rwitir-8-1占位符符TH1Co-UDli "EL C5J%s%d,%i%f<!JMCTH® htnl 3nlH5=k6“心E讨 tp_-quHQ8a+rD=”f皿Ctim ETIOI8%oe£ ILeI £1!tri*.H rurnrdlHA ongtdrDfija 4kii OnyrM r * 小 rdatTriiK r-snofPsrertscpeeftX5cd:I»I DDM说明字符串整数浮点数对象 ll £TiE

4、干Opti«TlE -lU'jl m iul皿IESII -3a tee lj«ii_ *jtpx Ji LaT"-.,messageN);在代码被执行时，其参数会被连接在一起输出到符，见表8-1所不。此位符只-I-wiwh Gifcfy 5MM 4Hct¥ 内小而ImUwr4i bJaic renriA CBfK»Butbh fcTfUftec! bOuir-hiM物:如hu32 血 I? rm Ifm hiH la r-F的第一个参数中使用。当第一个参数中包含占位符时，程序会根据占住符嗷竺盘从第二滑数开始的足够数量的参数替换到对应的

5、占位符所在的位置，剩下的其他参数，则i w照期魏仔为用神，接到输出信息的末尾。:下面的示例演示了的用法，其代码如下所刁: 1 Ijfte，口onaoda dtix>liilla PiretDi孱5 我国 E4 用史的 节3E Xi IM, «tt> it) #1 WlV 界 M.,liS <-na<-la ：chfli rnxWn一4CTRrInspac t Cl«>u' BrofbltOp匕的1 -Cauxx>l« BTML CSS ScElpt BDH 电 tmill LB-it ftrror . hlB. . .

6、( I.UftIfrirjiqtl Clitr Tr4Ell4fmcCiocn. ettotTeE。riotEzi e1 Fund ionO ;I noCExlstFunciKri t not ijsfh&iderror Test()ondidcliefe: clLi«>tX=iD|l cl 1 T= D) uj1Exix.4FYiac 1otl(),门不停在由语降, , 1. 4HTMI CSSm CFJ ErcdHl DDK hlIjisp-AC truii4irii_atrr ar htitlHDKT6 MN F皿TC晖DTL KHF9a I. t TfeMtl：

7、hM>：/wiL1/md<h1*t xn ns-,ht I d :6.轴靠1：11上门1<he&d><n4t4. M tp-*iiaiT= *Gcm.tMtt_T，n>«J! tout 由dtt 电; cliA.TX.&t=iit />Vctth Hr匕.nTi!i 0忖例咖rtdi ccapriMsai.<lba<tr><LnfrMlIan" UAu.AL_"ldf.1 tuIMs/ om-I 1-idcEB*tyatlist0 ;* />html<!DOCTYPEPU

8、BLIC"-.")； ('message end') </script> </head><body> </body> </html>qt Cltu' frofilbHTMI CSS Script WK耳 ElU I： Nd1量&” « 式！ dMg” = L23. 22 in.1 = 55 51 TITLE = a” otject = Obj 七tl ha七=e& 3tE=.vfl j 7 aTnber = li2l. 22 . i制=55 r i-trina =g

9、 1Qbivcl = Qbicrt bmc= see=«j J julluri-. a.G««T明 盾223 -使用 Firefox 访问该示例页面，可以看到在Firebug 的控制台中输出了指定的信息，如图 所示。图 示例与 一样可以接受多个参数，所不同的是通过 输出的信息会被添加一个链接，单击链接时会根据参数的类型自动转换到其他视图。当参数为 DOM 对象或者JavaScript 对象时，会转到 DOM 查看器显示对象的详细信息。当参数为 HTML 元素时，则会转到 HTML 查看器并定位到该元素节点上。如果参数为一个函数或者方法，则会转到脚本查看器并定位到函

10、数或者 方法的定义所在行。如果参数只是一个数字或者字符串等基本类型的值，则不会添加任何链接。比较特殊的是当参数为数组时，Firebug会分析其中每个元素的类型并添加相应的链接。下面的示例显示了 的用法，代码如下所示。<!DOCTYPEhtmlPUBLICc-im>r_4w(1 in Lt)FUBXD 1« £ x-a eoB-Eal«. «n-a>r_.(1 .(1 End Zt)eoB-EDl a. 工工口，.(llUfi Zl) , (J luie ZZ)COBSDl e. «工工口T_fl.Ecvxol量.r-rroT_

11、deH.(iime il)tqI-型. tnoT-deB'.(line &(1 i ”*. *£i-ar_-d.AB.(1的&)eDB-EDl«. 工 £口_好.(llllft ZTj9 ID Errors 老("func('123',1)");func('123',1);("func(123,1)");& Iiispifcc t Cie Frcifalit |-.li.funC(123,1)；r £©"Y"fun

12、1;(new Object(),'123')");fi L 1, 2r 也 Dlb iuA.B«=rt>a E*1=00i4 J2j. alES* 二 func(new Object(),'123');O("func('sss',)");Q fi£nc la.> bJ. funcCsss',);© p i y/scriptAz 上 in白 *>七3白口1 ftiiucij g sj-Ajr Ft肥> HUlT，</head> mdt 皿百 *1

13、印=> J Al fa EK=JKinJx' k.p»Cci d.eVtBe=.4h?jrj /Ji *F»«：驻=卜口1* 宓 Fupt1完成<body></bOdy> </html>其输出到控制台的结果如图所示。230 -Cansnl.FwkC lii'.i)funClZ3, l)Q it unfiixt kffclifiHIMOptionsfWie(MiV! ObjAd l! ()/ L 2Sr) 0 at ruin 4 El t A 1£ DuDt d -El: LUj示例(1 I Di

14、A- 3TaLe* 35可以直接将对象或 HTML元素的详细信息输出到Firebug中，就同在 QOM.避毒器申查”：片春的信息一样。下面的例子演示了的用法。<!DOCTYPEftkl«cmvh-xqI «sser*SE4 ErrorshtmlPUBLIC"-程序中使用关键字debugger现在来使用一个简单的例子演示该功能，如下所示。<!DOCTYPEfvnct iInErp4l Cl* Ai* ProfiLanjfKl (nonImpKt Cl*«r ProfileConsoleTKL 加timcl ?fwicB 2土 三->j C

15、33 ' Tmwtt 1>4<wi r U LDd*v*4*.m p li ik<L1«h<u-<- MlLiivi : , Xiai iq -屋"Twli，*一irw B,c«,p - fpijH/弊中.二一n CLbbt FrakLa£«iaE-la UH. dll ikrrla4 IM VaiA aLunilhCKMF Gig ii:融通阴xoJco*ujd.I_d.es. . . flme 1 fWpl I El *« . £Q1L£lI. .(11A4 11口pE；两

16、工Fk EQ I A . COU 4 _ dfiB . . . (l ilLA 11 JBSD I . COU.1 _ d.«£ . . . (j IHiE 11)htmlPUBLICK91 , 1 LrdsFrwdInspccl：d嘈h'QCE甯r_ds html * 定'七 vnclicktonsoi e HTKL 匕卷土UH Me*Opt L 0114 <!DQCTm htn FVSLIC *-/W3C/m MlfTXL LOT<h1«t inlins= vh.t 4 p: /wjt. g. ore/19纲I1E1 v>6”

17、心<ri6la. hi I ifiQalrs *Cwi1 *n.t-7rii* eitgiiHN/SMM ; etui t-Lft1=-u.lf-S'i /><ta Ue>detuE.Eer dm八Fti + L4><3ci ipt trp*=-1 tx tpaub-scriplt皿UtiDTL l34bllEONew atchi expression.+ thisHl k.dD V 廿口。MM。= 仃MM ±rWundefkied"-使用脚本查看器添加断点使用脚本查看器添加断点非常简单，只需要在代码所在的行的行号前面用鼠标左键单

18、击即可。现在?断电，如回拿 Inxpec kdbu/E嘈i*_dE。hti>l de，暮 号融工】甘卜Console ETJtLciipt PUH 3TetOptloni. ?mch JIt七hOplihie v<!DDCTm htn PmiCNlfTML LO InnsixM+& /wp. OTE/TR/ihipil/INaw 再就th expression.j <hl«L inln±=、1:Q p:"Rjr. g. 口“门 gVitLtnl'* thism *.4dv 43Md 也比1 <br/4 <HAla. h

19、l 1 »=*aul¥=*Ctffi1 #Alefint AHt=" Ie ax 4/h1 hL; dui6l=ulf-3'B />d3Hit II *:TEbuEEM dEoC/H t LCh2, <icnpt trP«=*tE±t jauu，匚 Fi&q'3func 11 DTL i3«b-QE0b*bwri.虹；V4I 4 = t.L9Mil b = ndd(«i l);12.Se1 ；LM 114 Bien 的 tr)L5 )vai U5 = : + y;:t atura16 JL

20、$ </scri&1>2E <bodtF>«1：即1 行"wHg"什UWiT oxH,，1rMbuj,。/>；c4 "bob'</htnl>2B|»>:一克成V4T 4=1.J4i b = 4dd.(>ii E) a.3«tr1 (1>);uai 早=i + r;t AtUDi15；</=crip1></h«dJDm闷)1l：wM:飞明 修父Duh.rT“样二/></bod7>*E1!fTmcticcn. &

21、;dd(XrT)</scripl></n«d>SibodbOIrptH te=%电，+&n" vq3uc=Ai«i：1 Vu.Uon* ffiwiick= ，d.*¥aE0 ." /> 1/body).i# -*171Mp电弓匕d电卜1步0昭r_dm* htol,* deb6Console HTHL C$5EciiptUR »ttOpli。Brculjuoint s0pt.i4n£<!DDCTYPE htn POLICMMIXL i.O TrinsitaoMilZ/Er xhH|&

22、gt; "加.M. 口tJTR/4<h1«L irklinx= vh.t 9p: /twa,. wS. dfe/s 391/liLtml v>26“心- <iiaI a. hl 1#aI b7ts*- efint Aiitz" Ie ax 4/h1 hL; eluTulurlf""1 />«HHMbuEEM<xciipt trpt=-ttit/ji&uhEcripl f工皿ctiDTL i3«biicOB 4A<lt«T：V-1I 4 = t .> 13U 4i b

23、 = 0 dD ；H LZdB电门 fh)；L3 1I1* Tmen的*d翻却力15 1 irai uijfi = : + y; ratuxa;L白l 勺 </scri&1>上。</h«,d>2E <bodtF> 行wMfth" g "*=1* BUWiT础，nmJ/>£3 </htnl> 五k''JJ>* this d b101 kdcvFu*? <bf/3undefined>»图添加断点单击Continue”按钮让程序继续运行，程序在第 12行被

24、中断，如图 所示。ikvnd匚目曲裳01七FT MX CSS<I9KTE7E FWUCXHTML L.丁修的小 19Ml"E “MWW*« 吗 加|/7*神11洞xn1rhtIp /wa Wqth/13 <h»d>4mt. hl tp-#guiT=*CMitMit_Ti7pe，b tout tat=A t 1:1 /hl*L; cIiats tt=iit i'_S6' />'j <Ut <9>d4t>>Uf 4 fc- dsno</ utL A>B <-s.e±

25、; Lpt 1 jjiz" t iii/jiMi setri ">t IhikH 蚓 MMihQMe用 wMchepressian.+ thtcHi hJov drJiaurffrjr. rfe.we JbMJdebuEET:V4.1 f = 11:uat 力 z & lid.1., IJ ;function 也</scrip5><ted(F>inFFi "4七二飞唱Hsu" mIuhT”，匕MMiT 0nciick=F*buE；n/>一克就图再次中断灵活运用断点、单步执行和些尝试以便熟练掌握这些功能的使用Wa

26、tch窗口可以方便的对程序进行深入的跟踪调试，读者可以多进行在其他浏览器中使用Firebug的控制台虽然Firebug插件只能在Firefox中使用，但是 Firebug官方提供了一个 JavaScript开发的组件，将 其包含到程序页面中就可以在其他浏览器环境中使用Firebug的控制台功能，官方将其称为Firebuglite。Firebuglite可以在 下载到。其包含的文件如图 所示，主 要有JavaScript文件、CSS文件、HTML 文件和 PNG文件。EnBg?- -JIAJOEX J fireboc 日台丘工总T1£Af¥ orlc4n. pM& f

27、irb士出 躺 e*。kml firebuc- j s firebupc js inEdl也虱l piif -ufnjffigjean. p n图 Firebuglite包含的文件将整个firebuglite包放到项目中，并在需要使用Firebug控制台功能的页面引入文件即可。卜面的示例演示了Firebuglite的使用方法，其代码如下所示。<!DOCTYPEhtmlPUBLIC('message end');deb3g4：er-t tsi htndebugger;i.12-<>就9h工1：?-6402匹气0毗电时-171. Gorrtsntw气,tJhtnd

28、: chat set =xrtf-8* /><t Lt lt>debugger deriaC/tit 1e><scriptcKt/r iptr >var a = debug. g.erb = var c = ale-i t (e)1;TiHer , t i2i ht.1fumction add y.V2LF I = M + y ictuin 工：</SCELpt </htad>OM-K - Apt du a J>E Winld O.Z. H. ITtKUIJ1- n X组由 喝植图 圆具T 艮第"j项目如 Ur. Seri

29、Mt百口田，看和加¥Eead-!卢 ScripiT匕 1 Frr*£sK H*fe 勖4"名称|他NbO的>二，/ 一 - j ntt-cad vaiD. (Empejid史d. Cbr把曲iml kl Lin曹 14 in /dtb'iEfi-etr.rdtb>XEE</bOdy>也皿"，iM*眄)山皿烫WC5.L4</htm屏 ”舒.Fire-fwfar*K esejfi thisobjectTindav。泥L口 ¥2<3* x*pj $1 <, illjscript* BUM 且 UJ25

30、1 所示。启动调试，程序在 debugger关键字处中断并返回Aptana,这时控制台中输出的信息如图PireFos Wet Ero"ser C： Frosrwi Fi电国e nuss 彩皆 ft act sonet iiisi£ t. 匿断.m白字字'c0>en也图 和dump使用输出调用堆栈信息同Firebug的一样，Aptana也提供了输出调用堆栈信息到控制台的方法，就是使用,该方法可以接受一个字符串参数作为输出信息的标题。下面来看一个简单的示例，代码如 下所示。<!DOCTYPEhtml PUBLIC"-W3CDTD XHTMLTran

31、sitionalEN"""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> demo</title><script type="text/javascript"> function funcA() ('funcA');debugger; funct

32、ion funcB() funcA(); funcB();</script></head><body></body></html>程序最终输出到Aptana控制台的信息如图 所示。甲 控前台 二一 稔5,万 壁 X麓 巨<£塔止Fimfwc Tai- C： oerFir4foKSEiftfax. 46f imcAat fwscA u h) ddbUgH-' ap-孙三，_七 £ KUe dfeftA. kt iliL 9) at funcE (ppp)J act 5% t r匚 u d”口. hi i

33、二】at nuilLCm.) fd-bug-Jastanai,七匕电匕4 dhtav 1 吕)图 示例253 -使用断言Assert API 来实比起Firebug的，Aptana提供了更为强大的断言的功能，其通过一组 现，见表8-3所示。表 8-3 Aptana Assert API-rm-w()卮、足悠凹断日":双。(obj)断百obj为真或者后意义。(arg1,arg2)Brm网/卜参奴相寺。(arg1,arg2)断百网下分数不等。(arg1,arg2)断 百弟一 T笏级匚匕弟一 T笏级天。(arg1,arg2)断百弟一，卜蓼数个比弟一，卜蓼数大。(arg1,arg2)断百第一

34、个参数比第一个参数小。(arg1,arg2)断百第一个参数7、比第二个参数小。(arg1,arg2)断百第一个参数被第一个参数包含。(arg1,arg2)断言第一个参数不被第二个参数包含。(expression)断百表达式为真。(expression)断言衣三火力假。(obj)断言对象为Null o(obj)断言对象不为Null o(var)断百义重木无乂。(var)断百变量口花义。(arg1,arg2)断百第一个参数为第二个参数日勺一个实例。(arg1,arg2)断百第一 1、参数小星第二个蓼数的一个实例。(obj,type)断言obj的类型是type。(obj,type)断言obj的类型不

35、是type。卜面的示例演示了这些方法的用法，示例代码如下所示。<!DOCTYPEhtmlPUBLIC"-/W3C/DTD XHTMLTransitional/EN"""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> demo</title><script type="text/javascript">();(null);(1,2);(1,1);(1,2);(1,2);(2,1);(2,1);("x",window);("document",window);

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论