Debug javascript with ease!

[teppic.xxviii]

Ok, so this is a little script that I've been working on and off for
the past year or so, and finally I think it might be ready to be put
to the ultimate test: other people!

http://rdgreen.eu/js/debug.js

It's basically a javascript file that can be used to help with the
client-side debugging process.

I use it like this: create a favelet called something like 'Debug
Page' and put the following snip of code in it in place of the URL:

javascriptfunction(){var
s=document.createElement('script');s.type='text/
javascript';s.src='http://rdgreen.eu/js/
debug.js';document.body.appendChild(s);})()

Then whenever you get a problem, simply click the favelet and you can
start inspecting the page you're working on.

Read the comments at the top of the file for a full list of what you
can do; but I think the best way is to just jump in and start snooping
around.

Run the favelet on this page, for example, then press the ` key (back-
tick normally located under the escape key!) In the Evaluate textbox,
type 'document', then press enter...

When developing, simply dot Debug.Write's and Debug.InspectObject's
throughout your code and this can help you track down almost any
problem - it certainly works for me!

Oh, one important note; I do realise there are plenty of debugging
plug-ins and the like out there (such as the one for FireFox called
FireBug, but this javascript file of mine works cross browser! Works
in IE6, IE7, FireFox, Opera, maybe more!

I hope someone out there will find some interest in this, it's been my
baby for far too long and I think it's time I sent it out into the
world on it's own!

Enjoy,
Richard

 

[Darko]

Ok, so this is a little script that I've been working on and off for
the past year or so, and finally I think it might be ready to be put
to the ultimate test: other people!

http://rdgreen.eu/js/debug.js

It's basically a javascript file that can be used to help with the
client-side debugging process.

I use it like this: create a favelet called something like 'Debug
Page' and put the following snip of code in it in place of the URL:

javascriptfunction(){var
s=document.createElement('script');s.type='text/
javascript';s.src='http://rdgreen.eu/js/
debug.js';document.body.appendChild(s);})()

Then whenever you get a problem, simply click the favelet and you can
start inspecting the page you're working on.

Read the comments at the top of the file for a full list of what you
can do; but I think the best way is to just jump in and start snooping
around.

Run the favelet on this page, for example, then press the ` key (back-
tick normally located under the escape key!) In the Evaluate textbox,
type 'document', then press enter...

When developing, simply dot Debug.Write's and Debug.InspectObject's
throughout your code and this can help you track down almost any
problem - it certainly works for me!

Oh, one important note; I do realise there are plenty of debugging
plug-ins and the like out there (such as the one for FireFox called
FireBug, but this javascript file of mine works cross browser! Works
in IE6, IE7, FireFox, Opera, maybe more!

I hope someone out there will find some interest in this, it's been my
baby for far too long and I think it's time I sent it out into the
world on it's own!

Enjoy,
Richard

I like it - it works well at the moment. Just one minor comment at the
moment. If I inspect a variable (say ObjectPrinter) that's global, it
shows all its properties just fine. But if I inspect the same variable
again, it opens a new inspect-window - maybe it would be better just
to refresh the existing window... I am not into how you've done it,
and if that's possible based on your current solu+ion, but from user
angle, it would be expected I think. Other from that, I think I'll
myself find it pretty useful. Thanks!

 

[-Lost]

Oh, one important note; I do realise there are plenty of debugging
plug-ins and the like out there (such as the one for FireFox called
FireBug, but this javascript file of mine works cross browser! Works
in IE6, IE7, FireFox, Opera, maybe more!

And? So does Firebug.

http://www.getfirebug.com/lite.html

 

[-Lost]

And? So does Firebug.

http://www.getfirebug.com/lite.html

Oh, and your site doesn't validate. *shrugs*

 

[teppic.xxviii]

I like it - it works well at the moment. Just one minor comment at the
moment. If I inspect a variable (say ObjectPrinter) that's global, it
shows all its properties just fine. But if I inspect the same variable
again, it opens a new inspect-window - maybe it would be better just
to refresh the existing window... I am not into how you've done it,
and if that's possible based on your current solu+ion, but from user
angle, it would be expected I think. Other from that, I think I'll
myself find it pretty useful. Thanks!

The object inspecter windows have a little 'refresh' button

 

[teppic.xxviii]

Oh, and your site doesn't validate. *shrugs*

Thank you for your helpful comments, but according to http://validator.w3.org/
it does validate fine. Well apart from one page, but seriously.

As for the firebug comment, thank-you for making that (sarcasm aside),
I actually didn't know there was a lite version!

 

[-Lost]

Thank you for your helpful comments, but according to http://validator.w3.org/
it does validate fine. Well apart from one page, but seriously.

All you did was reaffirm what I said.

As for the firebug comment, thank-you for making that (sarcasm aside),
I actually didn't know there was a lite version!

My sarcasm was definitely much better than your claim, or should I go
overboard and call you a liar?

Anyway, I'm in a mood, so don't let my tone affect your good day
(assuming you're having a good day).

 

[dd]

Then whenever you get a problem, simply click the
favelet and you can start inspecting the page
you're working on.

Sounds interesting. I can't get it to work
on XP/IE7 or XP/FF2.0.0.4

I assume "favelet" is your made-up word for
favorite/bookmark ?

 

[John Postlethwait]

Sounds interesting. I can't get it to work
on XP/IE7 or XP/FF2.0.0.4

I assume "favelet" is your made-up word for
favorite/bookmark ?

Here is what a favelet is:

http://www.google.com/search?client...=s&hl=en&q=define:+favelet&btnG=Google+Search

The idea has been around for a few years and is pretty popular on FF/
Safari.

 

[dd]

Here is what a favelet is:
http://www.google.com/search?client=firefox-a&rls=org.mozilla:en-US...

Thanks John. Weird, all this time I'd been
using favorites/bookmarks to store JS that
I wanted to execute via the address bar and
I didn't realize it had a special name

 

[teppic.xxviii]

All you did was reaffirm what I said.

Thank you for pointing out the error of my ways; I have rectified the
problem and will deign to never repeat this most heinous crime.

My sarcasm was definitely much better than your claim, or should I go
overboard and call you a liar?

You could do that if you really wanted, however I personally consider
what I said 'badly researched', for which I accept full liability and
apologise sincerely for any harm or distress caused by my comments.

 

[teppic.xxviii]

Sounds interesting. I can't get it to work
on XP/IE7 or XP/FF2.0.0.4

Hmm, the only thing I can think is that the keyboard hook-up isn't
working. Perhaps it's something to do with the keyboard settings; I
use a British keyboard set-up and I presume you're on US? Tried
changing this on mine but it still works. Can you try creating a test
html page, including the .js and then putting Debug.ShowWindow() in to
the body onload?

 

[derek.davies]

Hmm, the only thing I can think is that the
keyboard hook-up isn't working.
Can you try Debug.ShowWindow()

I tried inserting that call at the end
of the favelet. Now it auto-shows (which
I think is a good default behaviour).

Once it's shown, I can re-show using the
keyboard ` character no problem. It's just
the initial open that didn't work via the
keyboard. Bizarre I know, but now I changed
the favelet to auto-show, it's not an issue

I think this will be very useful for the
browsers that are determined to not be
the least bit helpful (Safari !!).

Cheers !!

 

[dd]

Hmm, the only thing I can think is that the
keyboard hook-up isn't working.
Can you try Debug.ShowWindow()

I tried inserting that call at the end
of the favelet. Now it auto-shows (which
I think is a good default behaviour).

Once it's shown, I can re-show using the
keyboard ` character no problem. It's just
the initial open that didn't work via the
keyboard. Bizarre I know, but now I changed
the favelet to auto-show, it's not an issue

I think this will be very useful for the
browsers that are determined to not be
the least bit helpful (Safari !!).

Cheers !!