開発者ツール (Developer Tools)

IE8以降には、HTMLやJavaScriptを解析するツールが同梱されています。

HTML

HTMLツール

動的に作成された要素のコードを確認するには、[最新の情報に更新]をクリックする必要があります。

  • スタイル
  • トレース スタイル (スタイル追跡)
  • レイアウト ツール
  • 属性 ツール

≫HTMLの解説

CSS

≫CSSの解説

コンソール

Console Debugging APIにより、スクリプトからコンソールに出力できます。

  • console.log
  • console.info
  • console.warn
  • console.error
  • console.assert
コンソールを使用してアラートとエラー メッセージをログ記録する - 開発者ツールを使用したスクリプトのデバッグ | Microsoft Learn コンソールを使用してエラーを表示してデバッグする (Windows) | MSDN

エラーメッセージ

F12 開発者ツールのコンソール エラー メッセージ (Windows) | MSDN

参考

スクリプト

[デバッグの開始]をクリックすることで、スクリプトをデバッグできます。デバッグが開始されなかったり、ブレークポイントで停止しないような場合には、ブラウザを再起動してデバッグを再実行します。

≫Firebugによるスクリプトのデバッグ

エラーの通知

スクリプトのエラーを早期に発見するために、エラーの通知を有効にします。これは既定では無効となっており、エラー発生時には通知なくスクリプトが停止します。

エラー通知を有効にするには、「インターネット オプション」の[詳細設定]タブの[ブラウズ]カテゴリにある、[スクリプト エラーごとに通知を表示する]にチェックを入れます。

また[スクリプトのデバッグを使用しない (Internet Explorer)]のチェックを外すことで、エラー通知のダイアログからデバッガを起動できるようになります。

参考

プロファイラー (Profiler)

≫Firebugのプロファイラ

ネットワーク

[キャプチャの開始]をクリックし、ページを更新します。そして[キャプチャの停止]をクリックすることで、その間の通信が記録されます。

解析結果の分析法

概要ビュー

詳細ビュー

  • 要求ヘッダー
  • 要求本文
  • 応答ヘッダー
  • 応答本文
  • Cookie
  • イニシエーター
  • タイミング

ブラウザー モード / ドキュメント モード

ブラウザー モード

ブラウザー モードを変更することで、

  • ユーザー エージェント
  • バージョン ベクター
  • ドキュメント モード

の通知内容が変更されます。

ブラウザー モード 説明
Internet Explorer 7 Internet Explorer 7を使用した場合と同じように、ユーザー エージェント、バージョン ベクター、ドキュメント モードを報告する。
Internet Explorer 8 Internet Explorer 8で最も標準に準拠している既定のブラウザー動作に合わせて、ユーザー エージェント、バージョン ベクター、ドキュメント モードを報告する。
Internet Explorer 8の[互換表示] Internet Explorer 7を使用した場合と同じように、バージョン ベクターとドキュメント モードを報告するが、ユーザー エージェント文字列に含まれるトークンは、これが実際にはInternet Explorer 8であり、Internet Explorer 7の文字列も一緒に使用していることを示す。
Internet Explorer 8 の開発者ツールの概要 | MSDN

ドキュメント モード

ドキュメントの描画方法が変更されます。

ドキュメント モード 説明
Quirk ドキュメント タイプなし、またはQuirkドキュメント タイプでドキュメントが描画される場合、この動作はInternet Explorerの動作と同じになる。これは、Internet Explorer 5の動作およびInternet Explorer 6のQuirkモード動作に似たもので、Internet Explorer 7のQuirkモード動作と同じ。
Internet Explorer 7標準 この動作は、strictまたは不明なタイプのドキュメントを描画する場合、Internet Explorer 7の動作と同じになる。
Internet Explorer 8標準 Internet Explorer 8で使用可能な最新の標準準拠の動作。これは、Internet Explorer 8でstrictまたは不明なタイプのドキュメントを描画するときに使用する既定のモード。

エミュレーション (Emulation)

以下の設定を変更して、動作を確認できます。

  • モード
    • ドキュメント モード
    • ブラウザー プロファイル
    • ユーザーエージェント文字列
  • ディスプレイ
    • 向き
    • 解像度
  • 位置情報
    • GPSのシミュレート
      • 緯度、経度

参考

参考

複数の技術系サイトから、まとめて検索