console.logオブジェクトをカウントする

Question

以下のコードは、コンソールログをページに出力します。それが得るなど、サーバからの応答記録します。その代わり、私はあなたがAA番号は1から始まり、それが終了すると、終了を参照して、すべての応答と要求をカウントしたいページにこれらを表示するので

14:15:17 GMT+0000 (GMT Standard Time) Submitting HTTP GET request to http... 
14:15:22 GMT+0000 (GMT Standard Time) Received HTTP response: {.. 
14:15:17 GMT+0000 (GMT Standard Time) Submitting HTTP GET request to http... 
14:15:22 GMT+0000 (GMT Standard Time) Received HTTP response: {.. 

、任意の数の可能性。これは、すべての応答を表示せずにデータを取得することなく何かが起こっていることをユーザーに示すためです。

 function logHttpResponse(response) { 
     var now = new Date(); 
     var logger = document.getElementById('log'); 
     var logMessage = now.toTimeString() + " Received HTTP response: " + JSON.stringify(response); 
     console.log = function (logMessage) { 
      if (typeof logMessage == 'object') { 
       logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(logMessage) : String(logMessage)) + '<br />'; 
      } else { 
       logger.innerHTML += logMessage + '<br />'; 
      } 
     } 
    } 

とhtml：

<div id="log"></div> 

Answer 1

あなただけの回答の数を印刷するconsole.logを無効にしたい場合は、これはそれを行う必要がありますが、これはどのconsole.logコールのためのカウントをインクリメントします。

var logCount = 0 

console.log = function (logMessage) { 
    var logger = document.getElementById('log'); 
    logCount++; 
    logger.innerHTML = logCount; 
} 

あなたはあなたがconsole.log` `に` logHttpResponse`が呼び出されるたびに割り当てている。この

var logCount = 0 

function logHttpResponse(response) { 
    var logger = document.getElementById('log'); 
    logCount++; 
    logger.innerHTML = logCount; 
} 

Answer 2

あなたの質問は私には全く明らかではないが、私が理解からすると、各オープンhttpリクエストの状況を報告しようとしているということです。私はあなたがこのようなカウントを行う機能であなたの要求を包むことをお勧めしたい：

を

var globalCounter = 1; 
function performHttpRequest(requestUrl) { 
    // Store a local copy of the counter for this request 
    var currentCounter = globalCounter++; 

    // Log to the user in whatever way you see fit 
    // Could also for instance be with an array of status objects 
    logger.innerHTML += 'now starting request ' + currentCounter + '</br>'; 

    // Perform the async request using the framework you prefer 
    return $http.get(requestUrl) 
     .then(function(result) { 
      // When the async request finishes, update the log with the counter 
      // we saved earlier 
      logger.innerHTML += 'request ' + currentCounter + ' finished</br>'; 

      // Make sure to return the result of the action to the calling 
      // function. 
      return result; 
     }); 
} 

上記の例は、実際のHTTPリクエストを実行するためのフレームワークとして角度使用していますが、それは全く同じようにjQueryの上で動作しますまたは他の任意のフレームワークである。

Answer 3

entryTypesを"resource"に設定してPerformanceObserverを使用できます。コールバックPerformanceObserverEntryListで最初のパラメータに.getEntries()を呼び出し、for..ofループでエントリオブジェクトを反復します。入力オブジェクトに対して.toJSON()を呼び出し、オブジェクトをObject.entries()に渡して、各プロパティ、現在のエントリオブジェクトの値をネストされたfor..ofループ内に反復させます。

const observer = new PerformanceObserver((list, obj) => { 
    for (let entry of list.getEntries()) { 
    for (let [key, prop] of Object.entries(entry.toJSON())) { 
     logger.innerHTML += ` ${key}:${prop} `; 
    } 
    } 
}); 

observer.observe({ 
    entryTypes: ["resource"] 
});