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.
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);
This answer is a part of article from here
Quick update and summary about 3D View in Firefox browser as on JUNE 2018:
As you all know, 3D Viewer available in Firefox dev tools has been removed and made available to users in form of add-on, Tilt, which doesn’t support e10s aka multi-process Firefox. Since the add-on is not compatible with Firefox Quantum, there are no alternatives available for Firefox 3D View on Mozilla add-ons site.
We don’t recommend using old versions of Firefox, but you can use Firefox 52 ESR ( link )and use legacy Tilt add-on without any issues. This is the least help we offer on this. If you’re interested, you may check other Firefox articles we’re covering on our sitehere
