html - 如何强制所有具有内联样式的 HTML 元素或具有显示 :none to be visible for debugging using Dev Tools 的类

Question

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

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

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

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

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';
  }
}