IE8の「開発者ツール」は案外使える

2009年3月20日に公開されたIE8は,MSにしてはまともにW3C規格に沿って表示できるブラウザで,一年程経過した現段階ではまずまずの評価を下してもよいのではないでしょうか。
ただ,HTML5対応は他ブラウザに比べてかなり弱いので,IE9での巻き返しに期待しましょう。

KCGで僕が担当しているウェブの授業では,4月5月でHTML・CSSの範囲を終え,6月からJavaScriptの内容に入っているのですが,毎回,学生の入力ミスなどによる動作エラーがおこりがちで,教員としてはデバッグのお手伝いをできるだけ手早く行いたいところです。

Dreamweaverがインストールされている実習機だと,リアルタイムのデバッグ機能があるので,学生も自分でバグの場所を見つけて修正しているのですが,すべての教室のマシンにAdobeCS4が入っているわけではありません。
秀丸などのテキストエディタでソースコードを入力し,いざブラウザで表示確認してみるとエラー,「先生,わかりませーん」で一緒にバグ探しをするというのが以前まではよくある風景でした。

今年度からは,Mac以外の実習機はすべてwindows7になり,IE8が標準搭載されています(Macの教室にはすべてAdobeCS4が入っています)。このIE8には「開発者ツール」というものがあるのはご存知でしょうか。
「ツール」メニューから「開発者ツール」を選ぶか,F12キーを押すと立ち上がります。

「HTML」タブを選ぶと,ドキュメントの構造が一目瞭然で表示され,要素の親子関係が把握しやすくなります。各属性の設定値や,マージンなどのレイアウトの設定なども直接書き換えて表示確認することが可能です。また,各要素に設定されたスタイルシートのプロパティと値を外部ファイルも含めて一覧表示できます。カスケーディングによって無効にされた値には取消し線が引かれ,どの設定がページ内で「活き」なのかすぐ分かります。

「CSS」タブを選ぶと,外部*.cssファイルごとにすべてのプロパティに対するチェックボックスが用意され,on/offの切り替えで表示を確認することができます。値の変更も可能です。

「スクリプト」タブを選ぶと,JavaScriptのデバッグが行えます。ブレークポイントを設定して,細かく動作確認することもできます。Firefoxのアドオン「firebug」にも似たような機能がありますが,ブラウザシェアNo.1のIEでチェックできるというのが大きいですね。

「プロファイラー」タブを選ぶと,JavaScriptがクライアントに与える負荷を調べることができます。不必要なループや細かすぎるタイムアウトなど,ブラウザの動作が重くなる原因を探すときに便利でしょう。

「開発者ツール」とありますが,開発者はもちろん,授業担当の教員にとっても非常に便利なツールです。

京都コンピュータ学院(KCG)
京都情報大学院大学(KCGI)

comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*