はじめに
プログラム実行中のバグやエラーを特定し、修正する方法をデバッグ技術と言います。
JavaScriptやTypeScriptでconsole.log()を実行することで変数の値などを出力することができます。
今回は様々なconsole APIの方法をまとめました
デバッグ技術
- プリント
コードの特定の箇所にconsole.log()を追加することで、変数を出力して確認することができます。
変数の値や実行の流れをトレースすることでバグの原因を特定しやすいようになります。 - ステップ実行
VSCodeなどデバッガを使用してコードをステップ(行)ごとに実行する方法です。
変数の値や実行の流れをGUIから詳細に確認することができます。 - ブレークポイント
デバッガを使用して、特定の変数や条件文で処理を止めて変数の値や実行の流れを確認することができます。 - ログ分析
プログラムの実行をログファイルに出力し、バグの原因を特定します。 - テスト（UTとST）
テストケースを設計し、それぞれの機能をテストし、バグを特定します。 - メモリリーク
プログラムがメモリを正しく開放していない場合に発生するメモリリークを検出します。
ツールを使用してメモリ監視をすることができます
様々なプリント方法
プリントする際に変数に{}を追加するだけで、値だけではなく、変数名も出力されます。
var num = 1;
console.log(num) // 1
console.log({num}) // {"num":1}
console出力のフォーマット
- %s: 文字列として出力
- %iまたは%d: 整数
- %f: 浮動小数点値
- %o: 拡張可能なDOM要素
- %O: 展開可能なJavaScriptオブジェクト
これらを組み合わせると
console.log("%i個 %s あります, 10, 'console'); // 10個 console developer
ログのグループ化
console.group()を使用するとVScodeなどでログをグループ化して展開したりまとめたりできます
console.group("sample label");
console.log("aaa");
console.log("bbb");
console.log("ccc");
console.log("ddd");
console.groupEnd("sample label");
メソッドの実行回数をカウント
console.count()を使用すると特定の関数や機能が実行された回数を出力することもできます
const greet = (food) => {
console.count(food);
};
greet('meat'); // 出力結果:1
greet('fish'); // 出力結果:1
greet('meat'); // 出力結果:2
他にも
document.addEventListener('click', function() {
console.count('Document clicked');
});
余談ですが、console.time()を使用すると特定の処理の実行時間が計測できます。
デバッグ時にconsole.count()と合わせて活用できます。
様々なconsoleメソッドはコチラ