質問: 特定の1行のHTMLソースに紐づいているJSを 一番効率よく割出す方法はありますでしょうか? 具体的には以下となるのですが、 例えば上記サイトの Gナビ部:【CSR・環境・社会貢献】 のアコーディオン時のレイアウトが崩れています。 この原因を追及しているのですが、 その1つとして ``` ``` ↓ ドリルダウン ``` ``` このリスト内の `style="height: 85px;"` がべた書きされているのですが、 htmlソース上にはもちろんなく、 どこかのJSで制御されています。 この1行に紐づいているJSを特定したいのが、 今回知りたいことです。 私事で大変恐縮ですが、 どなたか効率的に割り出す方法がありましたら ご教示いただけますと幸いです。 よろしくお願いいたします。
回答: Chromeブラウザの検証機能で確認できると思います。 1. 検証したいDOMに対し右クリックして「検証」をクリック 2. HTMLパースペクティブで対象のDOMを右クリックして、「Break on > attribute modification」を選択 3. ページを再読込(F5等) 4. するとブレークが起きる 5. あとはStepOverやStep intoなどでJavascriptを追いかける。 今回は「高さの変更」なのでDOMの属性の変更の検知=「attribute modification」 ですが、 子階層の変更の場合は「subtree modification」になります。 あとはGoogleのこの辺を参考にするといいかもしれません