是否可以在Firefox中看到层



如何在Firefox中获得与Chrome DevTools层中相同或相似的效果?

我想看看页面上存在哪些层及其尺寸。

看起来FF具有这样的功能(" 3D视图"),但已停止。

我已经找到并尝试使用http://mozilla.github.io/layerscope/,但这似乎并不是我想要的,我不确定它是否正确地在ff Quantum上工作。

您可以在控制台中运行此JavaScript。信用归于克里斯·普莱斯(Chris Price)。查看他的文章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);

此答案是这里文章的一部分

截至6月,快速更新和有关Firefox浏览器中3D视图的摘要 2018:

众所周知,Firefox Dev工具中可用的3D查看器已有 删除并以附加形式的倾斜形式提供给用户, 不支持E10又名多进程Firefox。由于附加组件是 与Firefox量子不兼容,没有其他选择 可在Mozilla附加网站上使用Firefox 3D查看。

我们不建议使用旧版本的Firefox,但您可以使用 Firefox 52 ESR(链接)并使用Legacy Tilt附加组件,没有任何问题。 这是我们为此提供的最少帮助。如果您有兴趣,您可能 检查我们在我们的网站上介绍的其他Firefox文章

最新更新