【社内LT】ブラウザのDeveloper Toolについて

ブラウザの Developer Tool

2014/1/23 　杉山

index

/*Developer Tool でできること */

/* 各ブラウザの Developer Tool について */

// Internet Explorer

// Firefox

// Safari

// Google Chrome

Developer Tool でできること


/*HTML&CSS の確認 */

HTML タグの書き換え、 CSS のプロパティの適用・未適用、値の変更ができる。


/*Javascript のデバッグ */

コンソールで Javascript のデバッグができる。エラー発生箇所をクリックすると問題の箇所に飛べる。


/* ブラウザからの通信の確認 */

ブラウザからの通信をキャプチャできます。読み込みにかかった時間の可視化、 ajax 通信等で取得した値の確認ができる。


/* 他端末、ブラウザのエミュレーション */

位置情報や UserAgent のエミュレーションなどスマートホンを意識した設定も可能。各 Developer Tool によってさまざま。

各ブラウザのDeveloper Tool について

各ブラウザの Developer Tool について

/*Internet Explorer*/

IE8 から搭載された開発者ツール。 IE の下位ブラウザのブラウザモード、ドキュメントモードでの確認ができる。互換モード表示での確認可。IE11 から Windows Phone などのエミュレーションができるようになった。


/*Internet Explorer*/

ドキュメントモードは、条件付きコメントやユーザーエージェントには影響を与えず、コンテンツの描画方法を決定するもの。つまり、レンダリングエンジンの決定に影響を与え、

ブラウザモードは、条件付きコメントやユーザーエージェントに影響し、ブラウザ全体の挙動を決める。つまり、プログラムや条件付きコメントなどで、ユーザーエージェントを参照して挙動を決定している箇所に影響を与える。

互換モードは、従来のブラウザ向けに設計された Web サイトがよりきれいに表示され、メニュー、画像、またはテキストの位置ずれなどの問題が訂正されます。


/*Firefox*/

以前までは Firebug （アドオン）を使用しなければならなかったが、最近では標準でDeveloper Tool が搭載されるようになった。搭載されたものでは HTML 要素を３ D 表示することができる。


/*Safari*/

iOS6 から搭載された Web インスペクタをオンにして Mac から Web インスペクタを表示すると iPhone で表示している画面の要素を確認できる。


/*Safari*/

iOS の設定から Safari ＞詳細と進めば OK

Safari の環境設定＞詳細を開いたら『メニューバーに“開発”メニューを表示』にチェックを入れて有効にし、次に Mac と iPhone (iPad なども同じ ) を USB ケーブルで接続します。


/*Google Chrome*/

早い段階から iOS や android のエミュレーションができていたが、最近アップデートされてフリックなどタッチイベントの検証もできるようになった。

しっかり検証してバグを潰しましょう。

ご清聴ありがとうございました。

【社内LT】ブラウザのDeveloper Toolについて

Technology

Transcript of 【社内LT】ブラウザのDeveloper Toolについて