Bookmarklet to show data-testing-ids

bookmark

javascript:(function(){ var dataId="data-testing-id",selector="["+dataId+"]";function createLabels(){var e=document.getElementById("data-id-canvas").getContext("2d");e.canvas.width=window.innerWidth,e.canvas.height=window.innerHeight,e.clearRect(0,0,e.canvas.width,e.canvas.height),document.querySelectorAll(selector).forEach(function(t,a,n){var i=t.getBoundingClientRect(),d=t.getAttribute(dataId);e.beginPath(),e.lineWidth="1",e.strokeStyle="red",e.rect(i.left,i.top,i.width,i.height),e.stroke(),e.font="12px consolas",e.beginPath(),e.lineWidth="1",e.fillStyle="red",e.rect(i.left,i.top-16,e.measureText(d).width+10,16),e.fill(),e.fillStyle="white",e.fillText(d,i.left+5,i.top-3)}),requestAnimationFrame(createLabels)}requestAnimationFrame(createLabels);var canvas=document.createElement("canvas");canvas.id="data-id-canvas",canvas.style="position: fixed;left: 0;top: 0; pointer-events: none;z-index: 9999999",document.getElementsByTagName("body")[0].appendChild(canvas); })()

orginal.js

var dataId = "data-testing-id";
var selector = "[" + dataId + "]";

function createLabels() {
  var ctx = document.getElementById("data-id-canvas").getContext("2d");
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  var elements = document.querySelectorAll(selector);
  elements.forEach(function(element, index, parent) {
    var rect = element.getBoundingClientRect();
    var testingId = element.getAttribute(dataId);

    ctx.beginPath();
    ctx.lineWidth = "1";
    ctx.strokeStyle = "red";
    ctx.rect(rect.left, rect.top, rect.width, rect.height);
    ctx.stroke();

    ctx.font = "12px consolas";

    ctx.beginPath();
    ctx.lineWidth = "1";
    ctx.fillStyle = "red";
    ctx.rect(
      rect.left,
      rect.top - 16,
      ctx.measureText(testingId).width + 10,
      16
    );
    ctx.fill();

    ctx.fillStyle = "white";
    ctx.fillText(testingId, rect.left + 5, rect.top - 3);
  });

  // recreate on each draw call
  requestAnimationFrame(createLabels);
}

//initial call
requestAnimationFrame(createLabels);

// apply css stykes

var canvas = document.createElement("canvas");

canvas.id = "data-id-canvas";
canvas.style =
  "position: fixed;left: 0;top: 0; pointer-events: none;z-index: 9999999";

document.getElementsByTagName("body")[0].appendChild(canvas);