ブラウザコンソールとは？
ブラウザコンソールとは、ブラウザに内蔵されたデベロッパーツールの中のパネルで、Web ページの JavaScript エラーや警告、ログ出力を表示します。開き方は、Chrome / Edge なら F12 または Ctrl+Shift+J（Mac は Cmd+Option+J）、Firefox なら Ctrl+Shift+K（Mac は Cmd+Option+K）。Safari は先に設定で「開発」メニューを有効にしてから Option+Cmd+C を押します。 以下、ブラウザ別の詳しい手順を解説します。
ブラウザコンソールのショートカット一覧表
| ブラウザ | Windows / Linux | macOS | Console パネルを直接開くショートカット |
|---|---|---|---|
| Chrome | F12 または Ctrl+Shift+I |
Cmd+Option+I |
Ctrl+Shift+J / Cmd+Option+J |
| Microsoft Edge | F12 または Ctrl+Shift+I |
Cmd+Option+I |
Ctrl+Shift+J / Cmd+Option+J |
| Firefox | F12 または Ctrl+Shift+I |
Cmd+Option+I |
Ctrl+Shift+K / Cmd+Option+K |
| Safari | （Windows 版はなし） | Cmd+Option+I |
Option+Cmd+C（先に開発メニューを有効化が必要） |
> 覚え方：Chrome / Edge / Firefox はどれも F12 で「完全なデベロッパーツール」が開きます。Console パネルに直接飛ぶ組み合わせだけがブラウザごとに異なります。
Chrome でコンソールを開く（3 つの方法）
Ctrl+Shift+J で Console パネルに直接移動。または F12 で完全な DevTools を開いて上部の「Console」タブをクリックします。Mac は Cmd+Option+J / Cmd+Option+I に相当します。
正常に開けたか確認する：Console に console.log('test') と入力して Enter を押します。test と表示されれば問題ありません。
Microsoft Edge でコンソールを開く
Edge は Chrome と同じ Chromium 系なので、操作はほぼ同じです。
Cmd+Option+I（Mac）で DevTools を開き、Console タブに切り替えます。
Ctrl+Shift+J（Windows）/ Cmd+Option+J（Mac）。Firefox でコンソールを開く
Firefox のコンソールはウェブコンソール（Web Console）と呼ばれ、入口が少し異なります。
Ctrl+Shift+K、Mac は Cmd+Option+K。なお Firefox の F12 は完全なツールボックスを開くもので、Console タブへの切り替えは手動で行う必要があります。
Firefox ウェブコンソールの特徴は、ネットワークリクエストの確認機能が統合されている点です。エラーと失敗したリクエストを同じパネルで確認できます。
Safari でコンソールを開く（Mac 専用。先に開発メニューを有効化）
Safari は「先に設定が必要」という点で唯一の主要ブラウザです。「Safari でコンソールを開く方法」の検索が集中するのもこのためです。
Option+Cmd+C）でコンソールを開けます。コンソールで見るべきポイント
Console を開いたら、次の 3 種類の情報に注目します（パネル左上で重要度ごとにフィルタできます）。
| 種類 | 意味 | バグ報告時の価値 |
|---|---|---|
| エラー（赤） | JavaScript の実行失敗、リソースの読み込み失敗 | 最も価値が高い：多くの場合、原因に直接つながる |
| 警告（黄色） | 潜在的な問題（非推奨 API、CORS に関する警告など） | 補足的な手がかり |
| ログ | ページ自身が出力した情報 | 通常は無視してよい |
また、Network（ネットワーク）パネルは Console と併用することが多いパネルです。Console に「読み込み失敗」が表示されたら Network に切り替えてページを再読み込みすると、どのリクエストが失敗したか（赤く表示）やステータスコード（404 / 500 など）を確認できます。
非エンジニアの代替手段：自動キャプチャ
コンソールを手動で見る方法には、非技術者にとって 2 つのハードルがあります。どのエラーが重要か分からないこと、そしてエラー情報のコピーに漏れが出やすいことです。バグ報告の収集（テスト、カスタマーサポート、PM、クライアントによる確認など）が目的であれば、この工程をツールに任せられます。
- BugCapturer（無料の Chrome 拡張機能）は、スクリーンショットや画面録画の際に、現在のページの Console エラーと Network の失敗リクエストを自動で取得し、注釈付きスクリーンショットや環境情報とともに 1 つのレポートにまとめます。DevTools を開かなくても、エラーはレポートに添付済みです。
- 共有リンクを生成すれば（匿名は 30 日間、ログインで 90 日間保存）、開発者はリンクを開くだけで「画面上の現象」と「コンソールのエラー」を同時に確認できます。「Console のスクリーンショットを送って」という往復がなくなります。
考え方の全体像は Browser DevTools for Non-Developers を参照してください。
FAQ
Q：F12 でコンソールが開かないときは？
A：考えられる原因は 3 つです。① 一部のノート PC では Fn+F12 が必要。② ページが全画面表示のときは、ゲームや動画にショートカットを奪われることがあるため、先に全画面を解除する。③ 一部のサイトは右クリックを無効化していますが、ショートカットは使えます。いずれの場合も、ブラウザのメニューから手動で開くことも可能です。
Q：Console にエラーが出たら、それはページにバグがあるということですか？ A：必ずしもそうではありません。多くのエラーは無害です（サードパーティスクリプトの失敗、拡張機能のノイズなど）。判断基準は、エラーがユーザーから見える問題と同時に発生しているかどうかです。問題を再現したときに新たに出現した赤い Error こそが、重要な手がかりになります。
Q：Console のエラーを開発者に送るには？ A：Console パネルを右クリック → 「名前を付けて保存」でログ全体をエクスポートできるほか、エラー部分をスクリーンショットに撮る方法もあります。より手軽なのは自動収集ツールの利用です。BugCapturer は Console / Network のエラーをバグレポートに自動で添付し、共有リンクを生成するため、手動コピーでの漏れを防げます。
Q：モバイルブラウザ（iOS / Android）でもコンソールは開けますか？
A：モバイルブラウザにはコンソールが組み込まれていません。PC からリモートデバッグで接続して確認します（Chrome の chrome://inspect、または Safari の開発メニューで iPhone に接続）。モバイルユーザーからバグ報告を受ける場合、BugCapturer のような拡張機能が収集するのはデスクトップ側のデータです。問題がスマホでのみ発生する場合は、端末と OS のバージョンを明記してください。
まとめ
3 組のショートカットを覚えれば、状況の 95% をカバーできます。Chrome / Edge は Ctrl+Shift+J（Mac は Cmd+Option+J）、Firefox は Ctrl+Shift+K（Mac は Cmd+Option+K）、Safari は開発メニューを有効にしてから Option+Cmd+C。コンソールの価値は「ページが壊れている」を「何行目のコードが、なぜ壊れているか」に変換することにあります。修正担当ではなく報告担当という立場なら、Console エラーの自動取得をツールに任せるほうがずっと楽です。
関連記事：Browser DevTools for Non-Developers · How to Report Bugs Effectively