Windows TIPS

［Tools & Services

→ Windows TIPS TOPへ → Windows TIPS全リストへ → 内容別分類一覧へ Webページのトラブル原因究明にIE8の「開発者ツール」を活用する → 解説をスキップして操作方法を読む デジタルアドバンテージ　島田 広道 2009/07/03 対象アプリケーション Internet Explorer 8

■ 社内Webサイトでのトラブル発生時、クライアントPC側でWebページの解析ツールを実行すると、トラブル原因の切り分けなどに役立つ。 ■ しかし、従来の解説ツールはIE以外のWebブラウザのアドオンが多く、セットアップに手間と時間がかかる。 ■ Internet Explorer 8がインストール済みなら、標準装備の「開発者ツール」によって、Webページの表示や挙動などを素早く調査・確認できる。

解説

　社内ポータルや業務用Webアプリケーションの運用中にトラブルが発生した場合、まずはシステム管理者がトラブル原因の切り分けを担当することが多いだろう。切り分けとは、原因がWebサイト側にあるのか、それともクライアントPCのWebブラウザ側にあるのか、といった作業を指す。不具合がWebサイトの設計に由来するなら、切り分け後の作業はWeb開発担当かWebデザイナに引き継げるが、それまでは、管理下にあるクライアントPCが絡む以上、システム管理者が担当しなければならないだろう。

　このとき役立つのが、本来はWeb開発者やWebデザイナが開発時に利用するWebページの解析ツールだ。これはクライアント側で動作するソフトウェア・ツールで、WebページのHTMLやスタイル、スクリプトなどの挙動や表示を細かく確認できる。ただ、従来の解析ツールはFirefoxなどIE以外のWebブラウザのアドオンとして提供されていることが多く、そのセットアップに手間と時間がかかるのが難点だった。

製品レビュー「Internet Explorer 8（前編)」 製品レビュー「Internet Explorer 8（後編)」

　しかしInternet Explorer 8（IE8）の登場により状況は変わった。IE8には標準で「開発者ツール」と呼ばれる解析ツールが同梱されており、IE8さえインストール済みならすぐ呼び出してWebページを解析できる。また、十分な機能を装備しており、使い勝手も悪くないので、IE8が利用可能な環境なら、これをWebページのトラブル解析に役立てない手はない。本稿では、システム管理者がWebページのトラブル対策に用いる前提で、この「開発者ツール」でよく利用する機能をピックアップして説明する。

操作方法

開発者ツールを起動する

　開発者ツールを起動するには、IE8のブラウザ画面で対象のWebページを表示してから、F12キーを押すか、［ツール］−［開発者ツール］を実行する。開発者ツールはデフォルトでブラウザ画面とは別ウィンドウで表示される。また起動直後の表示内容は前回終了時に準じる。

開発者ツールの画面構成

開発者ツールはデフォルトでブラウザ画面とは別ウィンドウで表示される。起動直後の表示内容は前回終了時に準じる。

IE8の互換モード表示などを切り替えるためのボタン。 これをクリックすると、開発者ツールをブラウザ画面の下部に表示するか、別ウィンドウで表示するか選択できる。 4種類のツールを選択するためのタブ。各ツールの詳細は後述する。 ツールごとに割り当てられているツール・バー。 HTMLやCSS、スクリプトなどの詳細な情報が表示されるペイン。のタブの選択によって表示内容は変わる。

　開発者ツールを起動したときのブラウザ画面で別のページにジャンプしたり、再読み込みを行ったりすると、開発者ツールも自動的に連動して更新される。

Webページから調査対象のHTML要素を選ぶ

　Webページの表示に不具合が見つかった場合、まずはその部分がHTMLソース内のどの部分（要素）に該当するのか確認する必要がある。開発者ツールでは、［Ctrl］＋［B］キーを押すか［検索］−［クリックで要素を選択］のチェックをオンにし、ブラウザ上で該当部分をクリックするとHTMLソースの該当要素が選択表示される。ソースを目で追って要素を探す必要はない。

Webページから調査対象のHTML要素を選ぶ

いちいちHTMLソースを目で追わなくても、Webページで調査対象の部分を選択すれば、開発者ツールのHTMLソース表示にて該当する要素が選択される。

これをクリックしてチェックをオンにするか、［Ctrl］＋［B］キーを押すと、調査対象の要素を選択するモードになる。 これをクリックしてオンにしても、HTML要素の選択モードに入る。 ブラウザのWebページにマウス・カーソルを乗せると、青色の枠線で選択候補が囲まれる。マウス・カーソルを動かして調査対象（ここではパンくずリストの「Windows Server Insider」）にこの枠線が乗ったらクリックする。→へ

ソース内で選択されたHTML要素

開発者ツールの左ペインにHTMLソースが表示され、前の画面で選んだ要素が選択されたところ。 　 選択された要素に関する情報が自動的に表示される。

HTML要素に適用されたスタイルを確認・修正する

　Webページ表示のトラブル原因の調査では、HTML要素のスタイル適用状況を参照することが非常に多い。開発者ツールでは、前述の手順でHTML要素を選択してから、右側のツール・バーの［スタイル］ボタンをクリックするだけで、その要素のスタイル適用状況が詳しく表示される。

［スタイル］ボタンによるスタイルの確認・修正

選択したHTML要素に適用されている全スタイルを確認したり、一時的に修正したりできる。

これが選択されていることを確認する。 対象となるHTML要素。 これをクリックする。 スタイルの適用対象のHTML要素やクラス名、ID名など。各スタイルはツリー状に連なって表示される。 優先順位が低く適用されなかったスタイルは、このように打ち消し線付きで表示される。 スタイルが格納されているCSSファイル。クリックするとそのCSSファイルの内容が表示される。 とスタイルは同じだが、打ち消し線はなく、こちらが適用されていることが分かる。また左端のチェックをオフにすると、このスタイルを無効にできる。

　スタイルは確認するだけではなく、書き換えてWebページの表示を一時的に変更できる。それには上記画面で該当スタイル部分をダブル・クリックし、パラメータを書き換えればよい（スタイルそのものも別のものに書き換えられる）。ただし、あくまでも変更はブラウザ上だけの一時的なものであり、Webサイト上のソースそのものは変更されない。

　最終的に適用されたスタイルを素早く確認したいなら、次の画面のように、［トレース スタイル］ボタンをクリックした方が分かりやすく表示される。

［トレース スタイル］ボタンによるスタイル情報の表示

スタイル情報が表示されるのは前述の［スタイル］ボタンと共通だが、最終的に適用されたスタイルを基準としている点が異なる。

これが選択されていることを確認する。 対象となるHTML要素。 これをクリックする。 最終的に適用されたスタイルの一覧が最初に表示される。ツリーを展開すると、各スタイルが定義されているクラス名やID名、CSSファイル名などが表示される。

マージンやパディングなどを図で確認する

　Webページの表示が乱れる原因でよくあるのは、マージンやパディングといったHTML要素のボックス・サイズが正しく設定／処理されていないことだ。開発者ツールでは、［HTML］タブで［レイアウト］ボタンをクリックすると、次の画面のようにボックス・サイズを分かりやすく図示してくれる。

マージンやパディングなどの図示

こうしたボックス・サイズは、数値だけ表示されてもイメージするのは難しい。開発者ツールではこのように分かりやすく図示してくれる。

これが選択されていることを確認する。 対象のHTML要素を選択する。 これをクリックする。 オフセットやマージン、枠線、パディングなどが図示される。各数値はダブル・クリックして一時的に書き換えてプレビューできる。

HTML要素の属性を確認・修正する

　HTML要素の表示はスタイルだけではなく、HTMLの属性にも左右される。開発者ツールでは、HTMLタブで［属性］ボタンをクリックすると、対象のHTML要素の属性のほか、インラインで記述されたスタイルもまとめて一覧で表示される。

HTML要素の属性の一覧表示

インラインで記述されたスタイルも、属性と併せて表示される。なお、属性の変更／追加／削除はいずれも一時的なものだ。

これが選択されていることを確認する。 対象のHTML要素を選択する。 これをクリックする。 属性を追加するには、これをクリックする。 から属性を選んでこれをクリックすると、その属性が削除される。 設定されている属性の一覧。［名前］も［値］もダブル・クリックすると一時的に変更できる。

スクリプトの動作を確認する

　Ajaxなどの普及もあってか、JavaScriptのようなスクリプトの利用はもはや一般的といえる。開発者ツールでも、［スクリプト］タブからスクリプトのデバッグ実行が可能だ。

スクリプトのデバッグ実行

ブレーク・ポイントの設定やステップ実行など、スクリプトの動作確認に必要なデバッグ実行の機能が一通りそろっている。

これが選択されていることを確認する。 続行や一時停止（ブレーク）、ステップ実行など、デバッグ時のスクリプト実行を制御するためのボタン。 スクリプトのデバッグ実行をオン／オフするボタン。 これをクリックしてデバッグ対象のスクリプト・ファイルを選択する。 個別にステートメントや変数を入力して実行したり、スクリプトのエラーを確認したりするには、これをクリックする。 ブレーク・ポイントの確認や削除、無効化／有効化には、これをクリックする。 実行中のスクリプトのローカル変数を表示するには、これをクリックする。 監視したい変数を追加するには、これをクリックする。 実行中のスクリプトのコール・スタック（呼び出し履歴）を確認するには、これとを切り替えつつ参照する。

　また［プロファイラー］タブでは、スクリプトのパフォーマンスを解析し、どの部分の実行に時間がかかっているか、などを調査できる。

スクリプトのパフォーマンス解析

Webページの表示中にどのスクリプトが何回実行され、どれくらい時間がかかっているかなど、いわゆる「プロファイリング」を実行できる。

これが選択されていることを確認する。 プロファイリングの開始／停止のためのボタン。基本的な使い方は、これをクリックしてプロファイリングを開始し、対象のWebページの再表示を実行し、プロファイリングを停止する、というもの。 スクリプトの呼び出しツリーごとにを表示するか、それとも関数ごとにまとめて表示するか、選択するためのプルダウン・メニュー。 プロファイリングの結果が表示される。機能ごとに実行回数や経過時間、ソースコードのURLなどが表示される。各行をダブル・クリックすると［スクリプト］タブに切り替わって、該当するスクリプトのソースコードが表示される。

修正した内容を元に戻すには

　前述のように開発者ツールでは、一時的にスタイルやスクリプトなどさまざま要素を書き換えられる。これをすべて元に戻すには、［ファイル］−［すべて元に戻す］を実行すればよい。

◆

　このほかの機能や、より詳細な使い方については、次のWebページを参照していただきたい。

• Internet Explorer 8 の開発者ツールの概要（マイクロソフト MSDN）
• 開発者ツール : スクリプト デバッグの概要（マイクロソフト MSDN）

「Windows TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）