デバッグの勘所

• JS はどうやっても JS である
  • なので、絶対ブラウザに読み込まれているし、ブラウザが解読可能な形式でしか読み込まれない
  • 仕掛ける場所さえ間違えなければ、ブレークポイントを仕掛けることはできるはず
• 基本的には console.log , console.debug を使ってデバッグ

ブレークポイント・ステップ実行

• ブラウザに搭載されている Developer tools を積極的に使う
• Developer Tools を使うことで現在読み込んでいる JS が確認できる
  • Chrome は Sources タブ
  • Firefox は デバッガータブ
• 読み込んでいる JS が確認できれば、デバッガでブレークポイント仕掛けることができる
• デバッグしたい JS が minify されているか確認する
  • minify されていたら Source Map があるか確認する
  • または minify されていたら、 {} というボタンがあるはずなので、そこで minify を整形するという方法もある
  • それでも分かりづらかったら、自前で minify されないようにビルドをしてビルドの成果物を 自身のプロダクトに import するように修正する

DOM に仕掛けられたイベントリスナを確認する方法

• Chrome であれば Styles と同じところにある「Event Listener」辺りを見る
  • または Properties タブで該当エレメントを見て onChange onClick 辺りを見たりする
• Firefox の場合は、DOM にイベントが仕掛けられている場合、インスペクターの中の DOM の横に「ev」とアイコンがでているので、そこでわかる
  • 

他ライブラリ(Angular, React etc ...)のデバッグ方法

• Angular の場合は ng.probe($0).componentInstance, 他に拡張機能 Augury external_link を使う
• React + Firefox の場合は React developer tools
• VSCode を使っているなら、デバッグモード起動機能がある(.vscode/launch.json で設定)

こちらもおすすめ

• JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips external_link
  • 以下のセクションが特におすすめ
    • 誰がDOMやHTML要素を変更するのか。つまりコードをめちゃくちゃにするのは誰だ？　
    • 誰がオブジェクトを変更するか？: Objects.observe + console.trace

イベント関連のデバッグ手順のサンプル

•