2023年-软件工程师-Web开发者可能不知道的12个Firebug技巧.docx

Web开发者可能不知道的12个Firebug技巧Firefox搭配Firebug在web程序设计中，可谓是“双剑合壁”，功能强大，本文选取了其中的 一些技巧予以介绍，帮助大家更好的掌握Wob开发的技能，让开发事半功倍！相信很多从事Web开发工作的开发者都听说和使用过Firebug,但可能大部分人还不知道，其实它是一个在网页 设计方面功能相当强大的编辑器，它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是 Firefox浏览器的一个插件，所以建议各位Web开发者，要充分利用FireFox浏览器和Firebug插件进行日常的 调试工作。本文选取了 12个Wob开发者应该掌握的Firebug的初级使用技巧，介绍给大家。1、使用Firebug可以找到页面中的任何内容不知道各位有无遇到过这样的情况，在一个复杂的HTML页面中，当你想找某个页面元素的实际对应的HTML时, 你不得不在一大堆HTML代码中去查找，十分麻烦。有了 Firebug,现在你只需要在页面中，用鼠标右键选中某个 元素，然后在弹出的菜单中，选择“查看元素”，马上就会在HTML页面代码中找到该元素对应的代码了，十分 方便，如下图所示：Lenars 叱人"叫2r.少乐上百节在新窗口中打开世) 在新标筌页中打开建)将此链接加为书签1) 链接另存为也) 发送链接也) 复制链接地址(A)DONitent m 1 div. content查看图片a) 复制图像复) 复制图片地址也)<span<span<span<span<span图片另存为(V)-"发送图片®设为桌面背景)阻止来自image4. i tl68. co*的图片)属性建)</div></div>二D查看元素-<div ii="NewsPicTxt"、<a -Lank" t i 11 e二"mil腌泰糊泼璃混挖坐晚b喇同样，也提供了更快速的方法：只需要点Firebug插件左上方的箭头，如下图所示，则每当鼠标在页面中移动时, 在Firebug控制台中就马上显示移动时经过的HTML元素的代码：2、可以使用Firebug修改HTML和CSS通过Firebug,可以直接修改HTML,增加HTML的属性,删除元素，增加CSS样式及实现更多功能,如下图:. 1 1 . ； Ij " |：CoiiiGie HTML CSS Script DOM Net<> Edit a.video-link < li < ol < div#libr.ent-main < div#library-content < div#lib.丁：Copy HTML<c<F<a<h<P<dCopy XPathCopy CSS PathLog EventsScroll Into ViewNew Attribute.Edit HTML.NDelete ElementBreak On Attribute ChangeBreak On Child Addition or RemovalBreak On Element RemovalInspect in DOM Tab.al E(d in <h2>ence i?lan <SeitlCopy innerHTMLX Find: geometryDone，Next . Previous 4 Highlight all Mat 你的技术开发频道在上图的菜单中可以清楚看到，你可以对HTML元素进行各样的修改操作，方法是先点击HTML部分的代码，然后 鼠标右键即可在弹出的菜单中进行操作。3、可以通过Firebug查看D0M元素和对XML进行操作当打开一个HTML页通过Firebug查看HTML代码时，你可以同时点在控制面板中的D0M树，就会以D0M的树型结 构方式看到整个HTML的结构。而如果你是打开了一个XML文件，那么鼠标右键点XML文件中的任何一个元素， 在弹出的菜单中同样可以选择对XML进行相关操作，如下图:-<ns6rs>-<user><firstNam e>Brian< firstN a m e>via st、a m e>B ondy < la s tN ame> </user>-<user><firstName>Shannon< firstName><IastNam e>B ondy<l astName></user><users>q三'Console HTML CSS Script DOM Net<> Edit firstname < user < users曰 <user><la= Copy HTML<user>/uaer3>Copy innerHTMLCopy XPathCopy CSS Path你的;技术并发频道4、使用 Firebug 调试 Javascript 代码在Firebug控制台中，如果要执行调试Javascript代码，只需要首先将Script控制面版启动，然后在点击Console 按钮，在下拉菜单中选择显示Javascipt及HTML错误（还可以让用户选择显示更多的错误），接着在底部会发现 出现的箭头，在这里，你可以输入Javascipt代码，输入后，马上按回车键，就可以执行了，十分方便，如 下图：ClearPer加* > «：；* HTWProfile | AA ； Enon你的技术开发频道产然加中;»> ;|0<x)«一个小技巧是,在输入Javascipt的时候，还支持使用tab键的自动完成提醒功能，比如对于一个很长的Javascipt 函数，在没输入完的时候只要按tab键firebug就会帮助你自动补充完整。无论你重复加载多少次页面，Firebug在每次加载页面后总会自己记得加载前页面所在的位置（比如你已经在浏览 页面的底部，此时再加载页面，则新的页面加载后，依然把你带到页面底部）。6、使用$标记去方便访问变量在上面的第4点中，我们提到了在这个命令行下可以进行Javascript的调试，而另外一个技巧是可以使用如 $1去访问曾经访问过的变量中的最后一个，如此类推，可以使用$2访问曾经访问过的变量中的倒数第二个。如 下图：7、Firebug会高亮度显示修改过的内容在Firebug中，只要你修改过页面中的内容，就会以黄色高亮度显示曾经修改过的内容，如下图:Gh优ok KTEf.w 0 Saipi DOM Netlink < div#post-content < div#post < div#mainContent < div#container < body#bod.odiv id=,post-date *f> div id=,post-contentn> 0 <h2><a href=,t/blog/id/109/the-big-picture-of-how-khan-academy-dev </h2><h3> Lagt modified: Tueadayr February 08r 2011 </h3><img 3rc=,f/staric/img/conrenr-DIVI2ER.gif,f>+1 <div clas3=,blcg-body,> 田<p>+1 <D><a clas3=*coinnents-linkn href=u Javascript zrcggleCoarjnenrs (109) ;3+1 <div邑nc-109" cla33=,wccnznenrsH3tyle=udisplsy: block;,f：<p> </p>(±1 <div id="Comment3-109” clasa=,coirnnents,t width=n50%° style=,displaiHighlighted in YELLOW is the comment boxBELOW WHEN I CLICK丽 Sub net8、监视Javascript的运行性能在Firebug中,你可以点控制台中的“profile（概况）”选项,这将开启Firebug的性能监视功能,之后你可以 进行页面的一系列操作，当再次点profile按钮后，将停止对性能的监测活动，接着Firebug会显示一个列表, 其中会清楚列明操作过程中所涉及的函数，调用次数，占用时间、平均时间，最小时间，最大时间等，如下图所 不：TRL CttMN10 «M)Mera”HM EMJI32.t.a27h«2例ms2.837AVZ.8lg2.817VWx2k>«ffQrt>ADIS12326%L3l3n«22.2O3m(22.2CR22Nn119.52%LI02n«2.322ms2122rM2.122n«2.I22TV9、Firebug强大的网络数据监视功能Firebug还提供了十分功能强大的网络数据监功能。开发者在开发web应用时，经常要观察各类HTTP请求和回应， 在这方面Firebug的功能十分强大。首先，只需要开启控制面板中的网络功能，然后在每次运行页面时，都可以 清楚看到每个HTTP的请求和HTTP回应的具体细节。如下图：/ /粒例 «T«L CSS * DOMm g.海丹 前ffa 4 bm tD片 n«hurl一一 aa.大小 HMtt0 玲0&日9塔在5余办附门酊修同*»京%校费席oJ.fdhiACom tv.sohuccm cU.44hi».com0J0J 8.5K80 W56 j 2200 144fM5.4 KB | TOrrtf 3. ns 明 8jg 256ms6218| 273WX.3K862。H.6KB 803 B 6、你的技术开发频道/A O八、.GfT peHonrd Ap(4r GHgfotMlldc”, GHZOlOc” GET «howVrsPtayer.js GET 2010 newxft Gf T whu_k)90?.GT grecn_logo2.gif,田 MLdl46d2ff_6T1_4 GET Bd3_7b469ef8_bc8f_4S33 CH 121JB904247. daed 4e3l GET 121 一 免。1必2_153<_4立在上图中，只要点每一个请求旁边的+号，就可以看到该请求的具体细节，如下图:Khr清除保持 所有 HTML CSS JS XHRURLjj 软鑫0网络面板已激活.在面板未激活时的任何谙求都不会独显示.三 GET poisoned-apple200 OK响应炙咎电Content-Type Connection Date Server Vary Cache-Control Expires Last-Modified Content-Encoding Content-Length Fcc_rHeaders 响应 HTMLtezt/html keep-alive Thu, 17 Feb 2011 01:50:16 SWSAccept-Encodinc maz-aEe=120Thu, 17 Feb 2011 01:52:16 Thu, 17 Feb 2011 01:36:53 Ezip 8731UTT cm 21USdSd7 QQUSni 21可以看到，能看到HTTP的头部的各种信息。同样，如果要看当前页面中的比如图片，FLASH等元素的信息等，也 可以通过上图去点不同的选项卡去筛选查看，十分方便。10、使用Firebug的Log功能在设计页面时，经常要记录下页面的一些信息，这个时候，可以使用Firebug中的log日志功能，把一些信息输 出到firebug的控制台中，这样就方便调试了。Firebug提供了一个console对象，在插件加载的时候就注册到 Javascript的运行环境中去了，可以在程序中直接使用。console对象提供了一个log方法，举例说明如下：在Firefox中执行如下代码，会看到Firebug的控制台中出现如下信息:砺C!r PrFle口Console HTML CSS Script DOM NetOptionsThis is log messageThis isdebug messagetest.htm (line10)Thisiserror messagetest.htm (line11)O Thisisinfo messagetest.htm (line12)! Thiaiswarning messagetesthtm (line13)可以看到，各个级别的日志输出，都带有一个彩色的图标，能给用户很醒目的提醒。同时，console.log还支持»>Done你的技术开发频gJ代.靴册.net格式化字符串的输出，你可以用类似C语言中printf的语法来调用这个函数:console. log("%s is %d years old.“Bob”，42) o11、可以在Firebug中调试程序在Firebug控制台的的Javascript控制面板中，可以对页面中的Javascript进行调试，方法很简单，只需要在要调试的行的左边单击，就会出现断点了，之后请记住下面常件的快捷键：(1) F10进入下一行;(2) F8继续调试;(3) F11进入Javascript中的函数体调试;(4) Shift+Fll跳出函数体。V « 六 !Console HTML CSS Script DOM Net. I， addCommas < / Make the CSS-only menus keybcard-acceasil71$ < f.css-menu a*).focus(function(e)72$ <e.target).addClass('cs3-menu-j3-hover73 ) .blur (ftmct;xon(e) 74$(e.target).removeClass(, css-menu-js-ho75)；787980818283)84858687888990919293949S7G)；/Javascript for estimating the cumulative videc function addCommas(nStr)( nStr;x = nSr- 一、，»)；xl = x|”38886451“一x2 = x. length > 1 2 'J + xl : f ,;var rgx = /<d+)<d3)/; while (rgx.test(xl) xl = xl.replace(rgxrr $1 * +，* + * ?2 *); return xl + x2;Read 你的技术开发频道 在Firebug中，还可以设置带条件判断的断点，如下图:2 function getFocus0 var frm = document.loginForm;document. RetElementByldC'ua"). focus();310111213var只工球袤达式为真H才在波断点处件Itvar loEinidzloEinidl. replace(/s+/c, ，v);var passTOrdl= document, get El em ent By I dpa") .value;var passwDrdzpasswordl. replace(八;varWordl = document. cetElemeigId * * T S S as “FireBugFirebug是网页浏览器Mozilla Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。 它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax 的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给呢b开发 者带来很大的便利。例如Yahoo!的网页速度优化建议工具YSlowoFirebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、DOM、与JavaScript 代码。