開発者ツールとは
Last modified by fukudayasuo on 2014/05/16, 14:37
開発者ツール概要
開発者ツールとは各ブラウザに用意されている、開発者向けのwebページの検証ツールです。
DOMツリーや適用されているスタイルの確認、JavaScriptの動作確認(デバッグ)、パフォーマンスのチェック等を行うことができます。
各ブラウザの開発者ツール
InternetExplorer
IEはversion8以降から開発者ツールが付属するようになりました。
F12キーまたは、設定ボタンから開発者ツールを選択して開きます。
開発者ツール画面
GoogleChrome
F12キーまたはCtrl+Shift+Iまたはメニューから開発者ツールを選択して開きます。
開発者ツール画面
Firefox
Firefoxにはデフォルトで開発者ツールが付属していますが、Firebugという開発者ツールアドオンもあります。
Firebug
デフォルトで入っている開発者ツールは以下のように開きます。
メニューから開発者ツールを選択して開きます。
開発者ツール画面
Firebugを使用する場合は、以下の通りです。
F12またはメニューからFirebugを選択して開きます。
開発者ツール画面
Safari
Ctrl+Shift+Iまたはメニューから開発者ツールを選択して開きます。
開発者ツール画面
Opera
OperaにはDragonFlyという開発者用ツールが用意されています。
Ctrl+Shift+Iまたはメニューから開発者ツールを選択して開きます。
開発者ツール画面
機能対応表
以下、各ブラウザの開発者ツールで対応している機能の対応表です。各機能についての詳細は開発者ツールをご覧ください。
括弧内は動作確認を行ったバージョンです。
| IE(9) | Chrome(28) | Firefox(23) | Safari(5) | Opera(12) | |
|---|---|---|---|---|---|
| HTML要素の表示、編集、スタイル編集 | ○ | ○ | ○ | ○ | ○ |
| JavaScriptのデバッグ | ○ | ○ | ○ | ○ | ○ |
| jsコードの整形 | ○ | ○ | × | ○ | ○ |
| ネットワークログ | ○ | ○ | ○ | ○ | ○ |
| プロファイラ | ○ | ○ | ○ | ○ | ○ |
| タイムライン | × | ○ | × | ○ | × |
| スクリーンショット | × | × | × | × | ○ |
| カラーピッカー | ○ | × | × | × | ○ |
| W3C 検証サービス | ○ | × | × | × | × |
| ブラウザ・ドキュメントモードの選択 | ○ | × | × | × | × |