Tracing into jQuery - J Query

Problem 1
You’re using the Step Into feature in Firebug or another JavaScript debugger to try to step through the jQuery code to see what it actually does when you make a jQuery call. But when you step into the jQuery code, it’s all mashed into one long, unreadable line of code and you can’t step through it:

Solution 1

You’re using the minified version of jQuery. Instead, load the uncompressed version of jQuery into your page for testing.If you are loading the code from the Google Ajax Libraries API with a <script>tag,change it like this:

If you’re using Google’s JavaScript loader, change it like this:

Now you will be able to step into and through the jQuery code.

Problem 2

Having fixed that problem, you want to learn how jQuery’s.html() and .show() methods work. So, you are trying to trace into this code in the debugger:

But when you use the Step Into command, the debugger goes into the jQuery constructor instead of either of the methods that you’re interested in.

Solution 2

The previous line of code contains three function calls: a call to the jQuery ($) constructor followed by calls to the .html() and .show() methods. The Step Into command steps into the first of those calls, the constructor.
At that point you can immediately do a Step Out followed by another Step In. This steps you out of the jQuery constructor (thus putting you back in the middle of the original line of code) and then into the .html() method.
To get to the .show() method, use another pair of Step Out and Step In commands.Each time you do this, you’ll work your way one step further through the jQuery chain.
If this gets tedious, break the chain as described in Recipe 5.15, and add debugger; statements wherever you want to stop. If you want to trace into the .show() method,you can change the code to the following:

Now when the code stops on the debugger; statement, you can just use Step In (twice,first to step to the $; statement and then to step into that function call).

The minified version of jQuery is great for production use but not so good for development.It collapses all of the code into one or two lines, making it nearly impossible to step through the code in a debugger. Also, the common use of chained methods makes it more difficult to step into jQuery methods. Using the tips in this recipe, you can easily trace through the jQuery code in the debugger, whether to chase down a bug or to learn how the code works.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics