[RESOLVED]debug Javascript and Jquery

Hello

I would like to debug  1) Javascript   2) Jquery .

Any advice.

Regards

Yes you can definitely do debug the javascript (and so Jquery).

All you need is to use IE developer tool bar – F12.

Here are the two good step-by-step articles from Microsoft:

http://msdn.microsoft.com/en-us/library/dd565625(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/ie/gg699336(v=vs.85).aspx

Hi,

Usee debugger; keyword, in where u want to dubug

example

function test()

{

debugger;

alert(‘welcome’);

or you can use , IE developer tool , or chrome developer tool to debug the javascipt or jquery

please follow the link

IE :  http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

Chrome : https://developer.chrome.com/devtools/docs/javascript-debugging

FireFox : https://developer.mozilla.org/en-US/docs/Tools/Debugger

You can place debugger statements anywhere in procedures to suspend execution. Using
the 
debuggerstatement is similar to setting a breakpoint in the code.

Sample code:

 <script>
        function validate() {
            debugger;

            //Your codes
            alert('This is test debugging');
        }
    </script>

You need to ensure that you have disabled the below two options in IE ,other wise the debugger wont hit

One of most popular tool to debug the javascript in firefox is Firebug .You can take a look at it.

Below links will help you to debug javascript in differenct browsers

EDIT:Added the image

There are quite a few ways to handle this, but generally the Developer Tools (F12) within your browser are going to be the best resources available. The Developer Tools generally will provide you with a Network tab (to monitor any types of AJAX requests
that are being made, if you need to troubleshoot that
), a Console (to display any Javascript / jQuery related errors) and a timeline (to monitor everything).

You can use this with the
Javascript debugger; keyword
, which can easily be placed into your code (that you want to debug) and pull up the Developer Tools and refresh your page. By doing this, you should see a breakpoint appear when your debugger keyword is hit and it will allow
you to step through (and hover over your various variables to see their values) similar to how you would using Visual Studio :

Chrome – firefox – IE : F12 for open debug mode or you can use alert() function in javascript 

You can use the "debugger;" that would be handy if you have your developer tool window open.

Else you can also try and open the developer window/clicking the inspect element and the go to the sources, find your javascript/jquery and put a debugger/ breakpoint as you do in visual studio and refresh the page if the debugger is in the document.ready
else just fire/trigger the event for the breakpoint to be hit.

Hope this helps.

Thanks.

Leave a Reply