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

I am adding a button to a few screens in my companies software that have tons of fields that are hidden based on X criteria until Y criteria is met unless Z criteria is present. You get the point. There are tons of elements and its actually impossible to get them all to show at the same time so when it comes time to add a button like Im doing its a total PAIN because you cant tell easily if you are invading the space of another field that isnt present based on your current criteria and so on.

I have searched around for extensions that might do this and found one for Firefox that worked but my software doesnt work in firefox so Im limited to chrome extensions or their dev tools. I also tried adding this CSS to the body using Dev Tools under the Add New Class option with no success....

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

I want to be able to make all elements visible so that I can see where unused space is on my page without having to go through every use case known to man to unhide them. I am aware that this does have a catch in that the JS can be setting the display:none style or a class with this based on screen interaction but Im wanting to just open the screen, make all the fields visible and not touch anything while I just analyze it so this shouldnt be much of a problem for me.

Solution

To make your hidden html elements visible at runtime, run any of the below script from Dev Tools console

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

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

Option 3

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

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