How To find out what is hiding/acting on a html element

Question

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

No result finding out the class/id in JS code in order to isolate the part of the code that is hiding the <a>.

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

Answer 1

Chrome lets you break code when an attribute on an element is changed.

1. Open the developer tools using F12, and select the "Elements" tab. Find the element that gets hidden. Right click on it, "Break on", "Attributes Modification".

2. Refresh the page, keeping Developer Tools open.

If the element is being hidden using JavaScript, you'll break at that point.

Otherwise, it's done via CSS. If this is the case, using the "Elements" tab again, select the element you're interested in and look at the "Styles" applied to it in the right hand column. Chrome will show which styles are applied by which definition in which stylesheet. It should then be trivial to find the one hiding the element.

Answer 2

First of all, look if it is hidden from inline style or by a css class.

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

If is hidden by inline style property, 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

Firstly make sure that it is indeed javascript that hides your element, as it could easily be css. The easiest first step is to check the element and see if by any chance its default css is hiding it.

Second. Is your js code in one file or do you import multiple js files in your page? If you have multiple js files you could try.

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

If the code that hides your element is located in the first file then your element will be visible (because you made it visible after hiding it first) if the element is not visible it means that the hiding takes place in a subsequent file. Move your javascript code showing the element after the second import and so on...

Last but not least make sure your code does not import external css files as well.

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