スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

DWA: Internet Explorer Toolbar のDOM インスペクタ機能を使う

2008年12月17日 00:50

WEBアプリの開発者で、DWA の設計に興味を持って、自力でFormsX.nsf を(Xの部分はバージョンによって違います)を開いて設計解析をしようとして挫折された方は多いのではないのでしょうか?

 僕自身調査時に設計を見ることはありますが、見ていて結構つらいな、て思うことも多いです。
で、問題毎にどこを調査の糸口にするか?ですが、やはり該当タグのID名やCSS用のクラス名などを調べることを調査のとっかかりにしたい、という方は多いのではないでしょうか。

今日紹介するには以下のツールです。名前のとおりInternet Explorerのプラグインなので、マイクロソフト社様から提供されているものです。このようなDOM インスペクタを使うと、表示された画面から構造解析を行うのでJSファイルなどが複数に分割されているサイトやJavaScriptなどを使ってダイナミックに表示しているページが多数ある場合にはかなり効率がよくなります。

Internet Explorer Developer Toolbar

ツールバーをインストールするとツールバーに矢印アイコンが現れるようになると思いますが、このツールバーアイコンをクリックして解析を行います。 (IE7で確認していますが、IE6.x などでアイコンが違ったらすみません。。)

実際僕が主に使う機能は二つだけで、「Elementの検索と表示」(DOM Inspector)と「選択部分のHTMLソースの表示」だけです。使い方も簡単なので、ここでも紹介してみます。
(スクリーンショットはサムネイル表示にしているので、クリックすると拡大します。)

1. エレメントの選択
 はじめに、興味のあるエレメントを選択する必要があります。
キーワード検索なども出来るのですが、ここではマウスでクリックしてエレメントを選択するために「Select Element By Click」を選択し、該当のエレメントをクリックしてください。
 このとき、コンテンツにカーソルが移動するとエレメントを移動するたびに青枠のようなものが表示されるのが分かると思います。
以下の画面ショットも参考にしてください。
エレメントの選択

2. エレメント情報の表示
 選択すれば、以下の画面ショットのようにエレメント情報が表示されるようになります。
赤太枠が選択されたコンテンツ、左下にある青太枠がDOMの構造情報、緑枠が選択エレメントの属性に関する情報です。属性は編集可能なので簡単なデバッグも出来ます。

詳細情報の表示

3. 選択HTMLソースの表示
 次にこの部分のHTMLソースを表示してみましょう。以下のように[View]-[Source]-[DOM (Element + Styles) ]を選択します。(エレメントは上のステップですでに選択済みであるとします。)

選択要素のHTMLソース表示


4. 表示されたHTMLソース
 ブラウザの機能でHTMLソースを見ると、CSSの情報とか見つけづらいですが、ここでは一緒に表示されるので便利です。
こんな感じ。
表示されたHTMLソース

DWA以外のコンテンツでも役に立つと思うので使ってみてください。
あと、ひとつだけ注意点ですが、どうもこのプラグインが原因でブラウザがハングアップするケースがあったので、開発用のマシン以外にはむやみに入れないほうがいいんじゃないかな、て思います。
(プラグインの問題についてもここ何回かかけて記事にしていこうと思っています。)


関連記事:
MS、無償のWeb制作者向けIEプラグイン「Internet Explorer Developer Toolbar」正式版公開


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://hnagasim.blog8.fc2.com/tb.php/44-e29c8b4c
    この記事へのトラックバック


    最新記事


    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。