43542


たとえば「要素Xをクリックしたら何かしらの問題が発生する」といったバグの解析時に「クリックされた時にどのjsファイルの何行目あたりが実行されるか」が知りたいのですが、いい方法は無いでしょうか?

現状では、やむなく要素Xのidやclass値でgrepをかけてしらみ潰しに調べています。

ポイントは、各種ライブラリ内部のjsというより、現在調査中のブロジェクトのjsファイル・行番号を突き止めたいという点です。

ブラウザはChrome, Safari, Firefoxです。


CC BY-SA 3.0
2018-04-24T10:07:05.240
43522
2018-04-25T06:07:37.373
2018-04-24T12:24:19.260
25876
25876
question
javascript html google-chrome dom google-chrome-devtools
あるDOM要素に対してクリック等した時に実行されるjsを突き止める方法


こちらの記事に書かれているやり方はどうですか？  
Chromeのデバッガで各要素のEventListenerを調べられます。

[要素に設定されているイベントを調べよう](http://yuzu441.hateblo.jp/entry/2016/12/12/120000)


CC BY-SA 3.0
2018-04-25T05:03:02.787
43540
2018-04-25T05:03:02.787
8078
43522
answer


Google Chromeの「Event Listener
Breakpoints」機能を使用して、クリック等の操作を起点とした処理のトレースを取る事ができます。

  1. Google Chromeの開発者ツールを開く(F12) 
  2. Sourceタブを開く
  3. Event Listener Breakpoints ペインを開き、Mouse → click をチェックする。

この状態で要素をクリックすると、実行されるJavaScriptソースコード上で処理が停止するので、F10等で処理をステップ実行させて、問題箇所を特定することができるかと思います。

Pause Your Code With Breakpoints | Tools for Web Developers | Google
Developers  
<https://developers.google.com/web/tools/chrome-
devtools/javascript/breakpoints#event-listeners>


CC BY-SA 3.0
2018-04-25T06:07:37.373
43542
2018-04-25T06:07:37.373
27930
43522
answer