3

So I use JavaScript fairly regularly and I was wondering if there were any good tips or tricks in debugging javascript....Like for example I have a good one I use fairly regularly.

In my code i would do something like this

window.p = $(this);

and in the console I can do my filtering like this

window.p.next("li").find("a").val();

or whatever i need to do...but this makes it easy to debug a specific spot in the code and I know there has got to me many tips and tricks out there....thanks in advance

Also i looked at this question and though its helpful i was looking more for techniques like my above ...

Community
  • 1
  • 1
Matt Elhotiby
  • 43,028
  • 85
  • 218
  • 321

2 Answers2

3

Have a look at jQuery Lint first of all http://james.padolsey.com/javascript/jquery-lint/. It will help you debug jQuery as you use it. Lint helps to report errors found in jQuery which are usually not obvious in Firebug or Developer Tools. You will find the usage examples at the website mentioned.

Also have a look at this page http://getfirebug.com/logging and start using console object to log and debug your code. You can use it both in Firefox with Firebug and Webkit (Chrome, Safari...) in Developer Tools.

Arman P.
  • 4,314
  • 2
  • 29
  • 47
3

I usually set a breakpoint and look at the Scope Variables, or add my own watch expressions or hover over the variables and just step through the code.

Sometimes I find it useful to just log things using console.log().

Other times, when things work, but they are too slow I use console.profile() and console.profileEnd()

A useful trick is the use of $0. If you have an element selected in the HTML pannel, you can reference it in the console as $0.

All techniques above work in Firefox+Firebug and Webkit based browsers (such as Chrome & Safari). Lately I prefer Chrome because it allows me to edit code inline (check this tutorial by Paul Irish)

For extra debugging help for jQuery I use FireQuery

Dan Manastireanu
  • 1,802
  • 1
  • 15
  • 18