Firebug の模倣者たちを一通り使ってみた

Firebug は画期的に便利だ。僕は頑固な Opera ユーザだけれども、Firebug だけは手放せない必需品になっている。Firebug があまりに便利すぎるために、他のメジャーなブラウザも、最近のバージョンでは Firebug に対抗するデバッグツールを付属させている。今日は、一通りどんなもんなのか覗いてみた。

Firefox - Firebug

ご存知本家本元。Firefox のアドオンとして動く。

アドオンサイトからFirebugをインストール して、Firefox を再起動すると使えるようになる。

画面右下にあるFirebugアイコン()をクリックすると、Firebugの画面が開く。DOMインスペクタ、CSSインスペクタ、JavaScriptデバッガにコンソール、全ての通信の状況を見れる接続タブなど、痒いところに一通り手が届く優れものだ。

Firebugを使っている図

Opera - Dragonfly

Operaには、Opera9.5以降、Dragonfly という開発ツールが付いている。詳しい情報は dev.opera.com の記事『Opera Dragonfly 入門』を参照されたし。

Dragonfly の表示のさせ方は、次の手順だそうだ。

図1のように ツール → 詳細ツール → 開発者用ツール というメニューオプションを選択してください。Opera Dragonfly の UI がロードされます。

起動してみると、次のような感じだ。

Opera Dragonfly を起動している図

ぱっと見た感じは、かなり Firebug に似ている。まだ詳しく使い込んだわけではないが、DOMインスペクタやCSSインスペクタは Firebug と似た感覚で使えそう。しかし、動作がややモッサリして感じるなど、課題はありそうだ。

しかし、screen以外のモードをサポートしているという点は特筆すべきポイントだろう。Firebug にはこれができない。Dragonflyなら、印刷用CSSや、handheld、tvなどのメディアタイプの表示時にも使えるので、重宝しそうだ。

Internet Explorer

IEには、バージョン8から類似する機能が付いたようだ。

メニューバーから、 ツール → 開発者ツール と選択すると起動できる。

IE8で開発者ツールを起動した図

DOMインスペクタ、CSSインスペクタは Firebug のソレと似ている。画像やCSS、JavaScriptなどをオフにする機能や、alt文字を表示する機能などが備わっているようだ。

Safari

Safari にも同様の機能がついたようだが、見た感じイマイチ使い方がわからない。とりあえず表示のさせ方だけはわかったので、詳しくはまた後日調べたい。

  • まず、メニューバーから 編集 → 設定 を選んで、設定ダイアログを開く。
  • 詳細タブに「メニューバーに [開発] メニューを表示」というチェックボックスがあるので、オンにする。

Safariの設定ダイアログで設定している図

この手順を実行すると、メニューバーに「開発」という項目が追加される。

Safariの開発メニューの図

一見して、Webインスペクタやエラーコンソール、ネットワークタイムライン表示などのデバッグメニューっぽいものが見える他、画像表示やCSS、JavaScriptの無効化などもできるようだ。

DOMインスペクタ的なものはどうやって使うのかと探してみると、あった。画面上の適当な要素のところで右クリックすると、「要素を表示」というメニューが増えている。

要素を選択するメニューの図

これを選択すると、DOMインスペクタ的な画面が開いた。下記がその図。

SafariでDOMインスペクタを起動した図

まとめ

まだそれぞれ詳しく使いこんでみたわけではないが、やっぱり一番使いやすいのは Firebug だと思う。Firebug をベースに、screen以外のモードでデバッグしたいときに Opera の Dragonfly を合わせて使うという感じがいいんじゃないだろうか。

IE8とSafariの開発機能は、ブラウザ依存の問題が起きたとき以外では、お世話になることはなさそうな印象だった。

しかし、最近はだいぶ改善されたが、それでもブラウザ個別の問題と無縁でいることはできないから、状況に応じて使い分ける必要はありそうだ。


2010年1月5日 追記:
IE用 『DebugBar』とGoogle Chromeの開発ツールの紹介を追加しました


プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

  • このサイト https://www.pxt.jp/ は、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る