Dump console.log Directly Into HTML for Debugging

Today I needed to debug a website on an old iPad. I didn’t have a quick way to remotely debug an old Safari on my Ubuntu laptop, so I thought that I could dump console output into HTML instead. To do this, 2 things are needed:

An empty div:

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

A custom console.log function:

(function () {
  var logger = document.getElementById("log");
  console.log = function (message) {
    if (typeof message == "object") {
      logger.innerHTML +=
        (JSON && JSON.stringify ? JSON.stringify(message) : message) + "<br />";
    } else {
      logger.innerHTML += message + "<br />";
    }
  };
})();

Then you can walk around your code and wrap suspicious parts in a try catch block:

try {
  (...) // suspected code
} catch (e) {
  console.log({ e }, e.message, e.stack);
}