35206


特定の1行のHTMLソースに紐づいているJSを  
一番効率よく割出す方法はありますでしょうか？

具体的には以下となるのですが、  
<https://www.sony.co.jp/united/userexperience/support/ja_jp/?uxscc=set>

例えば上記サイトの Gナビ部：【CSR・環境・社会貢献】  
のアコーディオン時のレイアウトが崩れています。

この原因を追及しているのですが、  
その1つとして

[code]

    <div class="navtray-w navtray-w-05 navtray-w-sp"> 
    
[/code]

↓ ドリルダウン

[code]

    <div class="cont-box"> 
    <dl>
    <dd>
    <div>
    <ul class="nav_list nav_list_3col">
    <li class="nav_item" style="height: 85px;">
    
[/code]

このリスト内の `style="height: 85px;"`

がべた書きされているのですが、  
htmlソース上にはもちろんなく、  
どこかのJSで制御されています。

この1行に紐づいているJSを特定したいのが、  
今回知りたいことです。

私事で大変恐縮ですが、  
どなたか効率的に割り出す方法がありましたら  
ご教示いただけますと幸いです。

よろしくお願いいたします。


CC BY-SA 3.0
2017-06-02T01:40:45.610
35205
2017-06-02T02:24:10.340
2017-06-02T02:18:08.590
2376
23519
question
javascript html css
特定の1行（HTML）に紐づいている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のこの辺を参考にするといいかもしれません  
<https://developers.google.com/web/tools/chrome-devtools/javascript/step-
code?hl=ja>


CC BY-SA 3.0
2017-06-02T02:24:10.340
35206
2017-06-02T02:24:10.340
22665
35205
answer