2014/06/06

主要ブラウザ5種の開発者ツールの開き方 まとめ

主要ブラウザ5種の開発者ツールの開き方 まとめ

Webサイトを制作する際に,ブラウザ毎に表示や処理の違いがあり,デザイナーや開発者を困らせる一因になっています.

そこで,今回は主要ブラウザにおける開発者ツールの起動方法を紹介します.

目次

Internet Explorer

F12キーを押下するか,歯車のアイコンをクリックし,F12開発者ツールを選択します.

Firefox

メニューアイコンをクリックし,開発ツール開発ツールを表示を選択します.

Opera

ウインドウ左上のメニューアイコンをクリック→その他のツール開発者ツールを有効にするをクリックします.

そして,同様に左上のメニューアイコンをクリックし,開発者用ツールWebインスペクタを選択します.

Safari

ウインドウ右上の歯車アイコンをクリックし,設定を選択します.

詳細タブ内下部にある,メニューバーに"開発"メニューを表示にチェックを入れます.

ドキュメントアイコンをクリックし,開発Webインスペクタを表示を選択します.

Google Chrome

ウインドウ右上メニューアイコンをクリックし,ツールデベロッパーツールを選択します.

まとめ

ブラウザによって表示が違うという場合は,この方法で開発者ツールを開き,問題の箇所を検証してみてください.

ブラウザごとに多少使い勝手が違いますが,一つのブラウザで慣れていれば問題は無いでしょう.