�??xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>&#x7F8E;&#x5973;&#x89C6;&#x9891;&#x9EC4;&#x514D;&#x8D39;&#x7684;&#x4E45;&#x4E45;&#x2C;&#x4E45;&#x4E45;&#x4E9A;&#x6D32;&#x9AD8;&#x6E05;&#x2C;&#x4E9A;&#x6D32;&#x9999;&#x8549;&#x4F0A;&#x7EFC;&#x5408;&#x5728;&#x4EBA;&#x5728;&#x7EBF;&#x89C6;&#x770B;</title><link>http://www.aygfsteel.com/linlinyu/category/27602.html</link><description>linlinyu</description><language>zh-cn</language><lastBuildDate>Tue, 04 Dec 2007 00:38:08 GMT</lastBuildDate><pubDate>Tue, 04 Dec 2007 00:38:08 GMT</pubDate><ttl>60</ttl><item><title>firebug的���?/title><link>http://www.aygfsteel.com/linlinyu/articles/164914.html</link><dc:creator>linlin yu</dc:creator><author>linlin yu</author><pubDate>Mon, 03 Dec 2007 08:50:00 GMT</pubDate><guid>http://www.aygfsteel.com/linlinyu/articles/164914.html</guid><wfw:comment>http://www.aygfsteel.com/linlinyu/comments/164914.html</wfw:comment><comments>http://www.aygfsteel.com/linlinyu/articles/164914.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/linlinyu/comments/commentRss/164914.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/linlinyu/services/trackbacks/164914.html</trackback:ping><description><![CDATA[<p>本文最初发表《程序员》杂志第三期�Q�现���全文脓(chu��ng)上，内容已经�q�编辑修��C��(ji��n)很多:)</p>
<h3>什么是Firebug</h3>
<p>从事�?ji��n)数�q�的Web开发工作，���来���觉得现在对WEB开发有�?ji��n)更高的要求。要写出漂亮的HTML代码�Q�要�~�写�_�致的CSS样式表展�C�每个页面模块；要调�?a >javascript</a>�l�页面增加一些更�z�L��的要素；要��用Ajax�l�用户带来更好的体验。一个优�U�的WEB开发�h员需要顾�?qi��ng)更多层面，才能交出一份同样优�U�的作业。�ؓ(f��)帮助�q�大正处于Web2.0�z�流中的开发�h员，在这里�ؓ(f��)大家介绍一�ƾ轻巧灵�zȝ��辅助开发工兗��?/p>
<p>Firebug是Firefox下的一�Ƒּ�发类插�g�Q�现属于<a >Firefox</a>的五星��强力推荐插�g之一。它集HTML查看和编辑、Javascript控制台、网�l�状�늛�视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀�Q�从各个不同的角度剖析Web��面内部的细节层面，�l�Web开发者带来很大的便利。这是一�ƾ让人爱不释手的插�g�Q�如果你以前没有接触�q�它�Q�也许在阅读本文之后�Q�会(x��)有一试的�Ʋ望。笔者在撰写此文的时候，正逢Firebug发布1.0正式版，�q�不能不说是�U���y合�?br />
</p>
<h3>应用</h3>
<p>Firebug插�g虽然功能强大�Q�但是它已经和Firefox���览器无�~�地�l�合在一��P��使用���单直观。如果你担心(j��)它会(x��)占用太多的系�l�资源，也可以方便地启用/关闭�q�个插�g�Q�甚至针对特定的站点开启这个插件�?/p>
<p>在安装好插�g之后�Q�先用Firefox���览器打开需要测试的��面�Q�然后点��d��下方的绿色按钮或使用快捷键F12唤出Firebug插�g�Q�它�?x��)将当前��面分成上下两个框架�Q�如�?所�C��?/p>
<p>�?�Q�Firebug插�g展开囄���<br />
<img alt="firebug插�g展开囄���" src="http://www.ooso.net/wp-content/uploads/2007/firebug1.gif" /><br />
从图1中看刎ͼ�Firebug�?个主要的Tab按钮�Q�下文将主要介绍介绍�q�几斚w��的功能�?/p>
<table cellpadding="4" border="1">
    <tbody>
        <tr>
            <td>Console</td>
            <td>HTML</td>
            <td>CSS</td>
            <td>Script</td>
            <td>Dom</td>
            <td>Net</td>
        </tr>
        <tr>
            <td>控制�?/td>
            <td>Html查看�?/td>
            <td>Css查看�?/td>
            <td>脚本条时�?</td>
            <td>Dom查看�?/td>
            <td>�|�络状况监视</td>
        </tr>
    </tbody>
</table>
<h3>Console 控制�?/h3>
<p>控制台能够显�C�当前页面中的javascript错误以及(qi��ng)警告�Q��ƈ提示出错的文件和行号�Q�方便调试，�q�些错误提示比�v���览器本�w�提供的错误提示更加详细且具有参考�h(hu��n)倹{��而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests��h��post出去的参数、URL�Q�http头以�?qi��ng)回馈的内容�Q�原本似乎在�q�后黑匣子里�q�作的程序被清清楚楚地展�C�在你面前�?/p>
<p>象C shell或Python shell一��P��你还能在控制��C��查看变量内容�Q�直接运行javascript语句�Q�就���是大段的javascript�E�序也能够正���运行�ƈ拿到�q�行期的信息�?/p>
<p>控制台还有个重要的作用就是查看脚本的log, 从前你也�怹�(f��n)惯了(ji��n)使用alert来打印变量，但是Firebug�l�我们带来了(ji��n)一个新朋友 —�?console.log, 最���单的打印日志的语法是�q�样的：(x��) </p>
<div   id="wmqeeuq"   class="igBar"><span id="lcode-1"><a onclick="javascript:showCodeTxt('code-1'); return false;" >PLAIN TEXT</a></span></div>
<div   id="wmqeeuq"   class="syntax_hilite"><span id="wmqeeuq"    class="langName">CODE:</span>
<div   class="wmqeeuq"   id="code-1">
<div   id="wmqeeuq"   class="code">
<ol>
    <li style="font-weight: normal; color: #3a6a8b; font-style: normal; font-family: 'Courier New', Courier, monospace">
    <div style="font-weight: normal; font-family: 'Courier New', Courier, monospace">console.<span>log</span><span style="font-weight: bold; color: #006600">(</span><span style="color: #cc0000">"hello world"</span><span style="font-weight: bold; color: #006600">)</span> </div>
    </li>
</ol>
</div>
</div>
</div>
<p>如果你有一堆参数需要组合在一赯���出，可以写成�q�样�Q?/p>
<div   id="wmqeeuq"   class="igBar"><span id="lcode-2"><a onclick="javascript:showCodeTxt('code-2'); return false;" >PLAIN TEXT</a></span></div>
<div   id="wmqeeuq"   class="syntax_hilite"><span id="wmqeeuq"    class="langName">CODE:</span>
<div   class="wmqeeuq"   id="code-2">
<div   id="wmqeeuq"   class="code">
<ol>
    <li style="font-weight: normal; color: #3a6a8b; font-style: normal; font-family: 'Courier New', Courier, monospace">
    <div style="font-weight: normal; font-family: 'Courier New', Courier, monospace">console.<span>log</span><span style="font-weight: bold; color: #006600">(</span><span style="color: #800000">2</span>,<span style="color: #800000">4</span>,<span style="color: #800000">6</span>,<span style="color: #800000">8</span>,<span style="color: #cc0000">"foo"</span>,bar<span style="font-weight: bold; color: #006600">)</span>. </div>
    </li>
</ol>
</div>
</div>
</div>
<p>Firebug的日志输出有多种可选的格式以及(qi��ng)语法�Q�甚臛_��以定制彩色输出，比�v单调的alert�Q�显然更加方便，限于���幅�Q�这里不做详�l�说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）(j��)查看更详�l�的教程�?/p>
<p>�?�Q?在控制台里调试javascript<br />
<img alt="在控制台里调试javascript" src="http://www.ooso.net/wp-content/uploads/2007/firebug2.gif" /></p>
<h3>查看和修改HTML</h3>
<p>�W�一�ơ看到Firebug强大的HTML代码查看器，���p��得它与众不同�Q�相比于Firefox自带的HTML查看器，它的功能强大�?ji��n)许多�?HTML</p>
<p>首先你看到的是已�l�经�q�格式化的HTML代码�Q�它有清晰的层次�Q�你能够方便地分辨出每一个标�{�之间的从属�q�行关系�Q�标�{����折叠功能能够帮助你集中精力分析代码。源代码上方�q�标记出�?ji��n)DOM的层�ơ，如图3所�C�，它清楚地列出�?ji��n)一个hml元素的parent、child以及(qi��ng)root元素�Q�配合F(tu��n)irebug自带的CSS查看器��用，�?x��)给div+css��面分析�~�写带来很大的好处。你�q�可以在HTML查看器中直接修改HTML源代码，�q�在���览器中�W�一旉���看到修改后的效果�Q�光凭这一点就�?x��)让许多��面设计师死心(j��)塌地地成��?f��)Firebug的粉丝了(ji��n)�?/p>
<p>有时候页面中的javascript�?x��)根据用��L(f��ng)��动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色�Q�HTML查看器会(x��)���页面上改变的内容也抓下来，�q�以黄色高亮标记�Q�让�|�页的暗���操作彻底成为历双Ӏ?/p>
<p>利用Inspect���(g��)查功能，我们�q�可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你��用了(ji��n)外部�~�辑器修改了(ji��n)当前�|�页�Q�可以点击Firebug的reload囄���重新载入�|�页�Q�它�?x��)���l�跟�t�你之前用Inspect选中的区块，方便调试�?/p>
<p>�?:�Q�HTML查看�?br />
<img alt="HTML查看�? src="http://www.ooso.net/wp-content/uploads/2007/firebug3.gif" /></p>
<h3>CSS调试</h3>
<p>Firebug的CSS调试器是专�ؓ(f��)�|�页设计师们量��n定做的�?/p>
<p>如今的网��设计言必称div+css�Q�如果你是用table套出来的HTML��面�Q�就得按�q�规矩重构一遍，否则昑־�你不够时髦！用div做出来的��面的确能精���HTML代码�Q�HTML标签减肥的结果就是CSS样式表的�~�写成了(ji��n)��面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属�l�承关系�Q�还列出�?ji��n)每一个样式在哪个样式文�g中定义。你可以在这个查看器中直接添加、修攏V��删除一些CSS样式表属性，�q�在当前��面中直接看��C��改后的结果�?/p>
<p>一个典型的应用���是��面中的一个区块位�|�显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以��L���~�辑它的位置——你可以�Ҏ(gu��)��需要随意挪动象素�?br />
如图4中正在修改一个区块的背景艌Ӏ?/p>
<p>提示�Q�如果你正在学习(f��n)CSS样式表的应用�Q�但是总记不住常用的样式表有哪些��|��可以���试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的��|��它会(x��)把可能的��g��个个遍历�l�你看�?/p>
<p>�?: CSS查看器，能够直接修改样式�?br />
<img alt="�?: CSS查看器，能够直接修改样式�? src="http://www.ooso.net/wp-content/uploads/2007/firebug4.gif" /></p>
<h3>可视化的CSS���标</h3>
<p>我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果�q�一步展开右侧Layout tab的话�Q�它�?x��)以标尺的�Ş式将当前区块占用的面�U�清楚地标识出来�Q�精���到象素�Q�更让�h惊讶的是�Q�你能够在这个可视化的界面中直接修改各象素的��|����面上区块的位置��׃��(x��)随改动而变化。在��面中某些元素出现错位或者面�U�超出预料值时�Q�该功能能够提供有效的帮助，你可以籍此分析offset、margin、padding、size之间的关�p�，从而找�?gu��)���决问题的办法�?/p>
<p>�?�Q�Firebug中的CSS标尺<br />
<img alt="�?�Q�Firebug中的CSS标尺" src="http://www.ooso.net/wp-content/uploads/2007/firebug5.gif" /></p>
<h3>�|�络状况监视�?/h3>
<p>也许有一天，你的老板或者客��h����C���Q�抱怨你制作的网��速度奇慢�Q�你该如何应对？你或�怼�(x��)说这可能是网�l�问题，或者是�?sh��)脑配置问题�Q�或者是�E�序太慢�Q�或者直说是他们的�h品问题？不管怎么��_(d��)��最后你可能被要求去解决�q�个有多�U�可能的问题�?/p>
<p>�|�络状况监视器能帮你解决�q�个���手问题。Firebug的网�l�监视器同样是功能强大的�Q�它能将��面中的CSS、javascript以及(qi��ng)�|�页中引用的囄���载入所消耗的旉���以矩状图呈现出来�Q�也许在�q�里你能一把揪出拖慢了(ji��n)你的�|�页的元�Ӟ���q�而对�|�页�q�行调优�Q�最后老板满意客户�Ƣ喜�Q�你的饭���也因此而牢固�?/p>
<p>�|�络监视器还有一些其它细节功能，比如预览囄����Q�查看每一个外部文件甚��x��xmlHttpRequests��h��的http头等�{��?/p>
<p>�?�Q�网�l�状�늛�视器<br />
<img alt="�?�Q�网�l�状�늛�视器" src="http://www.ooso.net/wp-content/uploads/2007/firebug6.gif" /></p>
<h3>Javascript调试�?/h3>
<p>�q�是一个很不错的javascript脚本调试器，占用�I�间不大�Q�但是单步调试、设�|�断炏V��变量查看窗口一个不���。正所谓麻雀虽小�Q�五脏俱全�?/p>
<p>如果你有一个网站已�l�徏成，然而它的javascript有性能上的问题或者不是太完美�Q�可以通过面板上的Profile来统计每�D�脚本运行的旉����Q�查看到底是哪些语句执行旉����q�长�Q�一步步排除问题�?/p>
<p>�?�Q�javascript调试�?br />
<img alt="�?�Q�javascript调试�? src="http://www.ooso.net/wp-content/uploads/2007/firebug7.gif" /></p>
<h3>DOM查看�?/h3>
<p>DOM(Document Object Model)里头包含�?ji��n)大量的Object以及(qi��ng)函数、事�Ӟ��在从前，你要想从中查到需要的内容�Q�绝非易事，�q�好比你��M��(ji��n)一个巨大的图书馆，惌���扑ֈ�几本名字不太���切的小书，众多的选择�?x��)让你无所适从。而��用Firebug的DOM查看器却能方便地���览DOM的内部结构，帮助你快速定位DOM对象。双��M��个DOM对象�Q�就能够�~�辑它的变量或��|���~�辑的同�Ӟ��你可能会(x��)发现它还有自动完成功能，当你输入document.get之后�Q�按下tab键就能补齐�ؓ(f��)document.getElementById�Q�非常方�ѝ��如果你认�ؓ(f��)补齐得不够理惻I��按下shift+tab又会(x��)恢复原状。用�?ji��n)Firebug的DOM查看器，你的javascript从此扑ֈ��?ji��n)驱使的对象�Q�W(xu��)eb开发也许就成了(ji��n)一件乐事�?/p>
<p>�?: Dom查看�?br />
<img alt="�?: Dom查看�? src="http://www.ooso.net/wp-content/uploads/2007/firebug8.gif" /></p>
<h3>���结</h3>
<p>Firebug插�g提供�?ji��n)一整套web开发所必需的工兗���从HTML的编写，到CSS样式表的���化调优�Q�以�?qi��ng)用javascript脚本开发，亦或是Ajax应用�Q�Firebug插�g都会(x��)成�ؓ(f��)你的得力助手。所谓工�Ʋ善其事�Q�必先利其器。在Web2.0的时代，�a�必称Ajax�Q�动辄就是用户体验提升，如果把Firebug工具用好�Q�必能让你如虎添���|�����HTML、CSS、javascript整理得服服帖帖，从此成�ؓ(f��)web开发中的专家��人物�?/p>
<h3>�?/h3>
<p>Firebug的中文含义是萤火虫，作者是Joe Hewitt�Q�官方网��?http://www.getfirebug.com<br />
Firefox亦即火狐���览器，是近�q�来撼动IE���览器市(j��ng)场占有率的一支强大力量，要不是它的出玎ͼ�我想有生之年说不定也看不到IE 7的发布了(ji��n)�Q�官方网��?http://www.firefox.com</p>
<p>作�? <a title="作�? volcano" >volcano</a> 发表�?�?15, 2007 at 9:54 am</p>
<p><a  target="_blank">版权信息</a>: <strong>可以��L��转蝲, 转蝲时请务必以超链接形式标明文章<a >原始出处</a>�?a >作者信�?/a>�?qi��ng)此声�?/strong></p>
<p class="postfeedback"><a class="permalink" title="�怹�链接�?初识Firebug 全文 �?firebug的���?  rel="bookmark">�怹�链接 - http://www.ooso.net/index.php/archives/294</a> </p>
<img src ="http://www.aygfsteel.com/linlinyu/aggbug/164914.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/linlinyu/" target="_blank">linlin yu</a> 2007-12-03 16:50 <a href="http://www.aygfsteel.com/linlinyu/articles/164914.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>                                                                           <footer>
<div class="friendship-link">
<a href="http://www.aygfsteel.com/" title="&#29408;&#29408;&#20037;&#20037;&#20122;&#27954;&#27431;&#32654;&#19987;&#21306;&#95;&#20013;&#25991;&#23383;&#24149;&#20122;&#27954;&#32508;&#21512;&#20037;&#20037;&#50;&#48;&#50;&#95;&#22269;&#20135;&#31934;&#21697;&#20122;&#27954;&#31532;&#20116;&#21306;&#22312;&#32447;&#95;&#26085;&#26412;&#20813;&#36153;&#32593;&#31449;&#35270;&#39057;">&#29408;&#29408;&#20037;&#20037;&#20122;&#27954;&#27431;&#32654;&#19987;&#21306;&#95;&#20013;&#25991;&#23383;&#24149;&#20122;&#27954;&#32508;&#21512;&#20037;&#20037;&#50;&#48;&#50;&#95;&#22269;&#20135;&#31934;&#21697;&#20122;&#27954;&#31532;&#20116;&#21306;&#22312;&#32447;&#95;&#26085;&#26412;&#20813;&#36153;&#32593;&#31449;&#35270;&#39057;</a>

</div>

</footer>


��վ֩���ģ�壺
<a href="http://" target="_blank">�ݶ���</a>|
<a href="http://" target="_blank">�����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��ɽ��</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">º����</a>|
<a href="http://" target="_blank">��ľ����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">۩����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��</a>|
<a href="http://" target="_blank">��ƽ��</a>|
<a href="http://" target="_blank">��������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">���</a>|
<a href="http://" target="_blank">����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��̶��</a>|
<a href="http://" target="_blank">����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">��ɽ��</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">����</a>|
<a href="http://" target="_blank">��ϲ��</a>|
<a href="http://" target="_blank">��ԭ</a>|
<a href="http://" target="_blank">�����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">�ֶ���</a>|
<a href="http://" target="_blank">ԫ����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">����</a>|
<a href="http://" target="_blank">������</a>|
<a href="http://" target="_blank">����</a>|
<a href="http://" target="_blank">�����</a>|
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</body>