開発者ドキュメント

ブラウザでJavaScriptコードをデバッグするためのベストプラクティス

すべての開発者がミスを犯し、その結果、バグが発生します。 私たちは常にバグに直面しており、プログラマーが優れたデバッグスキルを持っていることが不可欠です。 デバッグをより効率的にするためのいくつかの原則を紹介します。

デバッグのいくつかの良い原則

コンソールへのロギング

console.log は、アプリの実行のさまざまな時点で変数の値を確認するための最も一般的な方法です。 ただし、これらの値をより便利な方法で表示する方法は他にもいくつかあります。

検査したい複雑なオブジェクトや配列がある場合があります。 console.log(array); は引き続き使用できますが、 console.table(array)はオブジェクトを適切なテーブルとして表示します。

console.table([
  {animal: 'cayman', color: 'green' },
  {animal: 'crocodilian', color: 'yellow-green' }
]);

出力します:

また、 console.trace()を使用して、そのポイントに到達するための正確なパスをログに記録できます。 スタックトレースを出力します。

function meat(){
  function eggs(){
    console.trace();
  }
  eggs();
} 

コンソールに次のようなものが表示されます。

eggs
meat
<anonymous>

その他のメソッドについては、コンソールAPIドキュメントをお読みください。

ブレークポイント

ブレークポイントは、JavaScriptコードをデバッグするためのより高速で手間のかからない方法です。

コードにブレークポイントを設定する一般的な方法の1つは、 debugger 声明:

if (someCondition) {
  debugger;
}

コードがヒットしたとき debugger ステートメントの実行が停止すると、ブラウザの開発者ツールが起動し、次の行にジャンプします。 debugger ステートメントが見つかりました。

これにより、実行を一時停止してから、コードを1行ずつステップ実行できます。 変数に格納されているコードと値を観察し、どの時点で問題が発生し始めているかを確認できます。 コードの現在の状態を調べて、コード内のどこにいるかを正確に確認できます。

Call Stack には、その時点までに呼び出されたすべての関数が表示されています。 スコープタブには、現時点で使用可能なすべての変数スコープが表示され、各スコープのすべての変数とその値が表示されます。

行番号をクリックすると、ブレークポイントを追加または削除できます。 コードが一時停止しているときは、矢印を使用してコード内を移動できます。 青い矢印をクリックすると、次のブレークポイントに移動するか、次のブレークポイントがない場合はコードの最後に移動します。

下矢印を押して関数にスキップするか、右向きの矢印を押してコードを一度に1行ずつステップスローできます。

そしてデバッガーは、私たちが行って修正する必要のあるコードの正確な行を提供します。

概要

これがJavaScriptコードをデバッグするためのちょっとした入門書として役立つことを願っています。 最良のデバッグツールはあなたの心であり、あなたが解決しようとしている問題が何であるかを理解していない場合、これらのテクニックはすべて役に立たないことを常に覚えておいてください。

モバイルバージョンを終了