Firebug スタート ガイド (Firefox ブラウザ)_JavaScript スキル

我最近就在学习怎么使用Firebug，网上找到一篇针对初学者的教程，感觉比较有用，就翻译了出来。

　　作者：Estelle Weyl

　　原文网址：http://www.evotech.net/blog/2007/06/introduction-to-firebug/

　　译者：阮一峰

　　本文是Firebug的一个概览，并不对它的所有特性进行详尽解释。不过，本文的内容对一个新手来说，应该是足够了。

 

　　目录

　　一、安装Firebug

　　二、打开和关闭Firebug

　　三、Firebug窗口概览

　　四、随时编辑页面

　　五、用Firebug处理CSS

　　六、盒状模型

　　七、评估下载速度

　　八、DOM

　　九、Javascript调试

　　十、AJAX

　　十一、附注

 

　　一、安装Firebug

　　Firebug在Firefox浏览器中运行。另外有一个Firebug lite版本，可以通过javascript调用，包含在页面中，从而在其他非Firefox浏览器中使用。本文不涉及这个版本。

　　安装Firebug，请访问Firebug下载页面。点击该页面右边栏中部巨大的橙黄色按钮即可。你也可以在Mozilla的FireFox Add-ons站点下载它。安装后只要重新启动FireFox，就可以使用了。

　　如果你已经安装过了，那么请检查是否更新到了最新版本。打开Firefox的“Tools”菜单，选择“Add-ons”命令，然后在弹出窗口中点击左下角的“Find Updates”按钮。

　　二、打开和关闭Firebug

　　在Firebug网站上，可以找到它的快捷键设置。我最常使用以下三种方法：

　　* 打开Firebug：按F12，或者点击浏览器状态栏右边的绿色标志。

 

* 关闭Firebug：按F12，或者点击浏览器状态栏右边的绿色标志，或者点击Firebug窗口右上角的红色关闭标志。

　　* 在单独窗口中打开Firebug：点击firebug窗口右上角的红色箭头标识，或者使用Ctrl+F12/⌘+F12按钮。

　　Firebug的相关设置：

　　* 固定Firebug在新窗口打开：先打开firebug，点击左上角的bug标志，选择options菜单中的“Always Open in New Window”设置。

　　* 增加/缩小字体大小：先打开firebug，点击左上角的bug标志，选择“Text Size”命令。每次字体变化的幅度非常小，你可能需要使用多次。

　　* 限制只对某些站点使用Firebug：先右击浏览器状态上的green check mark标志，选择“disable Firebug”命令。然后，再右击这个已经变灰的标志，选择“Allowed Sites...”命令，增加允许Firebug生效的域名。

 

 

　　三、Firebug窗口概览

　　* Console标签： 主要使用javascript命令行操作，显示javascript错误信息，在底部的>>>提示符后，你可以自己键入javascript命令。

　　* HTML标签： 显示HTML源码，并且像DOM等级结构那样，每行之前有缩进。你可以选择显示或不显示某个子节点。

　　* CSS标签：浏览所有已经装入的样式表，可以当场对其修改。在Firebug窗口上部，“edit”命令的旁边，有一个本页面中所有样式表的下拉列表，你可以选择一个样式表进行浏览。

　　* Script标签： 显示javascript文件及其所在页面。在Firebug窗口上部，“inspect”命令的旁边，有一个本页面中所有Javascript文件的下拉列表，你可以选择一个进行浏览。你可以在javascript命令中，设置断点（breakpoint）及其出现的条件。

　　* DOM标签： 显示所有的页面对象和window物体的属性。因为在javascript中，所有变量都是window物体的属性，所以Firebug会显示所有变量和它们的值。

　　* Net标签：显示本页面涉及的所有下载，以及它们各自花费的时间，各自的HTTP请求头信息和服务器响应的头信息。XHR标签对AJAX调试很有用。

　　四、随时编辑页面

　　在HTML标签中，点击窗口上方的“inspect”命令，然后再选择页面中的文本节点，你可以对其进行修改，修改结果会马上反应在页面中。

　　Firebug同时是源码浏览器和编辑器。所有HTML、CSS和Javascript文件中的对象，都可以用单击或双击进行编辑。当你输入完毕，浏览器中的页面立刻会发生相应变化，你可以得到瞬时反馈。DOM浏览器允许你对文档结构进行彻底的编辑，不局限于文本节点。在HTML标签中，点击窗口上部“inspect”命令旁边的“edit”命令，下方的窗口就会立刻变成一个黑白的文本编辑窗口，你可以对HTML源代码进行任意编辑。在CSS标签中，Firebug会自动补全你的输入。在DOM标签中，当你按Tab键时，Firebug会自动补全属性名。

 

　　五、用Firebug处理CSS

　　在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。你可以双击对这些设置进行编辑。

　　对于那些Firefox不支持的CSS规则，Firebug会自动隐藏。比如，Firebug会隐藏针对某些浏览器的CSS特定设置，以及一些它不支持的CSS3规则。所以，它会隐藏_height:25px;（下划线是一个针对IE6的设置）和p:first-of-type {color: #ff0000;} (:first-of-type是一个CSS3规定的伪类，目前只有Safari 3支持）。但是，这也意味着，如果你恰巧发生了打字错误，导致某些规则无法显示，那么你只有使用其他编辑器显示全部CSS内容，找到你的错误。

　　Firebug允许你关闭CSS中的某些语句，页面会立刻反映相应变化，你可以立刻查看效果。“关闭”一条语句的方法是，在该语句的左边点击，会出现一个红色的禁止标志。该语句就会变灰。再次点击，该语句就会恢复。

　　Firebug允许你编辑CSS的属性和属性值。你只要对它们点击，就能编辑。修改后的效果会立刻在浏览器窗口中显示出来。这个特性最好的运用，是在确定准确定位的padding和margin时，firebug允许你用方向键逐单位的增加。

　　Firebug允许你增加新的属性和属性值。增加方法是双击现有的selector，然后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属性值。

　

 

　六、盒状模型

　　当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。在CSS窗口上方，有一个layout按钮，点击后会展示与该元素相关的方块模型，包括padding、margin和border的值。要查看每一个元素的这三项值，只需点击“inspect”按钮，然后用鼠标悬停在页面中该元素的上方。

 

　　七、评估下载速度

　　Net标签中图形化了页面中所有http请求所用的时间。使用这个功能，必须打开Network monitoring，默认设置就是打开，但是你可以在“options”下拉菜单中关闭这个选项。你可以用这项功能评估javascript文件下载，占用整个页面显示的时间。

　　在每个HTTP请求的左面点击，会显示该次请求的头信息。

　　在1.0.5版以后，你可以单独查看HTML文件、CSS文件、图像文件等各自下载的时间。

　　八、DOM

　　DOM标签提供页面上所有物体的所有属性的信息。Firebug最酷的功能之一是，它可以动态修改页面，反映在浏览器窗口，但是如果使用浏览器自带的查看源码功能，你会发现源码并没有改变。

　　九、Javascript调试

JavaScript プロファイラーは、JavaScript 関数の実行にかかる時間をレポートできるため、さまざまな関数が速度に与える影響を確認できます。この機能を使用する方法は、コンソール タブを開き、上の [プロファイル] ボタンをクリックすることです (上のボタンの順序は「検査 | クリア | プロファイル」です)。 Firebug には、呼び出されたすべての関数とそのにかかった時間がリストされます。 console.profile([title]) をテストする関数の前に追加し、console.profileEnd() を最後に追加できます。

コンソール タグの下部は「>>>」で始まるコマンドライン入力です。コマンドライン入力の結果があれば、上部ウィンドウに表示されます。注目に値する詳細なコマンド ライン入力 API があります。 Firebug の組み込みコンソール オブジェクトには、console.debug、console.info、console.warning、console.error など、呼び出しに便利なメソッドがいくつかあります。これらのメソッドで出力が生成される場合、Firebug は対応するコードを表示するためのリンクを提供します。

デバッグのもう 1 つの方法は、ブレークポイントを設定することです。 Script タグを使用すると、任意の行で実行を一時停止できます。行番号をクリックするとブレークポイントが設定されます。行番号を右クリックすると、ブレークポイントが発生する条件を設定でき、条件が true の場合にのみプログラムの実行が一時停止されます。右側にはウォッチ ウィンドウもあり、現在の変数の値を確認できます。

10. AJAX

前述したように、Firebug はページの動的コンテンツやその他の DOM 変更をキャプチャできます。このサンプル ファイルを開いてページ上のリンクをクリックし、ブラウザでソース コードを表示すると、何も変更されておらず、ソース コードにはまだリンクが含まれていることがわかります。ただし、Firebug でソース コードを表示すると、DOM が変更され、「Hello World」が含まれていることがわかります。これが Firebug の中心的な機能の 1 つです。これがなければ、AJAX リクエストと応答は表示されません。これを使用すると、送受信されたテキスト、すでに対応しているヘッダー情報を確認できます。 「ネット」タブでは、各リクエスト/レスポンスにかかる時間を監視することもできます。

Net タグの XHR 関数は、AJAX 操作を表示する場合に特に便利です。各サーバー側応答の前にプラス記号をクリックすると、サーバー側応答のヘッダーとコンテンツが表示されます。

XMLHttpRequest オブジェクトを通じてサーバーに対してリクエストが行われると、Firebug はリクエストの POST または GET コンテンツ、および応答ヘッダー情報とコンテンツを記録します。これらの内容は、Net タグの XHR 機能を使用して確認できます。すべてのサーバー応答とその応答にかかった時間が一覧表示されます。前の番号をクリックすると、GET リクエストの場合は 3 つのラベルが表示され、POST リクエストの場合は 4 つのラベルが表示されます。

Params: リクエスト URL に含まれる名前と値のペアを表示します。

ヘッダー: リクエストとレスポンスのヘッダー情報を表示します。

応答: サーバーから受信した実際の情報を表示します。

Post: POST リクエストを通じてサーバーに送信された情報を表示します。 (このGETリクエストは含まれません。)

これら 4 つのタグは、プログラムの作成とデバッグに役立ちます。 POST タグと Params タグをチェックして、リクエストが正しく送信されたことを確認します。 Response タグをチェックして返された形式を確認し、対応する Javascript 処理関数をどのように記述するかを決定します。

11. 注意事項

* Firebug 1.05 以前のバージョンは Firefox 3.0 と互換性がありません。

* Firebug の作者である Joe Hewitt は、このソフトウェアを無料で提供しています。彼への愛を示すために、彼への寄付を検討してみてはいかがでしょうか。

* Firebug の高度なアプリケーションについては、Joe Hewitt によるデモ ビデオ (http://video.yahoo.com/watch/111597) をご覧ください。

(了)