Requeste auflisten

Listet die Requeste mit Größenangabe und Ladezeit auf
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<script src="/js_webseite/jquery.js"></script> <link rel="stylesheet" href="/css_webseite/jquery-ui.css"> <script src="/js_webseite/jquery-ui.js"></script> <style> h2{ font-size: 23px; } h3{ font-size: 20px; } #speed { margin:0 auto; } .right { text-align: right; } tr { border-bottom: 1px solid gray; } td { color:white; padding: 2px 10px; } table { border-collapse: collapse; width:100%; } thead td { background: #b7eeff; } td.name { font-size: 10px; } #network { margin:0 auto; overflow:auto; } #network_conection_debugg{ position:fixed; top:10px; overflow: auto; left:10px; width:90vw; magin:0 auto; border:2px solid black; background:rgba(22,20,20,1); padding:15px; color:white !important; border-top-left-radius:30px; border-bottom-left-radius:30px; } #netwok_debugg_close{ height:32px; width:27px; position:fixed; padding:5px 0 0 5px; text-align:center; font-size:20px; background:red; color:white; cursor:pointer; border:1px solid black; margin:-15px 0 0 -15px; border-top-left-radius:30px; } #netwok_debugg_close:hover{ background:green; } </style> <div id="network_conection_debugg"> <div id="netwok_debugg_close">X</div> <div id="network"> <h3>Detected network speed: <span id="speed"></span> kbps </h3> </div> <h5>Dateiname <div id="datei_name"></div> <br>Requeste Gesamt :<span id="request"></span> <br>Gesamt traffic :<span id="ta"></span> </h5> <table> <tbody id="networktbody"></tbody> </table> </div> <script> var gesamtgroesse=0; const tBody = document.querySelector("#networktbody"); const renderEntry = entry => { const entryStr = ` <td>${entry.entryType}</td> <td class="name" style="max-width:350px">${entry.name}</td> <td class="right">${(entry.transferSize / 1000).toFixed(2)} kB</td> <td class="right">${(entry.responseEnd - entry.responseStart).toFixed(1)} ms</td> `; mehr=(entry.transferSize / 1000).toFixed(2); gesamtgroesse=gesamtgroesse+parseInt(mehr); console.log(gesamtgroesse) tBody.insertAdjacentHTML("beforeend", entryStr); }; const listEntries = () => { window.performance.getEntries().forEach(renderEntry); // console.log(entry.length); document.getElementById('request').innerHTML=window.performance.getEntries().length; }; var kbitsPerSecond; const networkSpeedDetect = () => { let totalSize = 0; let totalTime = 0; const validEntries = []; window.performance.getEntries().forEach(entry => { if (entry.transferSize && entry.responseStart && entry.responseEnd) { if (entry.responseEnd > entry.responseStart) { validEntries.push(entry); const timeTaken = entry.responseEnd - entry.responseStart; totalTime += timeTaken; totalSize += entry.transferSize; //ich.innerHTML+=entry.responseEnd+'='+entry.responseStart+'<br>'; } } }); var kbitsPerSecond = Math.round(totalSize / totalTime * 8); //document.querySelector("#speed").innerHTML = kbitsPerSecond; //const datname=document.querySelector("#datei_name"); //validEntries.forEach(entry => { // const entryStr = ` <li>${entry.name}</li> `; // datname.insertAdjacentHTML("beforeend", "<a href='"+entry.name+"'>"+entry.name+"</a>"); //}); refresh(0,kbitsPerSecond); }; document.addEventListener("DOMContentLoaded", () => { listEntries(); networkSpeedDetect(); // $('#speed').html(kbitsPerSecond); //console.log(window.performance.getEntries()) }); $(document).ready( function () { // $('#speed').html(kbitsPerSecond); // console.log(window.performance.getEntries()) // refresh(0); }); function refresh(counter,kbitsPerSecond) { if(counter < 100){ setTimeout ( function() { //console.log(kbitsPerSecond); $('#speed').html(kbitsPerSecond);//+'='+counter); $('#ta').html(gesamtgroesse); counter++; refresh(counter,kbitsPerSecond); },100); } } $(function(){ $("#network_conection_debugg").draggable({ cursor: "move", }); $( "#network_conection_debugg" ).resizable({ ghost: true, helper: "ui-resizable-helper", animate: true }); $('#netwok_debugg_close').click(function(){ $("#network_conection_debugg").remove(); }) }); </script> </div>