如何使用开发工具强制所有具有内联样式的 HTML 元素或具有 display:none 的 class 元素可见以进行调试

Question

我正在向我公司软件中的几个屏幕添加一个按钮，这些屏幕具有大量基于 X 标准隐藏的字段，直到满足 Y 标准，除非存在 Z 标准。你明白了。有很多元素，实际上不可能让它们同时显示，所以当需要添加一个按钮时，就像我做的那样，它完全痛苦，因为你无法轻易判断你是否正在入侵 space根据您当前的标准等不存在的另一个字段。

我四处搜索了可能执行此操作的扩展程序，并找到了一个适用于 Firefox 的扩展程序，但我的软件在 Firefox 中不起作用，因此我仅限于 chrome 扩展程序或其开发工具。我还尝试使用 Dev Tools 在 Add New Class 选项下将此 CSS 添加到 body 中，但没有成功....

*{display:block!important;visibility:visible!important;}

我希望能够使所有元素可见，这样我就可以看到我页面上未使用的 space 的位置，而不必通过人们已知的每个用例来取消隐藏它们。我知道这确实有一个问题，因为 JS 可以根据屏幕交互设置 display:none 样式或 class，但我只想打开屏幕，使所有字段可见在我分析它的时候不要碰任何东西，所以这对我来说应该不是什么大问题。

Answer 1

要使隐藏的 html 元素在运行时可见，运行来自 Dev Tools 控制台的以下任何脚本

选项 1

//using jQuery
$('body').find('*').show();
//without jQuery
var allElems=$('body').find('*');
allElems.each(function(){
 var element=this, //javascript DOM object 
 element.style.visibility = 'visible';
 });

选项 2

 //using jQuery
$('body').find('*').css('display','initial');
 //without jQuery
 var allElems=$('body').find('*');
 allElems.each(function(){
 var element=this, //javascript DOM object 
 element.style.display = 'initial';
 });

选项 3

$('body').find('*').css('visibility','visible');

选项 4

//If you need to skip some tags
//using jQuery
var allElements = $('body').find('*');
allElements.each(function(){ 
  var element = $(this); 
  var tagToOmit = "SPAN";
  if(element.prop("tagName") != tagToOmit){
   //do any of the previous jQuery options
   element.show();
   element.css('display','initial');
   element.css('visibility','visible');
   }
});
//without jQuery
var allElements = document.body.getElementsByTagName("*");
var tagToOmit = "SPAN";
for (var i = 0, len = items.length; i < len; i++) {
  if(element.tagName != tagToOmit){
       //do any of the previous non-jQuery options
     var element = items[i];
     element.style.display = 'initial';
     element.style.visibility = 'visible';
  }
}

如何使用开发工具强制所有具有内联样式的 HTML 元素或具有 display:none 的 class 元素可见以进行调试

How can I force all HTML elements with inline style or a class with display:none to be visible for debugging using Dev Tools

html

css

hidden

element