コンソールで報告される JavaScript エラーを修正する

  • [アーティクル]

この記事では、コンソールで報告される JavaScript エラーの解決を示すために、6 つのデモ ページについて説明します。

JavaScript エラーを修正する

コンソールでの最初のエクスペリエンスは、スクリプトのエラーである可能性があります。

デモ ページ: コンソール ツールで JavaScript エラーが報告されました

  1. コンソール ツールで報告されたデモ Web ページの JavaScript エラーを新しいウィンドウまたはタブで開きます。

  2. Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 または、 F12 キーを押します。 Web ページの横に DevTools が開きます。

  3. アクティビティ バーの [コンソール] ボタンをクリックします。 DevTools では、 コンソール によってエラーの詳細が表示されます。

    DevTools は、コンソールのエラーに関する詳細情報を提供します

    コンソールの多くのエラー メッセージには、[Web 上でこのメッセージを検索する] ボタンがあり、虫眼鏡として表示されます。 詳細については、「 Web でコンソール エラー メッセージ文字列を検索する」を参照してください。

    このエラー メッセージの情報は、エラーがファイルの error.html 16 行目にあることを示しています。

  4. コンソールの error.html:16 エラー メッセージの右側にあるリンクをクリック します。 [ソース] ツールが開き、コード行が強調表示され、エラーが表示されます。

    ソース ツールは、エラーの原因となったコード行を強調表示します

    スクリプトは、ドキュメント内の最初 h2 の要素を取得し、その周囲に赤い境界線を描画しようとします。 ただし、要素が存在しないため h2 、スクリプトは失敗します。

ネットワークの問題を見つけてデバッグする

コンソールでは、ネットワーク エラーも報告されます。

デモ ページ: コンソールで報告されたネットワーク エラー

  1. コンソール で報告されたデモ Web ページのネットワーク エラー を新しいウィンドウまたはタブで開きます。

  2. Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 または、 F12 キーを押します。 Web ページの横に DevTools が開きます。

    コンソールにネットワークと JavaScript エラーが表示される

    テーブルには が表示 loadingされますが、データが取得されないため、Web ページには何も変更されません。 コンソールで、次の 2 つのエラーが発生しました。

    • HTTP メソッドで GET 始まり、URI が続くネットワーク エラー。

    • Uncaught (in promise) TypeError: data.forEach is not a functionエラー。

  3. エラーが発生した Web ページとコード行へのリンクをクリックして、[ソース] ツールを開きます。 つまり、コンソールでリンクを network-error.html:40 クリック します。

    エラーが発生した Web ページとコード行へのリンクを選択して、[ソース] ツールを開きます。

    [ソース] ツールが開きます。 問題のあるコード行が強調表示され、その後に (x) ボタンがerror続きます。

  4. エラー (x) ボタンをクリックします。 メッセージ Failed to load resource: the server responded with a status of 404 () が表示されます。

    JavaScript でエラーを見つけるには、ソース ツールを使用します

    このエラーは、要求された URL が見つからないことを通知します。

  5. 次のように ネットワーク ツールを開きます。 コンソールを開き、エラーに関連付けられている URI をクリックします。

    リソースが読み込まれないと、コンソールにエラーの HTTP 状態コードが表示されます。

    リソースが読み込まれないと、コンソールにエラーの HTTP 状態コードが表示されます

    ネットワーク ツールには、失敗した要求に関する詳細情報が表示されます。

    ネットワーク ツールには、失敗した要求に関する詳細情報が表示されます

  6. ネットワーク ツールのヘッダーを調べて、より多くの分析情報を取得します。

    ネットワーク ツールでヘッダーを検査すると、より多くの分析情報が得られる場合があります

    問題は何でしたか? という単語reposの後の要求された URI で、2 つのスラッシュ文字 (//) が発生します。

  7. ソース ツールを開き、26 行目を検査 します 。 末尾のスラッシュ文字 (/) は、ベース URI の末尾に発生します。 ソース ツールには、次のエラーを含むコード行が表示されます。

    ソース ツールには、エラーが含まれるコード行が表示されます。

コンソールにエラーがない場合に結果のページを表示する

次に、コンソールにエラーがない場合に結果のページを確認 します。

デモ ページ: コンソールで報告されたネットワーク エラーを修正しました

  1. デモ Web ページを開く 新しいウィンドウまたはタブ でコンソールで報告されたネットワーク エラーを修正 しました。

    エラーのない例では、GitHub から情報が読み込まれて表示されます。

    エラーのない例では、GitHub から情報が読み込まれて表示されます

デモ ページ: コンソールと UI でのネットワーク エラーレポート

以前のユーザー エクスペリエンスを回避するには、防御的なコーディング手法を使用します。 次のように、コードでエラーがキャッチされ、各エラーが コンソールに表示されていることを確認します。

  1. 新しいウィンドウまたはタブ で、コンソールと UI で デモ Web ページのネットワーク エラー レポートを開きます。

  2. Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 または、 F12 キーを押します。 Web ページの横に DevTools が開きます。

    サンプル Web ページでは、次のプラクティスを示します。

    • 問題が発生したことを示す UI をユーザーに提供します。

    • コンソールで、コードからネットワーク エラーに関する役立つ情報を提供します。

    この例では、エラーをキャッチして報告します。

    エラーをキャッチして報告する例

    デモの次のコードでは、 メソッド (具体的には行) を handleErrors 使用してエラーを throw Error キャッチして報告します。

    const handleErrors = (response) => {
   if (!response.ok) {
      let message = 'Could not load the information'
      document.querySelector('tbody').innerHTML = `
      <tr><td colspan=3>Error ${message}</td></tr>
      `;
      throw Error(response.status + ' ' + response.statusText);
   }
   return response;
};

コンソールでエラーとトレースを作成する

前のセクションの throw Error 例に加えて、 コンソールでさまざまなエラーを作成し、問題をトレースすることもできます。

デモ ページ: コンソールでのエラー レポートとアサーションの作成

作成された 2 つのエラー メッセージを コンソールに表示するには:

  1. 新しいウィンドウまたはタブ で、コンソールでエラー レポートとアサーションを作成する デモ ページを開きます。

  2. Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 または、 F12 キーを押します。 Web ページの横に DevTools が開きます。

    コンソールにエラー メッセージが表示されます。

    コンソールにエラー メッセージが表示される

    デモ ページでは、次のコードを使用します。

    function first(name) { second(name); }
function second(name) { third(name); }
function third(name) {
    if (!name) {
        console.error(`Name isn't defined :(`)
    } else {
        console.assert(
            name.length <= 8,
            `"${name} is not less than eight letters"`
        );
    }
}
first();
first('Console');
first('Microsoft Edge Canary');

    連続して相互に要求する 3 つの関数があります。

    • first()
    • second()
    • third()

    各関数は、他方に name 引数を送信します。 関数ではthird()、引数が存在しname、存在しない場合は、名前が定義されていないエラーをログに記録チェック。 が定義されている場合nameは、 メソッドをassert()使用して、引数の長さが 8 文字未満の場合にnameチェックします。

    次のパラメーターを使用して first() 、関数を 3 回要求します。

    • 関数内third()のメソッドをconsole.error()トリガーする引数はありません。

    • 引数が存在しfirst()、8 文字より短いためname、関数のパラメーターとしての用語Consoleはエラーを引き起こしません。

    • パラメーターが 8 文字より長いため、関数のfirst()パラメーターとしてのフレーズMicrosoft Edge Canaryを使用するとconsole.assert()、メソッドでエラーが報告されます。

    このデモでは、 メソッドをconsole.assert()使用して条件付きエラー レポートを作成します。 次の 2 つの例では同じ結果が得られますが、1 つには追加 if{} のステートメントが必要です。

    let x = 20;
if (x < 40) { console.error(`${x} is too small`) };
console.assert(x >= 40, `${x} is too small`)

    コードの 2 行目と 3 行目で同じテストが実行されます。 アサーションは負の結果を記録する必要があるため、

    • ケースで の x < 40 テストを行 if います。
    • アサーションを x >= 40 テストします。

デモ ページ: コンソールでのトレースの作成

別の関数を要求する関数がわからない場合は、 メソッドを console.trace() 使用して、現在の関数にアクセスするために要求された関数を追跡します。

コンソールにトレースを表示するには:

  1. 新しいウィンドウまたはタブでデモ ページ [コンソールでのトレースの作成 ] を開きます。

  2. Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 または、 F12 キーを押します。 Web ページの横に DevTools が開きます。

    このページでは、次のコードを使用します。

    function here() {there()}
function there() {everywhere()}
function everywhere() {
   console.trace();
}
here();
there();

    結果は、 という名前there()の を表示here()するトレースで、everywhere()2 番目の例では という名前everywhere()を表示します。

    コンソールで生成されるトレースを次に示 します。

    コンソールに表示されるトレース

関連項目

  • コンソールの概要 - コンソール を一般的に使用してエラー メッセージを表示および解決します。