Is it possible to see Layers in Firefox?

Question

How can I obtain the same or similar effect in Firefox as in Chrome devtools's Layers tab?

I'd like to see what layers exist on a page and their dimensions.

It looks like FF had such feature ("3D view") but it was discontinued.

I've found and tried to use http://mozilla.github.io/layerscope/ but it doesn't seem to be what I'm looking for and I'm not sure whether it's working on FF Quantum correctly.

Answer 1

You may run this piece of javascript in the console. Credit goes to Chris Price. Check his article a Webkit DOM Visualizer.

void function(b,p){function l(k,c,b,e,g,d,f){return"<div style='position:absolute;-webkit-transform-origin: 0 0 0;"+("background:"+f+";")+("width:"+e+"px; height:"+g+"px;")+("-webkit-transform:"+("translate3d("+k+"px,"+c+"px,"+b+"px)")+("rotateX(270deg) rotateY("+d+"deg)")+";")+"'></div>"}function o(k,c,d,f){for(var j=k.childNodes,n=j.length,m=0;m<n;m++){var a=j[m];if(1===a.nodeType){a.style.overflow="visible";a.style.WebkitTransformStyle="preserve-3d";a.style.WebkitTransform="translateZ("+(b+(n-
m)*q).toFixed(3)+"px)";var h=d,i=f;a.offsetParent===k&&(h+=k.offsetLeft,i+=k.offsetTop);o(a,c+1,h,i);e+=l(h+a.offsetLeft,i+a.offsetTop,(c+1)*b,a.offsetWidth,b,0,g[c%(g.length-1)]);e+=l(h+a.offsetLeft+a.offsetWidth,i+a.offsetTop,(c+1)*b,a.offsetHeight,b,270,g[c%(g.length-1)]);e+=l(h+a.offsetLeft,i+a.offsetTop+a.offsetHeight,(c+1)*b,a.offsetWidth,b,0,g[c%(g.length-1)]);e+=l(h+a.offsetLeft,i+a.offsetTop,(c+1)*b,a.offsetHeight,b,270,g[c%(g.length-1)])}}}var g="#C33,#ea4c88,#663399,#0066cc,#669900,#ffcc33,#ff9900,#996633".split(","),
q=0.001,e="",d=document.body;d.style.overflow="visible";d.style.WebkitTransformStyle="preserve-3d";d.style.WebkitPerspective=p;var r=(window.innerWidth/2).toFixed(2),s=(window.innerHeight/2).toFixed(2);d.style.WebkitPerspectiveOrigin=d.style.WebkitTransformOrigin=r+"px "+s+"px";o(d,0,0,0);var f=document.createElement("DIV");f.style.display="none";f.style.position="absolute";f.style.top=0;f.innerHTML=e;d.appendChild(f);var j="NO_FACES";document.addEventListener("mousemove",function(b){if("DISABLED"!==
j){var c=b.screenX/screen.width,b=(360*(1-b.screenY/screen.height)-180).toFixed(2),c=(360*c-180).toFixed(2);d.style.WebkitTransform="rotateX("+b+"deg) rotateY("+c+"deg)"}},!0);document.addEventListener("mouseup",function(){switch(j){case "NO_FACES":j="FACES";f.style.display="";break;case "FACES":j="NO_FACES",f.style.display="none"}},!0)}(25,5E3);