時雨に舞う

プログラミングや技術情報などの備忘録

どこかで誰かが・・・スタイルを上書きしている！

HTMLのとある要素のスタイルをどかで誰かが変更している時にそれを調査する方法について書いてみます。ブラウザはChromeです。

今回使うHTML

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="csstest.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
    <script type="text/javascript">
setTimeout("changeColor()", 3000);

function changeColor() {
	$("#aiueo").css("color", "aqua");
}
    </script>
</head>
<body>
	<p id="aiueo" class="test" style="color:purple;">テスト</p><br>
</body>
</html>

今回使うCSS

p {
	color:red;
}

.test {
	color:blue;
}

#aiueo {
	color:green;
}


このサンプルはp要素内の「テスト」という文字がCSSによって color:green になっているが、3秒後にJavaScriptによって color:aqua にされるタイミングでそれを検知しようというものです。

まず、検知する為にブレークポイントを貼ります。F12キーを押して「Developer Tools」ウィンドウを表示し、「Elements」タブを選択してください。
f:id:sigtech:20140825191302p:plain
スタイル（属性）の変更を検知したい要素を選択状態にして右クリックから「Break on」→「Attributes modifications」を順にクリックします。

ブレークポイントが貼られたかどうかは同じ画面の右側にある「DOM Breakpoints」を選択すると一覧表示されます。（「DOM Breakpoints」が表示されていない場合は「>>」の部分をクリック）
f:id:sigtech:20140825191306p:plain

ブレークポイントを貼ったら元のHTMLを表示しているウィンドウでF5を押して更新します。すると3秒後にヒットして下図のような画面になるはずです。
f:id:sigtech:20140825191308p:plain
属性が変更されるまさにその瞬間ですね。
この画面の右側に「Call Stack」という項目があります。これは「呼び出し元」から「実際に属性を変更した処理」への呼び出し履歴になります。その部分は２列になっていて、左側が（たぶん）関数名、右側がファイル名です。この各行を上から順にクリックしていくと呼び出している側を順に見る事ができます。

今回は「changeColor」の行までいくと
f:id:sigtech:20140825191312p:plain
このように「$("#aiueo").css("color", "aqua");」が呼び出し元だという事が分かります。
まぁ、知らないJavaScriptがたくさんあって結局誰が変更しているのか分からないという可能性もありますが…。
参考になれば幸いです。


ちなみに「Developer Tools」ウィンドウの「Elements」タブで右側に出てくる「Styles」は対象の要素を選択しておけば
f:id:sigtech:20140825191315p:plain
こんな感じでスタイルが誰に上書きされたのかを確認できます。下から上に向かって上書きの過程が見れますね。最初は csstest.css の2行目でp要素に対して、次は6行目でtestクラスに対して…、最後のはelement.styleで要素に直接指定（JavaScript含む）となっています。

ちなみに「Developer Tools」ウィンドウの「Elements」タブで右側に出てくる「Computed」も対象の要素を選択しておけば
f:id:sigtech:20140825191318p:plain
colorを開くと同じく過程が見れますね。任意のスタイルだけを見たい場合はこちらが便利。


著者：t.n