debuggerやconsole.traceなどを使ってJavaScriptをデバッグする • Yurikago Blog

JavaScriptをデバッグする方法をいくつかまとめました。

debuggerステートメント

ページを表示すると、debuggerステートメントを記述した箇所で処理が止まります。デベロッパーツールのSourcesタブでブレークポイントを任意の位置に設定したときと同じ挙動になります。

const numbers = [1, 2, 3]
numbers.map((n) => {
  debugger
  console.log(n)
})

console.trace() を記述した関数がどこから呼び出されたのか追跡できます。例では「console.traceを呼び出したのは関数a」「関数aを呼び出したのは関数b」ということがわかります。

const a = () => {
  console.log('a')
  console.trace()
}

const b = () => {
  a()
}

b()

デベロッパーツールのElementsタブで該当のHTML要素を選択すると要素に設定されたイベントリスナーとコールバック関数が定義されている箇所が表示されます。例ではaタグに設定されたclickイベントのコールバック関数がeventListener.jsで定義されていることがわかります。

<a href="#">link</a>

document.querySelector('a').addEventListener('click', () => {
  console.log('clicked')
})