Chrome・Safari・Firefox・Edgeでブラウザコンソールを開く方法【ショートカット付き解説】

ブラウザコンソールを開きたい最も一般的な理由は、ページ編集の問題、表示崩れ、正しく動作しないブロックなど、JavaScriptのエラーや競合を特定することです。ただし、ブラウザごとにショートカットや手順が異なり、それぞれ独自の方法でコンソールを開き、Webページの裏側(バックエンド)を確認できるようになっています。

市場シェアが5%を超えているブラウザは4つだけ(Chrome、Safari、Edge、Firefox)なので、この記事ではそれぞれのブラウザでコンソールを開く複数の方法をご紹介します。なお、各ブラウザでは要素やエラーの色分けやラベル表示が異なる点に注意してください。

Google Chromeでコンソールを開く方法

Chromeには、実は内蔵コンソールを開く方法が3つあります。

使用しているChromeのビルドに関わらず、以下のショートカットで内蔵コンソールを開いたり閉じたりできます。

• F12
• Ctrl + Shift + J(Macの場合はCmd + Option + J)

同じショートカットでコンソールを非表示にできる点も覚えておきましょう。デフォルトでは、Chromeのコンソールは画面のちょうど半分を占めますが、中央のスライダーで比率を簡単に調整でき、その変更は次回コンソールを開く際にも記憶されます。

特定の要素を調べたい場合は、マウスでその要素をハイライトして右クリックし、「検証(Inspect)」を選択するだけです。これによりコンソールの「Elements」タブと「Styles」タブが開き、対象の要素に集中して調査できます。

また、ChromeのGUIメニューからもコンソールにアクセス可能です。右上隅のアクションボタン(三点メニュー)をクリックし、「その他のツール > デベロッパーツール」を選択してください。

できるだけ効率的に作業したい方は、Chromeコンソールで使える便利なショートカット集も参考にしてみてください。

Microsoft Edgeでコンソールを開く方法

他のブラウザと同様に、Microsoft Edgeにもインタラクティブなデバッグや簡易テストを行う開発者向けのコンソールツールが搭載されています。

このツールは、閲覧中のWebページに関する情報をログとして記録します。JavaScript、ネットワークリクエスト、セキュリティエラーなどの情報を確認できます。

Microsoft Edgeでコンソールツールを開く最も簡単な方法は、事前定義されたショートカット(F12キー)を使用することです。

GUIメニューからでも操作できます。右上の「設定など」ボタンをクリックし、「その他のツール > 開発者ツール」を選択します。

他のブラウザと同様に、Microsoft Edgeでも内蔵コンソールを使って特定の要素を検証できます。要素を選択して右クリックし、「要素の検査(Inspect Element)」を選ぶだけです。

Microsoft Edgeの内蔵コンソール内で使える便利なショートカットの一覧は以下の通りです。

Mozilla Firefoxでコンソールを開く方法

Mozilla Firefoxの内蔵コンソールは、これまでに紹介した他のブラウザとは少し挙動が異なります。具体的には、ブラウザ画面を半分割するのではなく、独立したウィンドウとして自動的に開かれます。

これはセカンドモニターをお持ちの方にとっては効率的な方式ですが、画面が1つしかないユーザーには少し扱いにくいかもしれません。(その場合は、Alt + TabショートカットでFirefoxとブラウザコンソールの間を素早く切り替えられます。)

Mozilla Firefoxの内蔵ブラウザコンソールを開くには、以下の3つの方法があります。

• 汎用ショートカット「Ctrl + Shift + J(Macの場合はCmd + Shift + J)」を使用する
• アクションメニューから開く — メニューボタンをクリックし、「ウェブ開発 > ブラウザーコンソール」を選択する

• または、コマンドラインからFirefoxを起動する際に「-jsconsole」引数を渡して、ブラウザコンソールを直接開くこともできます。

  /Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

注意： Firefoxには「Webコンソール」という機能もあり、ブラウザコンソールと非常によく似ていますが、こちらはブラウザ全体ではなく単一のコンテンツタブに対して適用されるという違いがあります。

Safariでコンソールを開く方法

これまでに取り上げた他のブラウザとは異なり、Safariのエラーコンソールはデフォルトで無効になっています。そのため、利用前に追加の手順で有効化する必要があります。

まず、Safariを開いてメニューバーの「環境設定」をクリックします。「環境設定」画面内の「詳細」タブを開き、「メニューバーに“開発”メニューを表示」のチェックボックスにチェックを入れましょう。

コンソールが使える状態になったら、上部メニューの「開発」タブから「エラーコンソールを表示」をクリックして開きます。

なお、Safariはエラーコンソールを動的に表示する仕組みになっています。コンソールを開いた時点でウィンドウサイズが小さい場合、別の独立したウィンドウとして表示されるので注意してください。

ページと同じウィンドウ内にコンソールを表示したい場合は、エラーコンソールを開く前にブラウザウィンドウを最大化しておく必要があります。