デベロッパーツールのコンソール表示方法

JavaScriptのエラーなどは、コンソールを使って確認します。

不具合やエラーが起きていると思われる画面で、コンソールを見てみてください。

確認方法

▼参考サイト(画像あり)
 コンソールはどうやったら確認できるのでしょうか?

デベロッパーツールの表示方法は、お使いのブラウザによって異なります。

Google Chrome・Microsoft Edge の場合

  1. Google Chrome・Microsoft Edgeにて、エラーが発生した画面を開く
  2. [F12]キーを押す
    ※もしくは画面右上の [︙]をクリック→[その他のツール]→[デベロッパー ツール]を選択
  3. [console]タブをクリックし、対象画面で操作実行後に表示されるコンソール内容を確認する
    ※コンソールタブ内の赤い部分に「▶︎」が表示されているものについては、「▶︎」部分をクリックしてエラー全文を表示

Firefox の場合

  1. Firefoxで、エラーが発生した画面を開く
  2. [F12]キーを押す
    ※もしくは画面右上の[三]をクリック→ [ウェブ開発]→[開発ツールを表示]を選択
  3. [コンソール]タブをクリックし、対象画面で操作実行後に表示されるコンソール内容を確認する

Safari の場合

  1. Safariで、エラーが発生した画面を開く
  2. メニューバーから[開発]をクリック→[Webインスペクタを表示]を選択
    ※もしくはショートカットキー「Option + Command + I」を押す
  3. [コンソール]タブをクリックし、対象画面で操作実行後に表示されるコンソール内容を確認する

※Safariでは、事前設定が必要な場合があります。
 参考サイト:Safariの開発者用デベロッパーツールの表示と簡単な使い方


▼関連するかも?
 JavaScriptの圧縮・縮小化はしないでください

Related Articles