Firebug

| | コメント(0) | トラックバック(0)

Web ページの CSS、HTML、および JavaScript をリアルタイムに編集、デバッグ、またはモニタすることができるFirefoxの拡張機能。
WEB開発ツール。

・Firebug :: Firefox Add-ons
https://addons.mozilla.org/ja/firefox/addon/1843

・Firebug Japanese :: Firefox Add-ons
https://addons.mozilla.org/ja/firefox/addon/5165

・FireBug - JoeHewitt.com
http://www.joehewitt.com/software/firebug/
作者の Joe Hewitt さんのサイト

以前入れたんだけど、消しちゃったんだった。
Software Design 2008/06 P.71-72 に出ていたので久しぶりに入れてみました。

使ってみた

デバッグをしようとしてるサイトのみで有効にした方が、メモリや速度の面で良いらしい。

● コンソール (Console) タブ

HTTPリクエストのパラメータ、HTTPリクエスト/レスポンスヘッダ、レスポンスボディを確認できます

Ajaxのリクエスト/レスポンスも表示できます

下部の「>>>」の部分には、JavaScriptを記述できるっぽい。
URLを入力する場所に「javascript:」と書いて、その後にJavaScriptコードを書けるけど、それと同じ感じかな?

また、「>>>」の部分に、「console.log(document.cookie)」とか入力すると、COOKIEの内容をコンソールログに表示できるみたい。(コンソールログに出力するには、「console.log()」関数(?)を使用します)

● HTML (HTML) タブ

ソースコード上にマウスを移動すると、該当するページのエレメントを確認できます。
調査 (Inspect) ボタンを押してから、ページ上にマウスを移動すると、該当するソースコードを確認できます。

右のペインには、CSSやボックス要素のレイアウト(margin、paddingなど)、DOMなどが表示できます。

HTMLの編集ができます。

● CSS (CSS) タブ

CSSの表示、編集ができます

● スクリプト (Script) タブ

ブレイクポイントを設定したり、ステップ実行できるらしい。

「console.log()」関数(?)で、Firebugのコンソールにログ出力できるらしい
書式は、printf形式。

JavaScript中に「debugger;」と記述しておくと、そこで処理が中断して、変数の値を確認したり、ステップ実行できるらしい。

JavaScriptはFirebugから編集できないっぽい。残念。

● DOM (DOM) タブ

DOMの表示ができます

● 接続 (Net) タブ

HTTPリクエスト/レスポンス、および、通信時間が表示できます

トラックバック(0)

このブログ記事を参照しているブログ一覧: Firebug

このブログ記事に対するトラックバックURL: http://kinshachi.ddo.jp/mt/mt-tb.cgi/489

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、ikeが2008年6月10日 23:57に書いたブログ記事です。

ひとつ前のブログ記事は「Caffeine Monkey」です。

次のブログ記事は「Firefox 3 をインストールしてみました」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

最近のコメント

Powered by Movable Type 4.261