公開日: 2009年10月08日(Thu)
Firebug は画期的に便利だ。僕は頑固な Opera ユーザだけれども、Firebug だけは手放せない必需品になっている。Firebug があまりに便利すぎるために、他のメジャーなブラウザも、最近のバージョンでは Firebug に対抗するデバッグツールを付属させている。今日は、一通りどんなもんなのか覗いてみた。
ご存知本家本元。Firefox のアドオンとして動く。
アドオンサイトからFirebugをインストール して、Firefox を再起動すると使えるようになる。
画面右下にあるFirebugアイコン()をクリックすると、Firebugの画面が開く。DOMインスペクタ、CSSインスペクタ、JavaScriptデバッガにコンソール、全ての通信の状況を見れる接続タブなど、痒いところに一通り手が届く優れものだ。
Operaには、Opera9.5以降、Dragonfly という開発ツールが付いている。詳しい情報は dev.opera.com の記事『Opera Dragonfly 入門』を参照されたし。
Dragonfly の表示のさせ方は、次の手順だそうだ。
図1のように ツール → 詳細ツール → 開発者用ツール というメニューオプションを選択してください。Opera Dragonfly の UI がロードされます。
起動してみると、次のような感じだ。
ぱっと見た感じは、かなり Firebug に似ている。まだ詳しく使い込んだわけではないが、DOMインスペクタやCSSインスペクタは Firebug と似た感覚で使えそう。しかし、動作がややモッサリして感じるなど、課題はありそうだ。
しかし、screen以外のモードをサポートしているという点は特筆すべきポイントだろう。Firebug にはこれができない。Dragonflyなら、印刷用CSSや、handheld、tvなどのメディアタイプの表示時にも使えるので、重宝しそうだ。
IEには、バージョン8から類似する機能が付いたようだ。
メニューバーから、 ツール → 開発者ツール と選択すると起動できる。
DOMインスペクタ、CSSインスペクタは Firebug のソレと似ている。画像やCSS、JavaScriptなどをオフにする機能や、alt文字を表示する機能などが備わっているようだ。
Safari にも同様の機能がついたようだが、見た感じイマイチ使い方がわからない。とりあえず表示のさせ方だけはわかったので、詳しくはまた後日調べたい。
この手順を実行すると、メニューバーに「開発」という項目が追加される。
一見して、Webインスペクタやエラーコンソール、ネットワークタイムライン表示などのデバッグメニューっぽいものが見える他、画像表示やCSS、JavaScriptの無効化などもできるようだ。
DOMインスペクタ的なものはどうやって使うのかと探してみると、あった。画面上の適当な要素のところで右クリックすると、「要素を表示」というメニューが増えている。
これを選択すると、DOMインスペクタ的な画面が開いた。下記がその図。
まだそれぞれ詳しく使いこんでみたわけではないが、やっぱり一番使いやすいのは Firebug だと思う。Firebug をベースに、screen以外のモードでデバッグしたいときに Opera の Dragonfly を合わせて使うという感じがいいんじゃないだろうか。
IE8とSafariの開発機能は、ブラウザ依存の問題が起きたとき以外では、お世話になることはなさそうな印象だった。
しかし、最近はだいぶ改善されたが、それでもブラウザ個別の問題と無縁でいることはできないから、状況に応じて使い分ける必要はありそうだ。
2010年1月5日 追記:
IE用 『DebugBar』とGoogle Chromeの開発ツールの紹介を追加しました。
公開日: 2009年10月08日(Thu)