私は巨大なウェブページアプリが既に構築されている場所で働き始めました。私はSeleniumでフロントエンドのテストをするために雇われていますが、私はアプリの内部動作を見て興味があります。私の質問は、Chromeの開発ツールやそれに類するもので、Javascriptモジュールで作成した要素/テーブル/フォームをページで見ているかどうかを知るにはどうすればいいですか？私は '要素を調べて' DOMを見ることができますが、どのような.jsファイルを調べてその要素がどのように構築されているかを知りたいのです。どのJavascriptモジュールがWebページ上に要素/表を作成したかをどのようにして知ることができますか？
本質的に、Chrome開発ツールでは、DOMインスペクタとDOMを構築したソースファイルとのギャップを埋めるにはどうすればよいですか。
DOM要素を作成するには、DOM要素のinnerHTMLを設定するか、appendChildメソッドを呼び出します。したがって、これらの2つをJavaScript Proxyを使用してプロキシします。場所を知るには、コンソールメソッドconsole.trace（）をクロームできます。
例：
では、次のコードは
var pEl = document.createElement('p');
divEl.appendChild(pEl);
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div></div>
</body>
</html>
プロキシは、コード内でこの
var divEl = document.querySelector('div');
divEl.appendChild = new Proxy(divEl.appendChild, {
apply: function(target, thisArg, argumentsList) {
console.trace();
target.apply(thisArg, argumentsList);
}
});
いくつかの場所のようにする必要があり、このHTMLを持っていると仮定します
コンソールでどこから呼び出されているかを見ることができます。
ページのjavascriptが実行される前にプロキシを実行して、デバッグポイントをコードの最初の行に置き、コンソールでプロキシを実行できるようにする必要があります。または、あなたはtampermonkeyのような拡張子をクロームできます –
何かをプロキシしてトレースを使用すると、プロキシの場所を指しませんか？どのようにプロキシをトリガーしたのか、どのように把握していますか？簡単な実装を投稿できますか？ところで、コメントを追加するのではなく、情報を追加する投稿を編集することができます –
もう一つの苦労は、jQueryのようなライブラリにはこれらのメソッドのラッパーがあることです。あなたはどのようにそのようなラッパーではなく実際のコードを指すプロキシを作成しますか？ –
私はChrome Extensionを作成しました。ページを調べて、各DOM要素に関連するJavaScriptコードを確認しましょう。それはまだ非常に薄れたですが、試してみる価値があります。
これはPranayが提案したアプローチに一部基づいています。
ほとんどできません。そうすれば、ブラウザは特定の要素に触れたコードを1つ1つ追跡する必要があります。これは潜在的に何千ものコード行が潜んでいて、巨大なリソースのように聞こえます。 – deceze
最初の考え：可能性は低いです。それを証明する方法？いいえ... –
jsのelems idを検索してください。それらはどこかに割り当てられる必要があります –