Firebug の模倣者たち追記 ~IE用 『DebugBar』とGoogle Chrome~

過去記事『Firebug の模倣者たちを一通り使ってみた』への追記。前回、Firebug と Opera Dragonfly 、それから、IE8とSafariに標準で付属している開発者ツールを紹介したが、便利なツールはまだあった。

DebugBar (for Internet Explorer)

IEにインストールして使うプラグイン『DebugBar』。IEにインストールするので、IE6でもIE7でも使える。そして、IETesterでも使えるので、1台のWindowsマシンでIE6でも7でも8でも使えちゃうスグレもの。
特に昨今、IE6~7への対応で苦労することが多いので、これら問題の多いブラウザでの表示を分析できるのは大変ありがたい。

IETester 0.4.2 で DebugBar を起動すると下記のような画面になる。メニューの「開発ツール」の中の「DebugBar」を押して起動できる。(ただし、IETesterとDebugBarは別モノなので、それぞれインストールしないといけない。)

IETesterでDebugBarを起動した図

関連情報:

Google Chrome 開発/管理ツール

Googleのブラウザ Google Chrome にも公式の開発ツールが付いている。
画面右上にある「ページメニュー」の中に、「開発/管理」というメニューがある。

メニューを選択する図

選べるメニューは次の3つ。

  • ソースを表示
  • JavaScriptコンソール
  • タスクマネージャ

特に多用するのはJavaScriptコンソールだと思う。DOMインスペクタもこの機能に含まれている。


起動してみるとこんな画面。

Firebug同様、タグ表示にマウスを載せたり選択したりすると、ブラウザ画面で該当する要素がハイライトしたりする。もちろん要素に適用されているCSSなどもちゃんと見れる。

過去の関連記事:


プロフィール

コヤナギ トモヤ

まったりウェブ系コーダーしてます。PHP製静的CMS Pickles 2 を開発しています。

RSSフィード

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