Chromeデベロッパーツールにおいて、JavaScriptからCSSを編集した場合にelement.styleに結果が表示されますが、JavaScriptの該当行を知るにはどうしたらよいのでしょうか。
添付画像のelement.styleが外部JavaScriptのどこから(何行目において)設定(記述)されているものなのか知りたく、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。
変更が行われる要素が事前に特定できるなら、開発者ツールでその要素を右クリックして、Break on... > attribute modifications としてブレークポイントを貼ることができます。
HTMLが変わらなければ、リロードしてもブレークポイントは残ります。
MutationObserver を使うと、指定したDOM要素が変更されたときにコールバックを実行することができます。コールバックの中に debugger;
でブレークポイントを張ったり、console.trace()
などを実行することで、変更を発生させたコードを調べることができます。
次のようにsubtreeオプションを使うことで、ドキュメント全体を監視することも可能です。
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();
注意点として、このコールバックは非同期に呼び出されるため、Sourcesタブの右パネルでAsyncにチェックをつけておかないと、非同期呼び出し元のコールスタックが表示されません。
(変更が発生する前であれば)MutationObserverの作成・登録はコンソールで行っても大丈夫です。次のようにワンライナーにしてもいいですね。
new MutationObserver(_ => console.trace()).observe(document, {attributes: true, subtree: true, attributeFilter: ['style']})
参考