IE8に開発者ツールが同梱されていたので、スクリーンショットレポート。

IE メモ

FirefoxにFirebug+Web Debeloper、OperaにDragonfly、IEにIE Developer Toolsでしたが、そのIE Developer ToolsがIE8に同梱された＋日本語化されたのでスクリーンショットで解説。ちなみに、Beta1からすでに同梱されていました。

起動と基本機能

ツール→開発者ツールから開きます。
f:id:amatanoyo:20080828135043p:image
すると、こんなウィンドウが開きます。
f:id:amatanoyo:20080828135042p:image
右上の□ボタンを押すとブラウザ枠内下部に（Firebugみたいな）表示されます。
f:id:amatanoyo:20080828135040p:image

いろんな画像

CSSタブでCSSの編集。
f:id:amatanoyo:20080828135640p:image


スクリプトタブでデバッグ。
f:id:amatanoyo:20080828135732p:image


プロファイラー。
f:id:amatanoyo:20080828135403p:image

ツールバーの中身

  • ファイル
    • すべてを元に戻す
  • 検索
    • クリックで要素を選択
  • 無効にする
    • スクリプト
    • ポップアップブロック
    • すべてのCSS
  • 表示 - 画面上に表示される。
    • ClassとID情報
    • リンクパス
    • リンクレポート
    • タブインデックス
    • アクセスキー
    • ソース
      • スタイル付きの要素ソース
      • DOM（要素）
      • DOM（ページ）
      • 元の形式
  • アウトライン - 画面上に表示され、それぞれを線で囲う。
    • テーブル：セル
    • テーブル
    • DIV要素
    • イメージ
    • 任意の要素 - ダイアログが表示され、要素を入力し何色の線で囲むかを選択できる。
    • 位置づけられたオブジェクト
      • 相対
      • 絶対
      • 固定
      • フロート
    • アウトラインのクリア
  • イメージ - 画面上に表示される。
    • イメージを無効にする
    • イメージの大きさを表示する
    • イメージのファイルサイズを表示する
    • イメージパスを表示する
    • 代替テキストの表示
    • イメージレポート - Temporary Internet Files\Low\Content.IE5\にイメージ情報（上記含む）を記載するxmlファイルが生成される。
  • キャッシュ
    • 常にサーバーから更新する
    • ブラウザーキャッシュの消去
    • このドメインのブラウザーキャッシュを消去します
    • Cookieを無効にする
    • セッションCookieを消去する
    • ドメインのCookieを消去する
    • Cookie情報を表示 - Temporary Internet Files\Low\Content.IE5\に今までにアクセスしたサイトからのCookie情報を記載するxmlファイルが生成される。
  • ツール
    • サイズ変更
    • ルーラーの表示
    • カラーピッカーを表示する
  • 検証
    • HTML
    • CSS
    • フィード
    • リンク
    • ローカルHTML
    • ローカルCSS
    • ユーザー補助
      • WAIチェックリスト
      • 第508条チェックリスト
    • 複数の検証
  • ブラウザモード
  • ドキュメントモード
    • Quirkモード（ページの規定）
    • Internet Explorer7標準
    • Internet Explorer8標準

いろいろ

「ブラウザー」に見られるように、MSの表記変更が反映されていることがわかりますねー。