/*Developer Toolでできること*/ /*各ブラウザのDeveloper Toolについて*/

1. ブラウザのDeveloper Tool
2014/1/23
杉山

2. index
/*Developer Toolでできること*/
/*各ブラウザのDeveloper Toolについて*/
// Internet Explorer
// Firefox
// Safari
// Google Chrome

3. Developer Toolでできること

4. Developer Toolでできること
/*HTML&CSSの確認*/
HTMLタグの書き換え、CSSのプロパティの
適用・未適用、値の変更ができる。

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

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

7. Developer Toolでできること
/*他端末、ブラウザのエミュレーショ
ン*/
位置情報やUserAgentのエミュレーションな
どスマートホンを意識した設定も可能。
各Developer Toolによってさまざま。

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

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

10. 各ブラウザのDeveloper Toolについて
/*Internet Explorer*/
ドキュメントモードは、
条件付きコメントやユーザーエージェントには影響を与えず、コンテンツの描
画方法を決定するもの。つまり、レンダリングエンジンの決定に影響を与え、
ブラウザモードは、
条件付きコメントやユーザーエージェントに影響し、ブラウザ全体の挙動を決
める。つまり、プログラムや条件付きコメントなどで、ユーザーエージェント
を参照して挙動を決定している箇所に影響を与える。
互換モードは、
従来のブラウザ向けに設計されたWebサイトがよりきれいに表示され、メ
ニュー、画像、またはテキストの位置ずれなどの問題が訂正されます。

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

12. 各ブラウザのDeveloper Toolについて
/*Safari*/
iOS6から搭載されたWebインスペクタをオ
ンにしてMacからWebインスペクタを表示
するとiPhoneで表示している画面の要素を
確認できる。

13. 各ブラウザのDeveloper Toolについて
/*Safari*/
iOS の設定から Safari＞詳細 と進めば OK
Safari の 環境設定＞詳細 を開いたら『メ
ニューバーに“開発”メニューを表示』に
チェックを入れて有効にし、次に Mac と
iPhone (iPad なども同じ) を USB ケーブル
で接続します。

14. 各ブラウザのDeveloper Toolについて
/*Google Chrome*/
早い段階からiOSやandroidのエミュレー
ションができていたが、最近アップデート
されてフリックなどタッチイベントの検証
もできるようになった。

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

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