web-dev-qa-db-ja.com

HTMLによって行われたネットワーク要求のリストを取得する方法

chrome devtools。

例えば： enter image description here

これはgoogle.comの開発ツールです。私は、javascriptを使用して、これらすべてのリクエストをリストで取得します。これは可能ですか？はい、どうですか？

javascripthtmlhtml5google-chromegoogle-chrome-devtools
28
Nayish

一部のブラウザは、この情報の一部を収集できる not-yet-standard 、 Resource Timing API のバージョンを実装しています。

一部のブラウザーでは、開発者ツールサポートの一部としてブラウザー拡張機能でこの情報の一部を利用できますが、通常のWebページから実行できるものではなく、カスタム拡張機能のインストールが必要になります。

呼び出しコードを制御する、または呼び出しコードを知っている非常に特殊な操作の場合、いくつかのことを計測することができます。たとえば、すべてのajax呼び出しが1つの特定の関数を通過することがわかっている場合、その関数とその完了ハンドラーをフックして、すべてのajax呼び出しを監視できます。

18
jfriend00

Resource Timing APIを使用して、Webサイトにロードされている各リソースに関するすべての関連情報（ドメインルックアップ、キャッシュヒット、リダイレクトなど）を取得できます。

あなたはそれについて読むことができます こちら 。このAPIを使用してページ読み込みのウ​​ォーターフォールを生成する bookmarklet もあります。

Resource Timing APIは、Chrome、Chromium、Chrome MobileおよびIE10。Firefoxチーム 作業中のようです 。

10
Konrad Dzwinel

私が理解しているように、JavaScript経由でリクエストのリストを調べることができます。そうですか？ "私は方法がわからない。"

しかし、助けることができる1つのソリューションはこれです...

以下のコードを使用して、すべての要求をインターセプトします。 JavaScriptがページの読み込みの非常に早い段階で実行されている場合、リストからほとんどのリクエストを取得できます。

これがいかにクールか 記事 をご覧ください。

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(value) {
    this.addEventListener("progress", function(){
        console.log("Loading. Here you can intercept...");
    }, false);
    this.realSend(value);
};
4
Sergio Cabral

Resource Timing API を使用してコードを記述しました

function captureNetworkRequest(e) {
    var capture_newtwork_request = [];
    var capture_resource = performance.getEntriesByType("resource");
    for (var i = 0; i < capture_resource.length; i++) {
        if (capture_resource[i].initiatorType == "xmlhttprequest" || capture_resource[i].initiatorType == "script" || capture_resource[i].initiatorType == "img") {
            if (capture_resource[i].name.indexOf('www.demo.com OR YOUR URL') > -1) {
                capture_newtwork_request.Push(capture_resource[i].name)
            }
        }
    }
    return capture_newtwork_request;
}
2
Akash

ページの読み込み時にリクエストのURLを取得することはできますが、読み込み時間に関する統計情報の取得は非現実的です。 script、link、imgなど、これらの種類のリソース要求を行うクエリ要素。

例えば：

var urls = Array.prototype.map.call(
    document.querySelectorAll("link, img, script, iframe"), // Elements which request external resources
    function(e) { // Loop over and return their href/src
        return e.href || e.src; 
    }
);
2
AdrianCooney