How to find out what hides / acts on an html element

Question

I have a simple <a> tag that is hiding from some JS. ( display:none ) I looked at the source of the page and I see that it is not hidden, however the inspector shows this as a display: none (inline style)

There is no search result for the class / id in the JS code to isolate the part of the code that hides the <a> .

Is there a tool or a fixed procedure that can help me debug this?

Answer 1

Chrome allows you to break code when changing an attribute of an element.

• Open the developer tools using F12 and select the "Elements" tab. Find the item to be hidden. Right-click on it, "Break on", "Change Attributes".

• Refresh the page by opening the developer tools.

If an element is hidden using JavaScript, you tear it apart.

Otherwise, this is done through CSS. If so, use the Elements tab again, select the element you are interested in and look at the Styles applied to it in the right column. Chrome will show which styles are applied, by what definition in the stylesheet. Then it should be trivial to find one that hides the element.

Answer 2

First of all, see if it is hidden from the inline style or css class.

Then, if it is a css class, search your entire project for that class (you should find a javascript function that adds this class to the element).

If the inline style property is hidden, look inside your project for any .style.display = property.

If you are using jquery, try like this:

 // Search by class .addClass(".hiddenClass // Search by css .hide(), or $(".elementSelector").hide() 

Answer 3

First, make sure that it is really javascript that hides your element, as it can be easily css. The easiest first step is to check the element and see if its css accidentally hides it by default.

Secondly. Is your js code in a single file or are you importing several js files to your page? If you have several js files, you can try.

Import file 1 then use javascript to display your element then import the rest of the files.

If the code that hides your element is in the first file, then your element will be visible (because you made it visible after hiding it) if the element is not displayed, this means that the hide occurs in the subsequent file. Move your javascript code showing the item after the second import, etc.

Last but not least, your code does not import external css files.

I recommend using Chrome Dev tools for any javascript debugging you do.