32295


Chromeデベロッパーツールにおいて、JavaScriptからCSSを編集した場合にelement.styleに結果が表示されますが、JavaScriptの該当行を知るにはどうしたらよいのでしょうか。

[![画像の説明をここに入力](https://i.stack.imgur.com/MOyrxm.png)](https://i.stack.imgur.com/MOyrx.png)

添付画像のelement.styleが外部JavaScriptのどこから（何行目において）設定（記述）されているものなのか知りたく、ご教授いただけますと幸いです。  
どうぞよろしくお願いいたします。


CC BY-SA 3.0
2017-02-01T01:58:58.307
32294
2017-02-01T03:25:33.903
2017-02-01T03:17:16.007
8000
18487
question
javascript google-chrome debugging
style属性を変更しているJavaScriptコードの場所を調べるには？


## 開発者ツールのブレークポイント機能を使う

変更が行われる要素が事前に特定できるなら、開発者ツールでその要素を右クリックして、Break on... > attribute modifications
としてブレークポイントを貼ることができます。

[![画像の説明をここに入力](https://i.stack.imgur.com/wJPGk.png)](https://i.stack.imgur.com/wJPGk.png)

HTMLが変わらなければ、リロードしてもブレークポイントは残ります。

## MutationObserver を使う

[MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver)
を使うと、指定したDOM要素が変更されたときにコールバックを実行することができます。コールバックの中に `debugger;`
でブレークポイントを張ったり、`console.trace()` などを実行することで、変更を発生させたコードを調べることができます。

次のようにsubtreeオプションを使うことで、ドキュメント全体を監視することも可能です。

[code]

    function hoge() {
      const body = document.getElementsByTagName('body')[0];
      body.style.backgroundColor = '#abc';
    }
    
    // MutationObserverの作成・登録
    const observer = new MutationObserver(_ => console.trace());
    observer.observe(document, {
      attributes: true,
      subtree: true,
      attributeFilter: ['style']
    });
    
    hoge();
[/code]

注意点として、このコールバックは非同期に呼び出されるため、Sourcesタブの右パネルでAsyncにチェックをつけておかないと、非同期呼び出し元のコールスタックが表示されません。

[![画像の説明をここに入力](https://i.stack.imgur.com/Zkubt.png)](https://i.stack.imgur.com/Zkubt.png)

（変更が発生する前であれば）MutationObserverの作成・登録はコンソールで行っても大丈夫です。次のようにワンライナーにしてもいいですね。

[code]

    new MutationObserver(_ => console.trace()).observe(document, {attributes: true, subtree: true, attributeFilter: ['style']})
    
[/code]

参考

  * [Detect element style change in chrome - Stack Overflow](https://stackoverflow.com/q/13566346/2818869)
  * [How do you get a stack trace for a triggered MutationObserver? - Stack Overflow](https://stackoverflow.com/a/31428249/2818869)


CC BY-SA 3.0
2017-02-01T03:15:03.850
32295
2017-02-01T03:25:33.903
2017-05-23T12:38:56.467
-1
8000
32294
answer