Firebug

■ 使ってみた

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

● コンソール (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リクエスト/レスポンス、および、通信時間が表示できます