JavaScriptでページ内のソース変更に関与している部分の抜き出し

お世話になります

ページ内に以下のようなボタン要素があり

<button id="hoge" data-url="abc/def?unique=XXX"></button>

ページを表示したタイミングでXXXがYYYに書き換わってしまっていることが分かりました

<button id="hoge" data-url="abc/def?unique=YYY"></button>

JavaScriptの
どこの処理がXXXをYYYに書きかえているのか特定したいのですが

このページは多くのJavaScriptを読み込んでおりひとつづつ消して目的の情報を探すのは大変そうで（エラーが起きたりで特定ができない）
hogeやuniqueやreplaceやhtmlなどのキーワードでgrep検索しても一般的な名称や処理なので関係ない処理が沢山ヒットしてしまい目的の情報にたどりつけませんでした

ページを表示した時点で発火しているファンクション（または処理）一覧を抜き出すことは
なにかのデバッグツールを使えば出来ることなのでしょうか？？

デバッグツールに詳しい方お教えいただければ幸いです

行動規範の内容に同意します

回答3件

Chrome開発者ツールが使えるかもしれません。
Elementsタブ上でそのボタン要素を右クリックし、「ブレーク」->「属性が変更されました」を選ぶと、属性の値が書き換わったタイミングで処理が停止します。
以下のページのDOM Breakpointsグループの項目が参考になります。
https://www.buildinsider.net/web/chromedevtools/01

ただし、もしJSがReactなどのフレームワークによって書かれている場合、コード上でどこを直せばいいかはこれだけでは特定しにくいので、より良い方法があるかもしれません。

投稿2018/07/19 09:15

編集2018/07/19 09:16

Udomomo

総合スコア1524

tesopgmh

2018/07/27 07:06

ありがとうございます開発者ツールでも目的の情報を得ることが出来ました

行動規範の内容に同意します

ベストアンサー

ちょっとコードを書く必要がありますが、とりあえずは希望することはできるかと

js
1const elmHoge = document.querySelector('#hoge');
2const observer = new MutationObserver(records => {
3  records.forEach(record => {
4    if(record.attributeName === 'data-url') {
5      debugger;
6    }
7  })  
8});
9observer.observe(elmHoge, { attributes: true });