Blog

開発者ツールとは

Last modified by fukudayasuo on 2014/05/16, 14:37

開発者ツール概要

開発者ツールとは各ブラウザに用意されている、開発者向けのwebページの検証ツールです。
DOMツリーや適用されているスタイルの確認、JavaScriptの動作確認(デバッグ)、パフォーマンスのチェック等を行うことができます。

各ブラウザの開発者ツール

InternetExplorer

IEはversion8以降から開発者ツールが付属するようになりました。
F12キーまたは、設定ボタンから開発者ツールを選択して開きます。
ie_devtool_open.png

開発者ツール画面
ie_devtool.png

GoogleChrome

F12キーまたはCtrl+Shift+Iまたはメニューから開発者ツールを選択して開きます。
ch_devtool_open.png

開発者ツール画面
ch_devtool.png

Firefox

Firefoxにはデフォルトで開発者ツールが付属していますが、Firebugという開発者ツールアドオンもあります。
Firebug

デフォルトで入っている開発者ツールは以下のように開きます。

メニューから開発者ツールを選択して開きます。
ff_devtool_open.png

開発者ツール画面
ff_devtool.png

Firebugを使用する場合は、以下の通りです。

F12またはメニューからFirebugを選択して開きます。
firebug_devtool_open.png

開発者ツール画面
firebug_devtool.png

Safari

Ctrl+Shift+Iまたはメニューから開発者ツールを選択して開きます。
sa_devtool_open.png

開発者ツール画面
sa_devtool.png

Opera

OperaにはDragonFlyという開発者用ツールが用意されています。
Ctrl+Shift+Iまたはメニューから開発者ツールを選択して開きます。
op_devtool_open.png

開発者ツール画面
op_devtool.png

機能対応表

以下、各ブラウザの開発者ツールで対応している機能の対応表です。各機能についての詳細は開発者ツールをご覧ください。

括弧内は動作確認を行ったバージョンです。

IE(9)Chrome(28)Firefox(23)Safari(5)Opera(12)
HTML要素の表示、編集、スタイル編集
JavaScriptのデバッグ
jsコードの整形×
ネットワークログ
プロファイラ
タイムライン×××
スクリーンショット××××
カラーピッカー×××
W3C 検証サービス××××
ブラウザ・ドキュメントモードの選択××××

Copyright (C) 2012-2017 NS Solutions Corporation, All Rights Reserved.