HTMLでネットワーク要求のリストを取得する方法

Question

chrome devtoolsのように、HTMLでJavascriptを使用してネットワーク要求のリストを取得するにはどうすればよいですか。例えば

：

これは、google.comのためのデベロッパーツールです。私は、javascriptを使用して、リスト内のこれらのリクエストをすべて取得したい。これは可能ですか？もしそうなら、どのように？

Answer 1

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

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

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

Answer 2

ページが読み込まれたときにリクエストの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; 
    } 
); 

Answer 3

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

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

リソースタイミングAPIは、Chrome、Chromium、Chrome Mobile、IE10で利用できます。 Firefoxチームseems to be working on it