《2023年-软件工程师-Web开发者可能不知道的12个Firebug技巧.docx》由会员分享，可在线阅读，更多相关《2023年-软件工程师-Web开发者可能不知道的12个Firebug技巧.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Web开发者可能不知道的12个Firebug技巧Firefox搭配Firebug在web程序设计中，可谓是“双剑合壁”，功能强大，本文选取了其中的 一些技巧予以介绍，帮助大家更好的掌握Wob开发的技能，让开发事半功倍！相信很多从事Web开发工作的开发者都听说和使用过Firebug,但可能大部分人还不知道，其实它是一个在网页 设计方面功能相当强大的编辑器，它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是 Firefox浏览器的一个插件，所以建议各位Web开发者，要充分利用FireFox浏览器和Firebug插件进行日常的 调试工作。本文选取了 12个Wo
2、b开发者应该掌握的Firebug的初级使用技巧，介绍给大家。1、使用Firebug可以找到页面中的任何内容不知道各位有无遇到过这样的情况，在一个复杂的HTML页面中，当你想找某个页面元素的实际对应的HTML时, 你不得不在一大堆HTML代码中去查找，十分麻烦。有了 Firebug,现在你只需要在页面中，用鼠标右键选中某个 元素，然后在弹出的菜单中，选择“查看元素”，马上就会在HTML页面代码中找到该元素对应的代码了，十分 方便，如下图所示：Lenars 叱人叫2r.少乐上百节在新窗口中打开世) 在新标筌页中打开建)将此链接加为书签1) 链接另存为也) 发送链接也) 复制链接地址(A)DONit
3、ent m 1 div. content查看图片a) 复制图像复) 复制图片地址也)spanspanspanspanspan图片另存为(V)-发送图片设为桌面背景)阻止来自image4. i tl68. co*的图片)属性建)二D查看元素-div ii=NewsPicTxt、a -Lank t i 11 e二mil腌泰糊泼璃混挖坐晚b喇同样，也提供了更快速的方法：只需要点Firebug插件左上方的箭头，如下图所示，则每当鼠标在页面中移动时, 在Firebug控制台中就马上显示移动时经过的HTML元素的代码：2、可以使用Firebug修改HTML和CSS通过Firebug,可以直接修改HTML,
4、增加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 HTMLcFahPdCopy XPathCopy CSS PathLog EventsScroll Into ViewNew Attribute.Edit HTML.NDelete ElementBreak On Attribute ChangeBreak On Child Add
5、ition or RemovalBreak On Element RemovalInspect in DOM Tab.al E(d in ence i?lan SeitlCopy innerHTMLX Find: geometryDone，Next . Previous 4 Highlight all Mat 你的技术开发频道在上图的菜单中可以清楚看到，你可以对HTML元素进行各样的修改操作，方法是先点击HTML部分的代码，然后 鼠标右键即可在弹出的菜单中进行操作。3、可以通过Firebug查看D0M元素和对XML进行操作当打开一个HTML页通过Firebug查看HTML代码时，你可以同时点在
6、控制面板中的D0M树，就会以D0M的树型结 构方式看到整个HTML的结构。而如果你是打开了一个XML文件，那么鼠标右键点XML文件中的任何一个元素， 在弹出的菜单中同样可以选择对XML进行相关操作，如下图:-Brianvia st、a m eB ondy -ShannonB ondyq三Console HTML CSS Script DOM Net Edit firstname user users曰 la= Copy HTML/uaer3Copy innerHTMLCopy XPathCopy CSS Path你的;技术并发频道4、使用 Firebug 调试 Javascript 代码在Fi
7、rebug控制台中，如果要执行调试Javascript代码，只需要首先将Script控制面版启动，然后在点击Console 按钮，在下拉菜单中选择显示Javascipt及HTML错误（还可以让用户选择显示更多的错误），接着在底部会发现 出现的箭头，在这里，你可以输入Javascipt代码，输入后，马上按回车键，就可以执行了，十分方便，如 下图：ClearPer加* ：；* HTWProfile | AA ； Enon你的技术开发频道产然加中; ;|0x)一个小技巧是,在输入Javascipt的时候，还支持使用tab键的自动完成提醒功能，比如对于一个很长的Javascipt 函数，在没输入完的时
8、候只要按tab键firebug就会帮助你自动补充完整。无论你重复加载多少次页面，Firebug在每次加载页面后总会自己记得加载前页面所在的位置（比如你已经在浏览 页面的底部，此时再加载页面，则新的页面加载后，依然把你带到页面底部）。6、使用$标记去方便访问变量在上面的第4点中，我们提到了在这个命令行下可以进行Javascript的调试，而另外一个技巧是可以使用如 $1去访问曾经访问过的变量中的最后一个，如此类推，可以使用$2访问曾经访问过的变量中的倒数第二个。如 下图：7、Firebug会高亮度显示修改过的内容在Firebug中，只要你修改过页面中的内容，就会以黄色高亮度显示曾经修改过的内容，
9、如下图:Gh优ok KTEf.w 0 Saipi DOM Netlink div#post-content div#post div#mainContent div#container div id=,post-contentn 0 a href=,t/blog/id/109/the-big-picture-of-how-khan-academy-dev Lagt modified: Tueadayr February 08r 2011 +1 田+1 a clas3=*coinnents-linkn href=u Javascript zrcggleCoarjnenrs (109) ;3+1
10、div邑nc-109 cla33=,wccnznenrsH3tyle=udisplsy: block;,f： (1 ffQrtADIS12326%L3l3n22.2O3m(22.2CR22Nn119.52%LI02n2.322ms2122rM2.122n2.I22TV9、Firebug强大的网络数据监视功能Firebug还提供了十分功能强大的网络数据监功能。开发者在开发web应用时，经常要观察各类HTTP请求和回应， 在这方面Firebug的功能十分强大。首先，只需要开启控制面板中的网络功能，然后在每次运行页面时，都可以 清楚看到每个HTTP的请求和HTTP回应的具体细节。如下图：/ /粒例
11、TL CSS * DOMm g.海丹 前ffa 4 bm tD片 nhurl一一 aa.大小 HMtt0 玲0&日9塔在5余办附门酊修同*京%校费席oJ.fdhiACom tv.sohuccm cU0J0J 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?.G
12、T grecn_logo2.gif,田 MLdl46d2ff_6T1_4 GET Bd3_7b469ef8_bc8f_4S33 CH 121JB904247. daed 4e3l GET 121 一 免。1必2_153Done你的技术开发频gJ代.靴册.net格式化字符串的输出，你可以用类似C语言中printf的语法来调用这个函数:console. log(%s is %d years old.“Bob”，42) o11、可以在Firebug中调试程序在Firebug控制台的的Javascript控制面板中，可以对页面中的Javascript进行调试，方法很简单，只需要在要调试的行的左边单击，
13、就会出现断点了，之后请记住下面常件的快捷键：(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$ 1 2 J + xl : f ,;var rgx = /d+)d3)/; while (rgx.test(xl) xl = xl.replace(r
14、gxrr $1 * +，* + * ?2 *); return xl + x2;Read 你的技术开发频道 在Firebug中，还可以设置带条件判断的断点，如下图:2 function getFocus0 var frm = document.loginForm;document. RetElementByldCua). focus();310111213var只工球袤达式为真H才在波断点处件Itvar loEinidzloEinidl. replace(/s+/c, ，v);var passTOrdl= document, get El em ent By I dpa) .value;var
15、 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 代码。