How can I find out what script is setting my eleme

问题:

I'm dealing with a complex page with a lot of different scripts going on, some ASP.NET AJAX and some jQuery.

For some reason when the page loads one of the elements has its visibility set to hidden.

Is there anything out there that can tell me what it is that's causing this element to be invisible? Or even something that would stop everything that's happening in whatever script is doing this so I can see what it is?

回答1:

Use a DOM inspector (like the one built in to Chrome) to first determine if it's set to hidden because of a CSS rule or because it was programmatically set to hidden with a direct inline style setting.

If it was programmatically set to hidden, then the only thing I know of is to search all the javascript code for anything that could be changing the visibility.

Then, when you find some candidate lines of code, use a javascript debugger (my favorite is the one built into Chrome) and set breakpoints on each of those lines. Then, reload the page after the breakpoints are set and when one of those breakpoints is hit, you can step through that part of the code and see who is doing it. At that point, you can even look at the call stack and see what code called this and so on. Or, you can step through and out of this code into the higher levels that called it and see why they are doing it.

If it is CSS rules that are making it hidden, then you need to look at what triggers those CSS rules (classes, IDs, etc...) and figure out how to change one or the other so that your desired object isn't hidden by that CSS rule. Remember that classes can be added/removed from objects in the DOM via javascript so that could also be part of the cause.

回答2:

using Firebug you can set breakpoints throughout your scripts and watch variables as they change at different points. Set a watch on your variable and set breakpoints in your scripts to try and figure out when it is being set. Good luck I've had this problem before it can be a pain

回答3:

you could try and debug.. or you could override it with something like this:

CSS

#element, .elements{
    visibility: visible !important;
}

Modifying the script could break other things. Sometimes in production environments you're not allowed to modify other pre-exisiting scripts. Sometimes it's just not worth all the time trying to figure out what script it is. Especially if there are 10-20 scripts on the page that could be updated or changed whenever.