DEV Community

JS Bits Bill
JS Bits Bill

Posted on • Updated on

How to restore native browser code

Native code is functionality that has been included by the browser's engine and not defined by you, the programmer. Some browsers like Chrome allow you to see if a function is native by simply entering it in the console (and not calling it with parentheses):

Occasionally, you may encounter a scenario where some native code has been overwritten. In my experience as a 3rd party dev, I've seen a few instances where the console has been overwritten to an empty function. This is usually done by clients who are hyper-cautious about sensitive customer information being shown (but seriously, if someone really wants to find this info they will!). Trying to write code without a functioning console is a giant pain so I had a good use case to restore the console's native functionality. (Note this was only done for local development and not deployed live!).

For example, the mobile site has all their console methods overwritten to an empty function (Be sure to simulate the mobile site in your emulator).

So here's how we can restore it:

function createConsoleProxy() {

  // Create dummy iframe to steal its fresh console object
  const iframe = document.createElement('iframe');

  // Add iframe to current window's scope in a hidden state = 'console-proxy'; = 'none';
  document.body.insertAdjacentElement('beforeend', iframe);

  // Reassign value of console to iframe's console 
  const proxyIframe = document.querySelector('#console-proxy');
  window.console = proxyIframe.contentWindow.console;
Enter fullscreen mode Exit fullscreen mode

When we enter console.log; in the console... BAM! It's back to it's "native" state!

Before this method was used, a coworker came up with a clever alternative to view messages by creating a custom log() function that would take user input and prepend it to the body:

function log(msg) {
  const body = document.body;
  body.insertAdjacentHTML('afterbegin', `<div>${msg}</div>`);
Enter fullscreen mode Exit fullscreen mode

This worked enough to see simple messages but we quickly realized we needed the ability to expand objects so it had limited use. But challenges like this are always fun. ðŸĪŠ

Check out more #JSBits at my blog, Or follow me on Twitter!

Top comments (0)