例えばexampleというインプットがあったとして

<input type="text" id="example" name="example" value="" >

このフォームに
次のように複数のJavaScriptが処理を加えるような構造があったとします

■1.aaa.js
セットタイムアウト（ランダム秒）でexampleに1を入れて、チェンジする
■2.bbb.js
セットタイムアウト（ランダム秒）でexampleに2を入れて、チェンジする
■3.ccc.js
セットタイムアウト（ランダム秒）でexampleに3を入れて、チェンジする
■4.ddd.js
イベントリスナー exampleがチェンジされたらその値に2をかける

この場合、exampleには三種類の結果2,4,6が入った状態になる可能性があると思います

・1-4-2-4-3-4 = この流れで処理がされた場合は最終的な値は 6
・2-4-1-4-3-4 = この流れで処理がされた場合も最終的な値は 6
・3-4-1-4-2-4 = この流れで処理がされた場合は最終的な値は 4
・1-4-3-4-2-4 = この流れで処理がされた場合も最終的な値は 4
・2-4-3-4-1-4 = この流れで処理がされた場合は最終的な値は 2
・3-4-2-4-1-4 = この流れで処理がされた場合も最終的な値は 2

この処理の流れの部分（1-4-2-4-3-4）を解析するようなツールはありませんでしょうか
この例ですと、console.logを入れれば期待する結果になりますが

複数人が制作した
大量のJavaScriptをロードして処理が入り組んでいるようなサイトで
稀にイレギュラーケースの値が出てしまうのをなぜそういう値になったのか処理の流れを調査したいです

プロミス使え、はそのとおりですが、そういった根本的な修正はしたいですが出来ないです
複数のJavaScript処理の順番を可視化するようなツール
調査ツールまたは調査できるような手法をご存じの方教えくださいませ

FiroProchainezo

2019/09/03 08:16

ChromeのDevToolsじゃダメなんですか？

yambejp

2019/09/03 09:08

> イベントリスナー exampleがチェンジされたらその値に2をかける 2をかけた値をexampleに戻したら、そのチャンジにも反応するのでは？ exsampleに戻さないのでしょうか？

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

回答4件

ベストアンサー

複数のJavaScript処理の順番を可視化するようなツール

各スクリプト内で自分を通ったときにログを吐き出す処理をいれておくのが
単純でよいでしょうけど、そういうことではないのでしょうね

inputに値が変わったときその値をもとにどのjsを通ったか判断する手も
ないことはないですがプロパティは変更を見ないので属性を変更する
jsになっている前提が必要ですね

sample

javascript
1<script>
2var a=[1,2,3].map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
3var b={1:'aaa.js',2:'bbb.js',3:'ccc.js'};
4setTimeout(()=>{document.querySelector('#example').setAttribute('value',1);},a[0]*1000); //aaa.js
5setTimeout(()=>{document.querySelector('#example').setAttribute('value',2);},a[1]*1000); //bbb.js
6setTimeout(()=>{document.querySelector('#example').setAttribute('value',3);},a[2]*1000); //ccc.js
7var mo = new MutationObserver(function(r){
8  var t=r[0].target;
9  console.log(t.value*2);
10  console.log(b[t.value]);
11});
12var opt = {
13attributes: true,
14attributeFilter:['value'],
15};
16
17window.addEventListener('DOMContentLoaded', ()=>{
18  mo.observe(document.querySelector('#example'),opt);
19});
20</script>
21<input type="text" id="example" name="example" value="" >