今回は、Firefoxでの開発ツールである、Firebugについて調べて、試してみました。
■Firebugのインストール
FirebugはFirefoxのアドオンとして提供されています。
使うには、Firefoxのメニューの［ツール］→［アドオン］でアドオンマネージャを起動し、「アドオンを入手」アイコンを選択します。
アドオンの検索画面にFirebugを入力すれば、Firebugアドオンが表示されるので選択してインストールします
■Firebugの起動
Firefoxを再起動してインストールが完了したら、デバッグしたいWebページ/Webサイトを表示して、［ツール］→［Web開発］→［Firebug］→［Firebugを開く］を選択します。
■コンソール
［コンソール］を利用すると、HTMLやJavaScriptのエラーを確認できます。
［コンソール］タブの右の三角をクリックして、［有効］と［コマンドエディタを表示］と、表示したいエラーメッセージにチェックを入れます
すると、［コンソール］が表示されます。［コンソール］には、エラーメッセージやコマンドエディタ上で実行したJavaScriptの実行結果などが表示されます。
（例）コマンドエディタでconsole.logコマンド入力して、コンソールに結果が表示
また、［プロファイル］ボタンをクリックすると、JavaScriptのプロファイリングができ、実行に時間がかかっているメソッドを簡単に特定できます。
■HTMLのデバッグ
左のHTMLタブを選択して、ツリーからタグを選択、もしくは、Webブラウザ上の調査したい文字を選択し、右クリックから［要素を調査］を選択すると、選択したタグのスタイルシートが右のペインに表示されます。
また、HTMLタグの内容やスタイルシートを編集すると、上のWebブラウザ画面に変更内容が反映されるので、表示結果を確認しながらデバッグができます。
右ペインの［レイアウト］タブを押下すると、マージンやパディングなどの情報が表示されます。レイアウト上の各数字をクリックすると、値を変更することもできます。
1) DOM選択
Firebugを表示した後、「カーソルアイコン」をオンにすると、画面上からマウスで要素を指定することが可能となります。指定中の要素は「HTML」パネル内でカーソルがあたった状態になります。
すると、対象要素からマウスを離してもマウスオーバー時の状態（スタイル）が適用されたままになります。
「HTML」パネル内にて要素を選択した後、右クリックで表示するメニューから「属性変更時にブレーク」にチェックを入れると、その属性が変更された時に「スクリプト」パネルが開き、この処理を実行している箇所に自動的にブレークポイントが設定されます。
例えば他人が書いたソースなど、どこで処理を行っているかが把握しにくい場合に、手っ取り早く調査するのに非常に便利です。
■CSSのデバッグ
［CSS］タブのデバッグでは、HTMLファイルよりインクルードされたスタイルファイルの編集や、スタイルの無効化ができます。編集したいCSSファイルを選択すると編集することができ、スタイルの左側をクリックすれば、無効化も可能です。
■JavaScriptのデバッグ
［スクリプト］タブを選択すると、JavaScriptのデバッグができます。デバッグしたいJavaScriptファイルを選択してブレークポイントを設定すると、変数の内容やスタックトレースの確認ができます。
■アクセス時間の統計情報
［接続］タブをクリックすると、各ファイルのWebサーバへ対するアクセス時間を計測できます。レスポンス待ち時間、データ転送時間、Webブラウザへのロード時間などを計測できます。
※Firebugを有効に利用するためのアドオン
【1】Cookieの内容を表示する「FireCookie」
【2】HTMLのインラインを可視化する「Inline Code Finder」
【3】JavaScriptをハイライティング「FireRainbow」
【4】HTMLタグのヘルプ機能を追加する「CodeBurner」
【5】jQueryのデバッギング機能を追加「FireQuery」
【6】XPathにマッチするタグを表示「FireFinder」
【7】Webサイトの表示速度を計測「YSlow」
【参考URL】
http://www.atmarkit.co.jp/ait/articles/0912/03/news093.html
http://blog.bluearrowslab.com/firefox/804/
http://web8bungi.sakura.ne.jp/first/htmlcss/firebug.html
0 件のコメント:
コメントを投稿