ほとんどのエラーは人為的なエラー(小さなエラーが多い)であり、コードがうまく機能しません.
これらのエラーを修正するプロセスをデバッグと呼びます.

デバッグプロセス

バグがどこで発生しているかに気づきます.

開発中の

ソフトウェアテストの

ユーザが使用しているエラーレポート

ユーザー体験など...

エラーが発生した場所を正確に除去し、対応するコードを分離します.

の複雑なコードであれば、正しいエラーがどこで発生しているか分かりません.→デバッグソフト(デバッガ)を使用します.

新しいソリューションでエラーを置き換え、エラーを修正します.

同じことが二度と起こらないようにしなければならない.
同様のコード

を探して、同じバグがあるかどうかを確認します.

よりも良い方法は、テストソフトウェアを使用してテストコードを生成することである.

console.

コンソールは通常logメソッドのみを使用します.同様の例はwarnメソッドとerrorメソッドです.
やることは同じですが、コンソールウィンドウの表示形式は違います.視覚的に表でデータを表示したい場合は、表の方法もあります.

const bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52];
const tips = [];
const totals = [];

const calcTip = (bill) =>
  bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;

const calcAverage = (arr) => {
  let sum = 0;
  const arrLength = arr.length;
  for (let i = 0; i < arrLength; i++) {
    sum += arr[i];
  }
  return sum / arrLength;
};

for (let i = 0; i < bills.length; i++) {
  tips.push(calcTip(bills[i]));
  totals.push(tips[i] + bills[i]);
}

console.log(tips, totals, calcAverage(tips), calcAverage(bills));
console.warn(tips, totals, calcAverage(tips), calcAverage(bills));
console.error((tips, totals, calcAverage(tips), calcAverage(bills)));
console.table(tips, totals, calcAverage(tips), calcAverage(bills));

table methodは視覚的にとても快適に見えます.

Chromeでデバッグ

break point

上の図のようにChromeのinspectタブに入ると、コンソールタブが表示され、隣のsourceをクリックしてJavaScript部分が停止して確認したい瞬間のコードで番号の左側をクリックするとbreakpointが青い矢印として表示されます.
これらのブレークポイントは、ブラウザを指定してリフレッシュすると、対応する瞬間に停止し、コードの変数が右側に表示されるように複数回指定できます.変数の状況をチェックしながら、1行1行チェックします.
右から5番目のアイコンの矢印をクリックして、スキップすると1行1行スキップして、1番目のアイコンの機能は一度に次のブレークポイントにスキップして、最後のブレークポイントで対応するアイコンをクリックして、コードを最後までやり遂げます.

debugger

コード自体にdebuggerが含まれている場合、ブラウザは、コードが自動的にコードの順序になると、デバッグウィンドウを生成します.

コード内でブレークポイントを自動的に生成するのと同じです.