[jQuery] Re: Chaining methods and Debugging?
I'm not a Firebug expert, but this seems to work:
$.fn.log = function (brk){
console.log(this);
if (brk) debugger;
return this;
};
So now $(...).log() puts the jquery object on the console
and .log(true) also drops into the debugger (equivalent to setting a
breakpoint). I'm not sure how to add a value to the watch list; when I
use the above plugin 'this' and 'brk' are on the watch list but they
go out of scope when it returns
Danny
On Dec 28, 2:59 pm, Mike Schinkel [EMAIL PROTECTED] wrote:
Danny wrote:
For quickie debugging to FIrebug, you could define
$.fn.log = function { console.log(this); return this;};
and now you've got a chainable log that you can put anywhere in the
chain:
$('p').log().css('color', 'red').log().slideDown() etc.
I haven't tested this (I'm sitting in front of IE 7) but it
ought to work.
Nice. Anyone know if there is a way in code to trigger a Firebug breakpoint
and also add a value to the watch list if it isn't already there?
--
-Mike
Schinkelhttp://www.mikeschinkel.com/blogs/http://www.welldesignedurls.orghttp://atlanta-web.org
[jQuery] Re: Chaining methods and Debugging?
Another option would be to use the step into and step out debug commands.
Step into (F11) the css command, and if you don't want to follow it all the
way down, step out of it, then step in (F11 again) to the slideDown command.
JK
_
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Benjamin Sterling
Sent: Thursday, December 27, 2007 7:09 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Chaining methods and Debugging?
Mike,
Is there a particular problem that you are trying to debug? In the
beginning, I would put console.log in the callbacks (if the method had one)
and that allowed me to see when one thing was be executed. Another tip that
should probably help, instead of doing.
$('p').css('color','red').slideDown().css('font-weight', 'bold');
do:
$('p')
.css('color','red')
.slideDown()
.css('font-weight', 'bold');
This, to me, makes it a little more human readable and easier to comment out
a line.
On 12/27/07, Mike Schinkel mailto:[EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
Hi all:
I'm relatively new to jQuery and I see chaining methods touted as one of
it's best features. However, I fine it very hard to debug a chained method
because of inability to see the intermedia states in Firebug. It currently
seems to me to be one of those sounded like a great idea at the time but in
use not very practical.
Does anyone else feel this way about chained methods and/or is there a way
to step through the chain and see the intermediate states and results on the
page while debugging?
Thanks in advance.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
P.S. Don't take this as criticism of jQuery; and am quite enjoying using it
and generally quite like its architecture.
--
Benjamin Sterling
http://www.KenzoMedia.com
http://www.KenzoHosting.com
http://www.benjaminsterling.com
[jQuery] Re: Chaining methods and Debugging?
Splitting up the lines helps visually, and Firebug will step to each
line. However, even without splitting them up, you can step-in, step-
out, step-in, step-out on any chained line, and Firebug will happily
step into and out of each method.
That said, jQuery makes it quite possible to reduce an entire
application to a single line of code. Please resist this temptation,
or if you cannot, split up the statements as Benjamin has shown :)
-Mike
On Dec 27, 2007, at 7:09 PM, Benjamin Sterling wrote:
Mike,
Is there a particular problem that you are trying to debug? In the
beginning, I would put console.log in the callbacks (if the method
had one) and that allowed me to see when one thing was be executed.
Another tip that should probably help, instead of doing.
$('p').css('color','red').slideDown().css('font-weight', 'bold');
do:
$('p')
.css('color','red')
.slideDown()
.css('font-weight', 'bold');
This, to me, makes it a little more human readable and easier to
comment out a line.
On 12/27/07, Mike Schinkel [EMAIL PROTECTED] wrote:
Hi all:
I'm relatively new to jQuery and I see chaining methods touted as
one of
it's best features. However, I fine it very hard to debug a chained
method
because of inability to see the intermedia states in Firebug. It
currently
seems to me to be one of those sounded like a great idea at the
time but in
use not very practical.
Does anyone else feel this way about chained methods and/or is there
a way
to step through the chain and see the intermediate states and
results on the
page while debugging?
Thanks in advance.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
P.S. Don't take this as criticism of jQuery; and am quite enjoying
using it
and generally quite like its architecture.
--
Benjamin Sterling
http://www.KenzoMedia.com
http://www.KenzoHosting.com
http://www.benjaminsterling.com
[jQuery] Re: Chaining methods and Debugging?
Is there a particular problem that you are trying to debug?
No, it just seems the pattern I find for practically every debug session I
encounter, both for Javascript/jQuery and for Drupal/PHP development.
In the beginning, I would put console.log in the callbacks (if the method
had one) and that allowed me to see when one thing was be executed.
Sorry for being dense here, but I don't follow this? (BTW, I'm much more
comfortable developing sql-based server apps; I've just ventured into
developing browser-based apps.)
Another tip that should probably help, instead of doing.
$('p').css('color','red').slideDown().css('font-weight', 'bold');
do:
$('p')
.css('color','red')
.slideDown()
.css('font-weight', 'bold');
Interesting; that never would have occured to me. Thanks for suggesting it?
Will Firebug stop on every line (yes I could test, but I'm about to be off
to bed so I figured I'd just ask...)? How can I see the intermedia results?
This, to me, makes it a little more human readable and easier to comment
out a line.
Definitely. Thanks.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org http://www.welldesignedurls.org/
http://atlanta-web.org http://atlanta-web.org/
[jQuery] Re: Chaining methods and Debugging?
For quickie debugging to FIrebug, you could define
$.fn.log = function { console.log(this); return this;};
and now you've got a chainable log that you can put anywhere in the
chain:
$('p').log().css('color', 'red').log().slideDown()
etc.
I haven't tested this (I'm sitting in front of IE 7) but it ought to
work.
Danny
On Dec 27, 9:47 pm, Mike Schinkel [EMAIL PROTECTED] wrote:
Is there a particular problem that you are trying to debug?
No, it just seems the pattern I find for practically every debug session I
encounter, both for Javascript/jQuery and for Drupal/PHP development.
In the beginning, I would put console.log in the callbacks (if the method
had one) and that allowed me to see when one thing was be executed.
Sorry for being dense here, but I don't follow this? (BTW, I'm much more
comfortable developing sql-based server apps; I've just ventured into
developing browser-based apps.)
Another tip that should probably help, instead of doing.
$('p').css('color','red').slideDown().css('font-weight', 'bold');
do:
$('p')
.css('color','red')
.slideDown()
.css('font-weight', 'bold');
Interesting; that never would have occured to me. Thanks for suggesting it?
Will Firebug stop on every line (yes I could test, but I'm about to be off
to bed so I figured I'd just ask...)? How can I see the intermedia results?
This, to me, makes it a little more human readable and easier to comment
out a line.
Definitely. Thanks.
--
-Mike
Schinkelhttp://www.mikeschinkel.com/blogs/http://www.welldesignedurls.orghttp://www.welldesignedurls.org/
http://atlanta-web.orghttp://atlanta-web.org/
[jQuery] Re: Chaining methods and Debugging?
Jeffrey Kretz wrote: Another option would be to use the step into and step out debug commands. Step into (F11) the css command, and if you don't want to follow it all the way down, step out of it, then step in (F11 again) to the slideDown command. I hadn't considered that because I have just immediately assumed that stepping into compressed code wasn't useful but I'll try it. Thanks. -- -Mike Schinkel http://www.mikeschinkel.com/blogs/ http://www.welldesignedurls.org http://atlanta-web.org
[jQuery] Re: Chaining methods and Debugging?
Danny wrote:
For quickie debugging to FIrebug, you could define
$.fn.log = function { console.log(this); return this;};
and now you've got a chainable log that you can put anywhere in the
chain:
$('p').log().css('color', 'red').log().slideDown() etc.
I haven't tested this (I'm sitting in front of IE 7) but it
ought to work.
Nice. Anyone know if there is a way in code to trigger a Firebug breakpoint
and also add a value to the watch list if it isn't already there?
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
[jQuery] Re: Chaining methods and Debugging?
Mike wrote: That said, jQuery makes it quite possible to reduce an entire application to a single line of code. Please resist this temptation, or if you cannot, split up the statements as Benjamin has shown :) Yeah, I've often thought writing an app as a single line of code was a rather dubious achievement. It seems so metaphorically similar to something we knew in college as the Century Club. The idea was to down 100 shots of beer in 100 minutes. Doing so proved you were manly enough to do it but often resulted in upchuck and at best case gave a nasty hangover with the only possible benefit being to gratify a insecure ego! :-) -- -Mike Schinkel http://www.mikeschinkel.com/blogs/ http://www.welldesignedurls.org http://atlanta-web.org
[jQuery] Re: Chaining methods and Debugging?
Mike,
Is there a particular problem that you are trying to debug? In the
beginning, I would put console.log in the callbacks (if the method had one)
and that allowed me to see when one thing was be executed. Another tip that
should probably help, instead of doing.
$('p').css('color','red').slideDown().css('font-weight', 'bold');
do:
$('p')
.css('color','red')
.slideDown()
.css('font-weight', 'bold');
This, to me, makes it a little more human readable and easier to comment out
a line.
On 12/27/07, Mike Schinkel [EMAIL PROTECTED] wrote:
Hi all:
I'm relatively new to jQuery and I see chaining methods touted as one of
it's best features. However, I fine it very hard to debug a chained
method
because of inability to see the intermedia states in Firebug. It
currently
seems to me to be one of those sounded like a great idea at the time but
in
use not very practical.
Does anyone else feel this way about chained methods and/or is there a way
to step through the chain and see the intermediate states and results on
the
page while debugging?
Thanks in advance.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
P.S. Don't take this as criticism of jQuery; and am quite enjoying using
it
and generally quite like its architecture.
--
Benjamin Sterling
http://www.KenzoMedia.com
http://www.KenzoHosting.com
http://www.benjaminsterling.com
