0

I am a JS rookie, looking to become a JS monster, which implies tons of debugging.

I am using Chrome debugger tools. In front of me, lies a huge array of spaghetti JS code that looks like Da Vinci's code to decipher. I need to debug this and get a hang of what is going on. Essentially, I want to find out what function in the .js file is being called upon a specific event. To do this, I set up 'Event Listener Breakpoints' to take note of any Mouse Click events. And when I do click upon the button in question, this is what I get:

Debugging the client side click

As you can see, the debugger does halt the script on the corresponding jQuery function that is about to execute on this turn of events. Unfortunately, this will be very general for all jQuery based functions and doesn't quite help matters. What I am really interested in knowing is the function in MY JS file that triggered the jQuery function, not what is being called upon in the jQuery library.

Illustration:

$('#myButton').live('click', function(){
$('#popUpMenu').close();
});

Is this the right approach to debugging Browser events ? Please ask me to ellaborate if this isn't clear enough.

Improve this question
1
  • If your function has triggered the jQuery function you should be able to navigate backwards through the stack trace to your function (btw. where is your call stack). But it looks to me like the jQuery function has been registered and is called by the Browser. Commented Feb 2, 2013 at 20:14

3 Answers 3

Reset to default
3

You can start by pretty-fying that JavaScript code:

enter image description here

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

Comments

2

I would recommend not using the minimized (.min.js) versions of JQuery (or any other javascript file for that matter), considering you are still a rookie. This way you can debug line-by-line and put breakpoints on individual statements.

Using the minimized code is only recommended for production to reduce the load time/bandwidth of the file. During development, it is wise to use the full (though more slow) version.

You can download it at http://code.jquery.com/jquery-1.9.0.js

Improve this answer

2 Comments

setting up breakpoints makes sense if I knew which function is being called. In this case, the JS file is a little cryptic which is why I am setting up a mouse click event breakpoint and then clicking upon the desired button. Make sense ?
In this case you would likely need to set breakpoints in your own JS file to see when they are being called. Another way of doing this without breakpoints is by writing some log messages using console.log("message goes here"); wherever you would like to monitor.
0

Well, first of all, you need to make sure you are in the right source. Right now, you are viewing the minified Jquery library. See the list of tabs right above the source? That shows you what script file you are in.

You need to select the correct file (yours), and then you can add a breakpoint by clicking on the far left margin.

Use the little triangle (looks like [>]) in the upper left corner to see all loaded source.

Improve this answer

1 Comment

yes, I am aware that it shows the jQuery minified version and other js files exist too. Adding a breakpoint will make sense only if I knew which function was being called upon the mouse click button. My JS is cryptic so I cannot tell, which is why I am setting up the debugger to take note of the mouse click event and then clicking upon the button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.