4

如何在 Firefox 中获得与 Chrome devtools 的 Layers 选项卡相同或相似的效果？

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

看起来 FF 有这样的功能（“3D 视图”），但它已停产。

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

4

2 回答 2

8

您可以在控制台中运行这段 javascript。归功于克里斯·普莱斯。查看他的文章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);
于 2019-09-07T13:21:45.650 回答
2

此答案是此处文章的一部分

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

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

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

于 2018-06-14T06:20:07.543 回答