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

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

  • 最初にコードが何をすべきかを理解し、問題がどこにあるかを判断し、デバッグを開始して仮定を検証する必要があります。
  • 失敗の原因を突き止めたら、問題の原因の修正に集中します。
  • 仮定をテストすると、ブレークポイントとコンソールログが作成されます。 したがって、デバッグが終了したら、それらを破棄することを忘れないでください。
  • そして明らかに本番環境ではデバッグしないでください!

コンソールへのロギング

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

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

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

出力します:

Logging table to the console

また、 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行ずつステップスローできます。

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

The debugger statement in action in Chrome DevTools

概要

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