Draws a bounding box for a given element on the page

createBoundingBox

/*
Before run the example copy and paste this function into a browser console.
Example:
  createBoundingBox($0);
  createBoundingBox(document.getElementById('element-id'));
*/
function createBoundingBox(parentEl) {
  var body = document.body;
  var pRect = parentEl.getBoundingClientRect();
  var box = document.createElement('div');
  box.style.position = 'absolute';
  box.style.padding = '0px';
  box.style.margin = '0px';
  box.style.border = 'none';
  box.style.backgroundColor = 'rgba(255,0,0,0.5)';
  box.style.left = (pRect.left + body.scrollLeft) + 'px';
  box.style.top = (pRect.top + body.scrollTop) + 'px';
  box.style.width = pRect.width + 'px';
  box.style.height = pRect.height + 'px';
  box.style.zIndex = Number.MAX_VALUE;
  body.appendChild(box);
}