☰

Global Debugger

Shows an FPS / Ping / Speed counter wherever you go!

  1. // ==UserScript==
  2. // @name         Global Debugger
  3. // @namespace    https://greatest.deepsurf.us/en/scripts/450102-global-debugger
  4. // @version      1.0.1
  5. // @description  Shows an FPS / Ping / Speed counter wherever you go!
  6. // @author       HYDROFLAME521
  7. // @match        *://*/*
  8. // @license      CDDL-1.0
  9. // @icon         https://c.tenor.com/je-huTL1vwgAAAAi/loading-buffering.gif
  10. // @grant        none
  11. // @require      https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js
  12. // ==/UserScript==
  13. 'use strict';
  14. (function(window, e) {
  15.   if ("object" === typeof exports && "undefined" !== typeof module) {
  16.     module.exports = e();
  17.   } else {
  18.     if ("function" === typeof define && define.amd) {
  19.       define(e);
  20.     } else {
  21.       window.Stats = e();
  22.     }
  23.   }
  24. })(this, function() {
  25.   var init = function() {
  26.     function addPanel(panel) {
  27.       container.appendChild(panel.dom);
  28.       return panel;
  29.     }
  30.     function showPanel(id) {
  31.       var i = 0;
  32.       for (; i < container.children.length; i++) {
  33.         container.children[i].style.display = i === id ? "block" : "none";
  34.       }
  35.       p = id;
  36.     }
  37.     var p = 0;
  38.     var container = document.createElement("div");
  39.     container.style.cssText = "position:fixed;bottom:0;right:0;cursor:pointer;opacity:0.9;z-index:10000";
  40.     container.addEventListener("click", function(event) {
  41.       event.preventDefault();
  42.       showPanel(++p % container.children.length);
  43.     }, false);
  44.     var beginTime = (performance || Date).now();
  45.     var prevTime = beginTime;
  46.     var value = 0;
  47.     var fpsPanel = addPanel(new init.Panel("FPS", "#0ff", "#002"));
  48.     var msPanel = addPanel(new init.Panel("PING", "#0f0", "#020"));
  49.     if (self.performance && self.performance.memory) {
  50.       var memPanel = addPanel(new init.Panel("MB", "#f08", "#201"));
  51.     }
  52.     showPanel(0);
  53.     return {
  54.       REVISION : 16,
  55.       dom : container,
  56.       addPanel : addPanel,
  57.       showPanel : showPanel,
  58.       begin : function() {
  59.         beginTime = (performance || Date).now();
  60.       },
  61.       end : function() {
  62.         value++;
  63.         var time = (performance || Date).now();
  64.         msPanel.update(time - beginTime, 200);
  65.         if (time > prevTime + 1E3 && (fpsPanel.update(1E3 * value / (time - prevTime), 100), prevTime = time, value = 0, memPanel)) {
  66.           var m = performance.memory;
  67.           memPanel.update(m.usedJSHeapSize / 1048576, m.jsHeapSizeLimit / 1048576);
  68.         }
  69.         return time;
  70.       },
  71.       update : function() {
  72.         beginTime = this.end();
  73.       },
  74.       domElement : container,
  75.       setMode : showPanel
  76.     };
  77.   };
  78.   init.Panel = function(label, container, position) {
  79.     var t = Infinity;
  80.     var val = 0;
  81.     var round = Math.round;
  82.     var r = round(window.devicePixelRatio || 1);
  83.     var w = 80 * r;
  84.     var h = 48 * r;
  85.     var right = 3 * r;
  86.     var padding = 2 * r;
  87.     var x = 3 * r;
  88.     var y = 15 * r;
  89.     var width = 74 * r;
  90.     var height = 30 * r;
  91.     var elem = document.createElement("canvas");
  92.     elem.width = w;
  93.     elem.height = h;
  94.     elem.style.cssText = "width:200px;height:120px";
  95.     var context = elem.getContext("2d");
  96.     context.font = "bold " + 11 * r + "px Helvetica,Arial,sans-serif";
  97.     context.textBaseline = "top";
  98.     context.fillStyle = position;
  99.     context.fillRect(0, 0, w, h);
  100.     context.fillStyle = container;
  101.     context.fillText(label, right, padding);
  102.     context.fillRect(x, y, width, height);
  103.     context.fillStyle = position;
  104.     context.globalAlpha = .9;
  105.     context.fillRect(x, y, width, height);
  106.     return {
  107.       dom : elem,
  108.       update : function(i, radius) {
  109.         t = Math.min(t, i);
  110.         val = Math.max(val, i);
  111.         context.fillStyle = position;
  112.         context.globalAlpha = 1;
  113.         context.fillRect(0, 0, w, y);
  114.         context.fillStyle = container;
  115.         context.fillText(round(i) + " " + label + " (" + round(t) + "-" + round(val) + ")", right, padding);
  116.         context.drawImage(elem, x + r, y, width - r, height, x, y, width - r, height);
  117.         context.fillRect(x + width - r, y, r, height);
  118.         context.fillStyle = position;
  119.         context.globalAlpha = .9;
  120.         context.fillRect(x + width - r, y, r, round((1 - i / radius) * height));
  121.       }
  122.     };
  123.   };
  124.   return init;
  125. });
  126.  
  127. (function() {
  128.   'use strict';
  129.  
  130.   const stats = new Stats();
  131.   const statsParentNode = document.body;
  132.  
  133.   statsParentNode.appendChild(stats.dom);
  134.  
  135.  
  136.   requestAnimationFrame(function loop() {
  137.     stats.update();
  138.     requestAnimationFrame(loop);
  139.   });
  140. })();