console.log, consoler.error, console.info, fetch on DOM

logOnDOM.html

    <script>
      (function() {
        var a = console.log;
        var b = console.error;
        var c = console.info;
        var d = fetch;
        var output = document.createElement("div");
        output.style.cssText =
          "position:fixed; background: white; width: 50vw; height: 100vh; z-index: 99; right: 0; top: 0; overflow: auto; word-wrap: pre-wrap;";
        document.body.appendChild(output);

        function log() {
          var result;
          try {
            result = JSON.stringify(arguments);
          } catch (err) {
            result = arguments;
          }
          output.innerHTML += result + "\n\n\n";
        }

        console.log = function() {
          log(arguments);
          return a.apply(this, arguments);
        };
        console.error = function() {
          log(arguments);
          return b.apply(this, arguments);
        };
        console.info = function() {
          log(arguments);
          return c.apply(this, arguments);
        };
        fetch = function() {
          log(arguments);
          return d.apply(this, arguments);
        };
      })();
    </script>