在Firefox中是否可以查看图层？

Question

如何在Firefox中获得与Chrome开发工具的“层”选项卡相同或类似的效果？

我想看到页面上存在哪些层以及它们的尺寸。

看起来FF曾经有这样的功能（"3D视图"），但已经停用。

我找到并尝试使用http://mozilla.github.io/layerscope/，但它似乎不是我要找的，并且我不确定它是否在FF Quantum上正常工作。

- rzymek

Answer 1

你可以在控制台中运行此JavaScript代码段。鸣谢Chris Price。查看他的文章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);

- digitaldonkey

---

粘贴的代码缺少第一行。这是完整的脚本。 - Knogobert

检查过了。看起来是复制粘贴的问题。根据我的浏览器搜索，两个代码片段是完全相同的 :) - digitaldonkey

Answer 2

这个答案是来自于这里的一篇文章的一部分。

快速更新和总结关于2018年6月Firefox浏览器中的3D视图：

众所周知，Firefox开发工具中可用的3D查看器已被移除，并以附加组件Tilt的形式提供给用户，该附加组件不支持e10s（即多进程Firefox）。由于该附加组件与Firefox Quantum不兼容，在Mozilla附加组件网站上没有Firefox 3D View的替代品。

我们不建议使用旧版本的Firefox，但您可以使用Firefox 52 ESR（链接）并使用传统的Tilt附加组件而不会出现任何问题。这是我们在此方面提供的最少帮助。如果您有兴趣，您可以查看我们网站上涵盖的其他Firefox文章这里。

- Gautam Naik

---

火狐浏览器即使关闭自动更新功能，也会自动更新。而Tilt 3D附加组件已从Firefox应用商店中删除。这很遗憾，因为这是一个非常好的教学工具，可以帮助我的入门级学生学习定位属性…… - serraosays

这个功能有进展吗？有没有办法在FF中调试z-index问题？ - mevsme