network-plate/scripts/main.min.js

A JS library to bring network tab on your screen

!function(){var i={};function n(t){return performance.getEntries().filter(function(e){return e.initiatorType===t})}function a(e,t,n){var i=document.createElement(e);return i.style.cssText=t,n&&(i.innerText=n),i}var r={table:[]};r.addScriptsInfo=function(t,n){this.table=function(e){return e.filter(function(e){return!i[e.name]&&(i[e.name]=!0)})}(this.table),this.table.forEach(function(e){nameDiv=a("div","overflow-x:auto;height:20px;padding:2px",e.name),nameDuration=a("div","overflow-x:auto;height:20px;padding:2px",e.duration.toFixed(2)),t.appendChild(nameDiv),n.appendChild(nameDuration)})},r.makePlate=function(){if(!document.getElementsByClassName("table-main")[0]){var e=a("div","position:fixed;top:10px;right:20px;height:200px;width:300px;padding:2px 2px 2px 2px;color:lime;background-color:black;overflow-y:auto;border: 1px solid lime;border-radius:4px;");e.classList.add("table-main"),e.innerHTML+='<div style="color:lime;width:100%;display:flex;justify-content:flex-end"><div style="width:8%;cursor:pointer;" onclick="closeNetworkTable()">X</div></div><div style="display:flex;text-align:center;"> <div class="script-name" style="width:70%;height:auto;"><div>Script Name</div></div><div class="script-duration" style="width:30%;height:auto;"><div>Duration</div></div> <div>',document.getElementsByTagName("body")[0].appendChild(e)}var t=document.getElementsByClassName("script-name")[0],n=document.getElementsByClassName("script-duration")[0];this.addScriptsInfo(t,n)},r.getPerformanceEntries=function(){var e=n("script"),t={};e.forEach(function(e){t.name=e.name,t.duration=e.duration,r.table.push(t),t={}}),window.networkIntervalId=setInterval(function(){var e=n("script"),t={};e.forEach(function(e){t.name=e.name,t.duration=e.duration,r.table.push(t),t={}}),r.makePlate()},5e3),r.makePlate()},window.closeNetworkTable=function(){document.getElementsByClassName("table-main")[0].style.display="none",clearInterval(window.networkIntervalId)},r.getPerformanceEntries()}();