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などもちゃんと見れる。

過去の関連記事:


プロフィール

ときにはデザイナ、ときにはディレクタ、ときにはプログラマ、ときには何でも屋と、ウェブの世界で未熟ながらもいろいろやっている、コヤナギトモヤです。

ツイッター上ではこのヒト。
@tomk79

RSSフィード

ページの先頭へ戻る