簡単にWebページのデバック・チューニングが出来るIE開発者ツール
Streak - Responsive WordPress Theme - Laptop By: Serge Kij
Webページを開発するときには、是非とも使ってもらいたいIEの開発者ツールをご紹介します。
意外と知らない人も多いのですが、Webページのデバック・チューニングする上でかなり戦力になる優秀なツールです。
開発者ツールで出来るWebページのデバック・チューニング機能
開発者ツールの起動方法
起動方法は簡単で「F12」キーを押すか、IEの「ツール」>「F12 開発者ツール」をクリックします。
HTML/CSSの解析・チューニング
１．HTMLの構造を確認するときには画面右上の矢印ボタンを押して、確認したいwebページの要素をクリックします。
２．要素を選択するときにマウスオーバーされた要素が青色の線で囲われます。
３．要素を選択すると、左側のペインに要素のHTMLが表示されます。右側のペインにはその要素に適応されているCSSが表示されます。
４．左側のペインではHTMLに対して属性の追加ができます。
５．右側のペインではCSSに対して、チェックボックスのON/OFFをすることにより適応/未適応の状態を切り替えることができます。
６．タブを切り替えることにより直接スタイルを書き込むこともできます。
７．書き込んだスタイルはリアルタイムで反映されます。
javascriptのデバック
右側のタブを「スクリプト」に切り替えることにより、読み込まれているjavascriptが左のペインに表示されます。
「デバック開始」ボタンをクリックすると、javascriptを1行ずつ実行しているステップ実行や変数の要素の中身が確認できるウォッチ式などが使えます。
「デバック開始」ボタンをクリックすると、javascriptを1行ずつ実行しているステップ実行や変数の要素の中身が確認できるウォッチ式などが使えます。
IEの各バージョンで確認する
「ブラウザーモード」のメニューからIE7,IE8,IE9と互換表示を選択することで、それぞれのブラウザで画面を開いたときと同じ動きをさせることができます。
IEは各バージョンでCSSの解釈も異なるため、クロスブラウザ確認がこれ1つで出来るようになります。
IEは各バージョンでCSSの解釈も異なるため、クロスブラウザ確認がこれ1つで出来るようになります。
IEの開発者ツールは使いこなせばWeb開発の強い見方になります。
これを機に一度使ってみてください。
« Web制作に役立つキャプチャーソフト「FreeScreenshotCapture」 Photeshopの代わりに使える!! 無料の画像編集ソフト「GIMP」のインストール »
Trackback URL
http://webnonotes.com/web/iedeveloptools/trackback/No Comments Yet