こんにちは、現役エンジニアの inno_tech です。
ブラウザ(クライアント)側のJavaScriptで、特定のDOM要素の変更を検知し、ブレークポイントで止める方法をお探しでしょうか？
本記事では、Google Chromeの開発者ツール(デベロッパーツール)で動作確認しています。
やりたいこと
特定のDOM要素が、JavaScriptで何か変更されたタイミングでブレークポイントで停止させ、デバッグしたい。
例えば、ボタンを押した際に、特定の要素に CSS class を付与するという制御や, 新たにHTML要素を追加するような制御のデバッグをする場合。
JavaScript上のどこでDOM操作したかわからない時に使えるテクニック!
サンプルコード
動作確認のためのサンプルコードです。今回は、ボタン(id=trigger)をクリックすると、div要素(id=target)にテキストを追加するものを用意しました。
HTML
HTMLには、ボタン要素とターゲットとなるdiv要素を用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/style.css">
<title>Sample</title>
</head>
<body>
<h1>DOM要素の変更を検出する</h1>
<!-- ボタン要素 -->
<button id="trigger">click</button>
<!-- ターゲット要素 -->
<div id="target">
<p>ここに要素を追加します</p>
</div>
<script src="scripts/main.js"></script>
</body>
</html>JavaScript
JavaScriptでは、ボタン要素に対しクリックイベントを登録します。
// ボタン要素 を取得
const triggerBtn = document.querySelector("#trigger");
// イベントリスナーを登録
triggerBtn.addEventListener("click", onClickBtn);
// イベント内容本体
function onClickBtn(){
// ターゲット要素 を取得
const target = document.querySelector("#target");
target.append("クリックされて要素が追加されました。");
}続いて、ボタンがクリックされた際に、ブレークポイントで停止する方法を説明します。
特定のDOM要素の変更を検出するデバッグ
Google ChromeでサンプルHTMLを開き、Ctrl + Shift + Iで開発者ツールを起動します。
変更をトリガーにブレークポイントを設定するには、対象の要素(今回は id=targetのdiv)上で右クリック > Break on > subtree modifications の順にクリックします。
この状態でボタンをクリックすると、div要素に対しテキスト要素が追加されるタイミングで、プログラムが一時停止します。
一時停止すれば、変数を確認したりできるね。
DOMブレークポイントの設定条件
DOM要素上の右クリックで表示される「Break on」メニューには、3種類の停止条件が設定できます。用途に応じて使い分けしましょう。
| 設定値 | 説明 |
|---|---|
| subtree modifications | 対象の要素内で、要素の追加/削除があった場合に停止する。 |
| attribute modifications | 対象の要素のスタイルや属性に変更があった場合に停止する。 |
| node removal | 対象要素が削除された場合に停止する。 |
まとめ
今回のまとめです。
- Chrome開発者ツールを使えば、特定のDOM要素の変更を監視・デバッグできる.
- DOMブレークポイントを設定するには、対象の要素を右クリックし「Break on」を選択.
- 監視する条件が3種類あるので、用途に応じて使い分けする.
JavaScriptで少しあいまいな理解の部分がある人におすすめの書籍が気になる方はこちら。
参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!
この記事がイイねと思ったら、Twitterフォロー か にほんブログ村のどちらかしてくれたら嬉しいよ!
コメント / ご要望