ShowTable of Contents
概要
XPages Extension Library「Firebug Lite」の利用方法について記述する。
「Firebug Lite」とは
Firebug Liteは、Firefox以外でも利用できるWebページのデバッグツール。
IE6以上, Firefox, Opera, Safari そしてGoogle Chrome等ほとんどのブラウザで利用可能である。
Extension Libraryの「Firebug Lite」を追加することで、Web画面の右下にアイコン（＜画面1＞）が表示され、クリックするとデバッグ画面（＜画面２＞）が開く。
＜画面1＞
＜画面２＞
実現方法
XPage上に 「Firebug Lite」を実現するにあたり、下記のコントロールを配置する。
・「Firebug Lite」コントロール
1.「Firebug Lite」コントロールの配置
[Extension Library]に含まれる[Firebug Lite]をドラッグする。
2.ブラウザで確認
ブラウザの右下にボタンが表示され、デバッグ画面を表示できる。
◆ブラウザイメージ デバッグ画面では、以下の機能がある。
・Console
・HTML
・CSS
・Script
・DOM
◆Console
開いているページ上で任意のJavaScriptを実行できる。
◆HTML
HTMLのソースの選択した個所に対して「DOM」「Layout（ボックス）」「Style」を確認できる。
◆CSS
CSSファイルごとに内容を確認できる。
◆Script
Javaスクリプトごとのソースを確認できる。
ただし、デバッグを行うことはできない。
◆ＤＯＭ
JavaScriptのオブジェクトの中身を解析できる。
デバッグ用ツールの比較
Firebug Liteとその他のデバッグ用ツールの比較内容を以下に示す。
項目 | デバッグ用ツール |
Firebug Lite | Firebug | 開発者ツール(IE) |
対応ブラウザ | ・Internet Explorer 6以上
・Firefox
・Opera
・Safari
・Google Chrome | ・Firefox | ・Internet Explorer 6以上
（Internet Explorer 6, 7はInternet Explorer Developer Toolbar をインストール） |
特徴 | Firebugの簡易版。
多種ブラウザに対応するため、javascriptで実装されている。
ブックマークレットとして動作（ブラウザのブックマークに登録しておき、調査するサイトを開いた後に、Firebug Liteのブックマークを選択すると動作する）
| Firefoxのアドイン（機能拡張）として提供。
更にFirebugへのアドインも用意されている。 | Internet Explorer 8以上はブラウザの機能として実装されている。（F12キーで起動） |
機能 | ・HTML、javascriptの参照
・CSSの参照、リアルタイム編集
| ・HTML、CSS、javascriptの参照・リアルタイム編集
・javascriptのデバッグ/監視/パフォーマンス分析
・コンソールでのコマンドの実行、エラー表示
・ネットワークトラフィックの分析
| ・HTML、CSSの参照・リアルタイム編集
・javascriptのデバッグ/監視/パフォーマンス分析
|
ダウンロードURL | http://getfirebug.com/firebuglite | https://getfirebug.com/ | http://msdn.microsoft.com/ja-jp/library/cc848894%28v=vs.85%29.aspx |
まとめ
上記、「デバック用ツールの比較」結果から分かるように、各ブラウザでデバッグ用ツールは用意されている為、
わざわざxPage上にコントロールを配置してデバッグが十分に行えない「Firebug Lite」を利用する頻度は低いと思われる。
考えられる利用方法としては、「開発者ツール」が利用できないInternet Explorerのバージョンでの動作検証などが考えられる。
参考先情報
http://www.ibm.com/developerworks/jp/web/library/wa-aj-firebug/?ca=drs-jp
http://gihyo.jp/dev/feature/01/firebug/0001
調査環境
Lotus Domino Designer 8.5.3 Upgrade Pack1
Internet Explorer 8
Google Chrome 19.0.1084.46 m
Mozilla Firefox 12
Safari 5.1.5
この記事は九州地区ノーツパートナー会技術部会(リコー IT ソリューションズ 株式会社)によって作成されました。