たとえば「要素Xをクリックしたら何かしらの問題が発生する」といったバグの解析時に「クリックされた時にどのjsファイルの何行目あたりが実行されるか」が知りたいのですが、いい方法は無いでしょうか?
現状では、やむなく要素Xのidやclass値でgrepをかけてしらみ潰しに調べています。
ポイントは、各種ライブラリ内部のjsというより、現在調査中のブロジェクトのjsファイル・行番号を突き止めたいという点です。
ブラウザはChrome, Safari, Firefoxです。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するたとえば「要素Xをクリックしたら何かしらの問題が発生する」といったバグの解析時に「クリックされた時にどのjsファイルの何行目あたりが実行されるか」が知りたいのですが、いい方法は無いでしょうか?
現状では、やむなく要素Xのidやclass値でgrepをかけてしらみ潰しに調べています。
ポイントは、各種ライブラリ内部のjsというより、現在調査中のブロジェクトのjsファイル・行番号を突き止めたいという点です。
ブラウザはChrome, Safari, Firefoxです。
Google Chromeの「Event Listener Breakpoints」機能を使用して、クリック等の操作を起点とした処理のトレースを取る事ができます。
この状態で要素をクリックすると、実行される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
こちらの記事に書かれているやり方はどうですか?
Chromeのデバッガで各要素のEventListenerを調べられます。