Just a logger for page layouts and reflows

reflowLogger.js

/* these methods and props are known to cause reflow and layout 
   see list from https://gist.github.com/paulirish/5d52fb081b3570c81e3a
*/

const reflowLogger = function() {
  // we don't want to redefine our properties
  if (window.__reflow_log__) return;
  window.__reflow_log__ = true;

  const noop = () => {};

  const track = {
    funcs: ["getClientRects", "getBoundingClientRect"],
    props: [
      "clientLeft",
      "clientTop",
      "clientWidth",
      "clientHeight",
      "offsetLeft",
      "offsetTop",
      "offsetWidth",
      "offsetHeight",
      "offsetParent"
    ]
  };

  function log(methodName, el) {
    console.log(
      `%c${methodName} triggered by: ${el.nodeName} ${el.classList}`,
      "background: #222; color: #bada55"
    );
  }

  //run on a different context
  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  document.body.appendChild(iframe);

  track.props.forEach(prop => {
    //get descriptor for both get anf set
    const propDescriptor = Object.getOwnPropertyDescriptor(
      iframe.contentWindow.HTMLElement.prototype,
      prop
    );
    // get and set || noop
    let originalGetter = propDescriptor ? propDescriptor.get : noop;
    let originalSetter = propDescriptor ? propDescriptor.set : noop;

    // shim in to our prop get & set
    Object.defineProperty(HTMLElement.prototype, prop, {
      get: function() {
        log(`get ${prop}`, this);
        // run original getter
        return originalGetter.call(this);
      },
      set: function(val) {
        log(`set ${prop}`, this);
        // run original setter
        return originalSetter.call(this, val);
      }
    });
  });

  // // shim in to our funcs
  track.funcs.forEach(func => {
    const originalFunc = HTMLElement.prototype[func];
    HTMLElement.prototype[func] = function() {
      log(func, this);
      // run original func
      return originalFunc.apply(this, arguments);
    };
  });
};