【あれ、なんだっけ?】4ブラウザのデベロッパーツールの出し方

デベロッパーツールショートカット一覧
Pocket

どうもジャングルオーシャンのミケです。

頭が逆さFirefoxとよく言われます。

ジャングルオーシャンのミケです

ウェブサイトの構造が気になることってない?

世の中にはいろんなウェブサイトがある

ためになるサイトだったり面白いサイトだったり

そんなウェブサイトのソースがどうなってるんだろうって

気になることあるよね

そんな時に便利なのが

デベロッパーツール

ブラウザに標準搭載されているウェブサイト丸裸ツール!!

だれでもすぐに無料使えるんだ!!

すごいよね!!

というわけで

デベロッパーツールの出し方をご紹介

出し方は3通り

・ショートカットキー

・メニューバーから選択

・右クリックで出したメニューから選択

ショートカットは表にまとめたから見てみてね

それぞれのツールの出し方の詳細は表の下にMacとWindowsでわけてまとめてあるよ

ウェブサイトを分析するときにすごく便利なツールだから

ぜひおぼえよう!

デベロッパーツールのショートカット

以下のテーブルでは、最初の列にOS、それ以降の列には各ブラウザのデベロッパーツールを開くときのショートカットキーを入れています。

  Chrome Firefox Safari IE
mac command+option+I command+option+I command+option+I
win Ctrl+Shift+I Ctrl+Shift+I Ctrl+Alt+I F12

Macの各ブラウザでの出し方【Chrome・Firefox・Safari】

appleロゴ

●Chrome

ショートカット

command+option+I

メニューバー

「表示」>「開発/管理」>「デベロッパーツール」

右クリック

「検証」

●Firefox

ショートカット

command+option+I

メニューバー

「ツール」>「Web開発」>「開発ツールを表示」

右クリック

「要素を調査」

●Safari

デフォルトではないので開発メニューをメニューバーに追加します。
「環境設定」>歯車アイコンの「詳細タブ」>タブの中の一番下にある「メニューバーに”開発”メニューを表示」にチェックを入れる

ショートカット

command+option+I
メニューバーに「開発」を追加しないとできないので注意!

メニューバー

「開発」>「Webインスペクタを表示」

右クリック

「要素の詳細を表示」
メニューバーに「開発」を追加しないとできないので注意!

Windowsの各ブラウザでの出し方【Chrome・Firefox・Safari・IE】

windowsロゴ

●Chrome

ショートカット

Ctrl+Shift+I

メニューバー

ブラウザ右上の「三点リーダーが縦になったようなアイコン」>「その他のツール」>「デベロッパーツール」

右クリック

「検証」

●Firefox

ショートカット

Ctrl+Shift+I

メニューバー

ブラウザ右上の「ハンバーガーメニュー」>レンチのアイコンの「開発ツール」>「開発ツールを表示」

右クリック

「要素を調査」

●Safari

Macと同じく、デフォルトではないので開発メニューをメニューバーに追加します。
ブラウザ右上の「歯車アイコン」>「設定」>歯車アイコンの「詳細タブ」>タブの中の一番下にある「メニューバーに”開発”メニューを表示」にチェックを入れる

ショートカット

Ctrl+Alt+I
メニューバーに「開発」を追加しないとできないので注意!

メニューバー

「開発」>「Webインスペクタを表示」

右クリック

「要素の詳細を表示」
メニューバーに「開発」を追加しないとできないので注意!

●IE

ショートカット

F12

メニューバー

右上の「歯車アイコン」>「F12 開発者ツール」

右クリック

「要素の検査」

各ブラウザのデベロッパーツールの出し方は以上になるよ

うまく出せたかな?

いろんな環境でウェブサイトを作ってると

いつもはクロームしか使わないけど他のブラウザを使わないといけなくなっちゃった!

なんていうシチュエーションに遭遇する事もあると思うから

覚えておいて損はないはずだよ!

ちゃんと出せたのならもうどんな環境でも大丈夫!

今日から君もDeveloperだ!!

ブラウザとミケ

それじゃまた今度ね!

【プログラミングの他の記事を読む】

・【猿速】YOUはプログラムってどう覚えてる?

・【猿速】知って損しないかも..プログラマーになりたいゴリラさん達へ

・HTMLってまさかあの人形と同じじゃない?

Related Post

Pocket