Debug jquery in asp. Net app

Question

I have a Web app that calls jQuery somewhere to show a <div>. Anyone know of a way to intercept that call, see exactly what is calling that <div> to appear?

I need to make that div appear on another button and the original button that makes that <div> appear has a bunch of stuff that happens and I'd like to isolate only showing of that <div>?.

The app is asp. Net Web forms with jQuery.

yes. we know of a way. but to say we'd need to see some code would be putting it mildly. — ethorn10
– ethorn10, Commented Apr 2, 2013 at 23:14
@ethorn10, if you do know of a way to break on making particular div visible it may worth to write up answer irrespective of quality of the question. — Alexei Levenkov
– Alexei Levenkov, Commented Apr 2, 2013 at 23:26

Jazzepi · Accepted Answer · 2013-04-02 23:58:23Z

3

There are generally two ways people do this.

A. They "hide" the div and then "show" it by adding and removing css classes with display:none;

OR

B. They literally remove the div element, and then add it back in.

Either way you can use Chrome developer tools (https://developers.google.com/chrome-developer-tools/docs/overview#access) to catch when this happens.

In case A. find the div that's having the CSS class added/removed to it and right click on it. Then click "Break on.." -> "Attribute Modification". That will break the javascript when the node has it's class attribute modified.

In case B. find the parent element where the div is being added/removed. Right click on the parent element "Break on.." -> "Subtree Modification" and this will break when the div is added or removed.

answered Apr 2, 2013 at 23:58

Jazzepi

5,49011 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rudonja Over a year ago

Thank you all, this is the stuff that I am bad at (jquery and debugging it). I searched the ASP.Net application and found the place where c# injects the jquery code, and in the end, the error was one jquery function was not receiving proper parameter. I used IE developer tools for debugging, didn't see that option. and i couldn't put source code because it's spread out over three files (each one seemed important)

Jazzepi Over a year ago

@Rudonja Even if your target webbrowser is IE, I strongly recommend you use Chrome for debugging your front end Javascript/HTML/CSS. It has extremely powerful developer tools and has saved me all sorts of headaches.

Greg · Accepted Answer · 2013-04-02 23:38:30Z

0

Inside of the source <html> you'll notice a <script> reference. This reference will usually either outline the entire jQuery code. The other possible implication will be a reference URL to where that <script> file is located.

Inside of this file you will see the code for jQuery that is allocating that specific <div> and Hiding and Showing. Unfortunately without code, it is difficult to specify exact details.

Hopefully this points you in the right direction.

answered Apr 2, 2013 at 23:38

Greg

11.5k2 gold badges51 silver badges82 bronze badges

Comments

Annabel · Accepted Answer · 2013-04-03 00:13:28Z

0

Debugging jQuery Tip

As @Jazzepi says, Chrome + Developer Tools come in useful when you want to spot problems with your JavaScript code.

Personally, I prefer to use Firefox with the FireBug extension - you find the JavaScript console and you will see error messages there.

answered Apr 3, 2013 at 0:13

Annabel

1,42416 silver badges23 bronze badges

1 Comment

Jazzepi Over a year ago

Just FYI Chrome also has a console as well. You can output to it via console.log() developers.google.com/chrome-developer-tools/docs/… and it does a good job of displaying errors

Collectives™ on Stack Overflow

Debug jquery in asp. Net app

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related