用于检查 z-indexes 的 Firefox 插件 [关闭]答案

【问题标题】：Firefox add-on for examining z-indexes [closed]用于检查 z-indexes 的 Firefox 插件 [关闭]
【发布时间】：2017-04-13 06:16:51
【问题描述】：

我在一个相当大的网站上工作，但在管理 z-index 时遇到了麻烦。是否有一个 Firefox 插件可以查看页面并给我一个有序列表，其中包含声明了 z-index 的每个元素？这将为 z-index 错误或难以找到的情况节省大量时间。

【问题讨论】：

我发现这很有用：erichynds.com/jquery/…

标签： css firefox firebug firefox-addon

【解决方案1】：

你在这里找到它

https://addons.mozilla.org/en-US/firefox/addon/60

安装 Web Developer Extension 后，从其菜单中选择

Information > Display Topographic information

【讨论】：

如何使用 Web Developer 检查具有 z-index 的元素列表？
通常有一个web开发工具栏，点击信息，然后显示元素信息，你悬停的元素周围会出现一个小红框，点击它左上方会出现一个小黄框具有该元素所具有的所有属性的角落。键盘快捷键 Ctrl+Shift+F。
另外，在相同的信息 dorpdown 中，单击“显示堆栈级别”。
太棒了！ “显示堆栈级别”正是我想要的。
这是一个很棒的工具，我一直都在使用它，我会自动启动我工作的网站并立即按 ctrl+shif+f！很高兴它对您有所帮助。

【解决方案2】：

我建议你使用 FireBug http://getfirebug.com/ 您可以检查整个 dom，包括 z-indexes。

使用一些 javascript 来帮助您找到所有具有 z-indexes 的元素： 1.加载jquery 2.插入这个javascript：

<script type="text/javascript"> 
//replacethis by the elemets that could have a z index ('div, span, etc..')
$('replacethis').each(function(){ 
 if ($(this).css('z-index')) {
  var zindex = $(this).css('z-index')
  if (window.console) {
   console.log($(this), zindex)
  }else{
   $(this).css('border', '1px solid red').prepend('<strong>' + zindex +'</strong>')
  }
 }; 

}); 
</script>

如果您的 firebug 控制台未加载，它将为所有具有 z-index 的元素提供红色边框，并将 z-index 值附加到框。

【讨论】：

我确实使用了 FireBug，但它没有一个只显示已声明 z-indexes 的元素的视图，对吗？
没错，但是通过单击元素，您可以查看是否存在 z-index。使用 firebug 并使用一些 javascript 来帮助您找到所有具有 z 索引的元素： 1. 加载 jquery 2. 插入这个 javascript: 确保您的 firebug 控制台已打开

【解决方案3】：

在这一点上非常老的问题，但万一其他人通过这种方式，仍然存在（嗯，'仍然'......不确定它是否存在于最初发布问题时）一个Firefox添加 -名为“Tilt 3D”，提供网页的 3D 视图，非常适合诊断 z-index 问题。

https://addons.mozilla.org/en-US/firefox/addon/tilt/

Firefox 甚至在一些版本的某种预览表单中嵌入了相同的功能，但后来将其删除。上述附加组件自 2011 年以来未更新，但暂时仍然有效。 健康警告：Firefox 中的多进程支持随着后续 Firefox 版本逐步实现，并且此插件不适用于多进程（也称为 Electrolysis 或简称为“e10s” ) 支持启用。更多信息在这里：

https://wiki.mozilla.org/Electrolysis

【讨论】：