# デバッグの勘所

* 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」とアイコンがでているので、そこでわかる
    * ![firefox_event_listener.png](https://crowi-weseek-main-data.s3.amazonaws.com/attachment/5a8a6e3f99551300264e78e3/85ebcc5fa3fc7a2a9156cd2ef1bdfcaa.png)

## 他ライブラリ(Angular, React etc ...)のデバッグ方法
* Angular の場合は `ng.probe($0).componentInstance`, 他に拡張機能 [Augury](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd) を使う
* React + Firefox の場合は React developer tools
* VSCode を使っているなら、デバッグモード起動機能がある(.vscode/launch.json で設定)

## こちらもおすすめ
* [JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips](http://postd.cc/how-to-not-hate-javascript-tips-from-the-frontline/)
    * 以下のセクションが特におすすめ
        * 誰がDOMやHTML要素を変更するのか。つまりコードをめちゃくちゃにするのは誰だ？　
        * 誰がオブジェクトを変更するか？: Objects.observe + console.trace

## イベント関連のデバッグ手順のサンプル
* ![chrome-debug.gif](https://crowi-weseek-main-data.s3.amazonaws.com/attachment/58eedb842cffdf0018ab723a/c92bcefcda1850b29245646190e9cdbd.gif)


---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/Tips/JavaScript/デバッグの勘所
- Permalink: https://tips.weseek.co.jp/5fb75061a1ba4200489a4c26
- Parent: [JavaScript](/5fb74e7aa1ba4200489a4bd1.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 6 total
  - [Express](/65069da24603e7ff39a6b3db.md)
  - [Sequelize](/65069da24603e7ff39a6b3d7.md)
  - [Streams](/5fb74f7ea1ba4200489a4bf8.md)
  - [nodist](/5fb74fa7a1ba4200489a4c05.md)
  - [yarnとnpmの違い](/5fb74fd9a1ba4200489a4c0e.md)
  - [命名規則](/60ae84d41091010049bed55d.md)
- Last updated: 2020-11-20T05:13:05.811Z by takuya
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5fb75061a1ba4200489a4c26