console.log地獄から抜け出す方法

結論：ブレークポイントを使え

console.logを大量に仕込む → どれがどこの出力かわからなくなる → さらに追加 → 地獄

ブレークポイントを1つ置けば、その場で全ての変数が見える。

1箇所だけならconsole.log。流れを追うならブレークポイント。

止まったら、右側のScopeパネルで全ての変数の値が見える。

APIから取得したデータが「なぜかundefined」になる問題。

console.logを20箇所に仕込んで、出力を眺めて、また追加して…1時間溶かした。

結局、ブレークポイントを1つ置いて5分で解決。非同期処理のawait忘れだった。

// ❌ awaitがない
const data = fetchUser();  // Promiseオブジェクトが入る

// ✓ 
const data = await fetchUser();

ブレークポイントで止めたら、dataにPromise {<pending>}と表示されていた。console.logでは[object Promise]としか出ず、気づけなかった。

// ❌ 何の値かわからない
console.log(user);

// ✓ 変数名がわかる
console.log({ user });
// → { user: { name: "田中", age: 30 } }

波括弧で囲むだけ。

console.log({ name, age, email });
// → { name: "田中", age: 30, email: "..." }

「1000回ループの500回目だけ止めたい」

条件を満たしたときだけ止まる。

コードに直接書くと、DevToolsが開いていれば止まる。

function calculate(items) {
  debugger;  // ここで止まる
  return items.reduce((sum, item) => sum + item.price, 0);
}

**本番コードに残さないこと。**ESLintのno-debuggerルールを有効に。

Uncaught TypeError: Cannot read property 'name' of undefined
    at getUserName (app.js:15)
    at handleClick (app.js:8)

「undefined」に「.name」でアクセスしようとした。場所はapp.jsの15行目。

スタックトレースは下から上に読む。下が最初の呼び出し、上がエラー発生箇所。