Dick,
Thanks for all of your comments. Yea I know it's not the most
efficient code, but I've been using this script for the past month and
it has worked great for me. I also never intended this to stay
referenced to a page in production. Just want to share what I had.
Considering the fact that I write this in about an hour, I think it's
pretty good.
When I wrote this I had IE only in mind. The company I work for only
develops for IE, mostly internal apps. Guess I should have mentioned
that.
Something you don't mention is the fast that it I desperately need to
alphabetize the list being written to the debug window. It would make
it so much easer to find what you are looking for.
Thx again
"Richard Cornford" <Richard@litotes.demon.co.uk> wrote in message news:<c9sv0t$5n2$1$8302bc10@news.demon.co.uk>...[color=blue]
> Robert Skidmore wrote:[color=green]
> > Debugger.js 1.0
> >
> > This is my Javascript debugger.[/color]
>
> Debugger is probably the wrong name for this. From a debugger I expect
> the ability to single step through (and over) code, set break points,
> inspect the value of variables and the like. What you have created is
> probably better termed and object inspector or DOM Node inspector, and
> certainly could be a valuable aid in debugging browser scripts.
>
> Indeed IMO writing (or at least attempting to write) a cross-browser
> object inspector can be a very valuable learning exercise as the more
> complete it becomes the more it has the potential to bring you face to
> face with each of the oddities exhibited by any individual browser. And
> a familiarity with browser DOMs in depth makes handling their diversity
> easier.
>[color=green]
> > What it does:
> > After you displaying the debug window (see tip 1) you can move your
> > mouse over any element on the page and the window will populate with
> > all the properties, events, and objects of that element.[/color]
> ^^^
> As you are using a - for(prop in obj) - loop the most you can claim is
> that all of the ennumerable properties of an object will be reported.
> But what is wrong with reporting methods in addition to (non object and
> event handler) properties, properties that refer to objects and event
> handlers? (incidentally, the distinction you are drawing between
> properties, events and objects is arbitrary, possibly misleading, and
> ultimately wrong. They are all properties.)
>
> I observer, for example, that an attributes collection has a length
> property of, say 86, but you are not listing any of those integer
> indexed properties (which do actually refer to objects).
>[color=green]
> > Instructions:
> > Place the following line in your page you wish to debug:
> > <script language="JavaScript" src="js/Debugger.js"></script>
> >
> > Tips:
> > 1. You can make the debug window appear by pressing "ctrl+shift+d"[/color]
>
> But twice in rapid succession and a script error results (more caution
> is called for).
>[color=green]
> > 2. You can stop the debug window from following your mouse by pressing
> > ctrl[/color]
>
> You should describe this a holding Ctrl down, but maybe you should
> change the implementation to a toggle.
>
> However, your window makes no allowance for the possibility that the
> page is scrolled.
>[color=green]
> > 3. You can click on a object listed in the object tag and the debug
> > window will populate with that objects data[/color]
>
> That feature could do with a "back" button of some sort.
>[color=green]
> > 4. You can click on the property name, event name, or the word msdn on
> > the object tab to goto the msdn definition of that property.[/color]
>
> Not when the browser is not on line.
>[color=green]
> > You can freely use this with only one condition, credit goes to me.
> > That mean if you tell your boss you wrote this, I will hunt you down
> > and feed your ears to my pet sloth.
> >
> > PS: Please post any impovement to this thread. Thx
> >
> > document.onmousemove = document_onmousemove;
> > document.onkeypress = document_onkeypress;
> >
> > var lastobject;
> > var currenttab = "properties";
> > var keyspressed = false;
> > var lastx;
> > var lasty;[/color]
> <snip>
>
> It is a pity that you did not observer the advice on posting code to
> Usenet offered in the FAQ. You have indented your code with Tab
> characters eve4n though it is known that newsreaders handle Tabs
> inconsistently. Mine for example ignores them, so your code is presented
> as not indented at all, but newsreaders that display tabs may be using
> an unsuitable number of space characters per-tab (the common default of
> 8 is really too many in a newsgroup post). You also have not done
> anything to control the way that your newsreader has wrapped your code,
> rendering it broken as presented. These problems can (and so should) be
> avoided.
>[color=green]
> > function document_onmousemove(){[/color]
>
> This is a mouse move handler. Mouse move events are generated (and
> queued) for virtually every transition of the mouse form pixel to pixel.
> As a result the associated handlers must be fast (so usually simple)
> else they cannot keep up and become a bottleneck in the browser's event
> handling system. Your event handler is trying to do too much and the
> result is less than responsive.
>[color=green]
> > try{
> > if (!event.ctrlKey){
> > lastx = event.clientX + 10;
> > lasty = event.clientY + 10;[/color]
>
> So this isn't even attempting to be cross-browser. That really makes in
> next to useless in an Internet authoring context.
>
> <snip>
> <snip>[color=green]
> > //cell tab properties
> > var td=document.createElement('td');
> > td.style.borderRight = 'gray 1px solid';
> > td.style.borderTop = 'gray 1px solid';
> > td.style.borderLeft = 'gray 1px solid';
> > td.innerText='Properties';
> > td.style.textAlign='center';
> > td.style.cursor = 'hand';
> > td.style.padding='2px';
> > td.onclick = buildProperties;
> > tr.appendChild(td);
> >
> > //cell tab events
> > var td=document.createElement('td');
> > td.style.borderRight = 'gray 1px solid';
> > td.style.borderTop = 'gray 1px solid';
> > td.style.borderLeft = 'gray 1px solid';
> > td.style.borderBottom = 'gray 1px solid';
> > td.innerText='Events';
> > td.style.textAlign='center';
> > td.style.cursor = 'hand';
> > td.style.padding='2px';
> > td.onclick = buildEvents;
> > tr.appendChild(td);
> >
> > //cell tab objects
> > var td=document.createElement('td');
> > td.style.borderRight = 'gray 1px solid';
> > td.style.borderTop = 'gray 1px solid';
> > td.style.borderLeft = 'gray 1px solid';
> > td.style.borderBottom = 'gray 1px solid';
> > td.innerText='Objects';
> > td.style.textAlign='center';
> > td.style.cursor = 'hand';
> > td.style.padding='2px';
> > td.onclick = buildObjects;
> > tr.appendChild(td);[/color]
>
> Do I observer the sort of repetition that might be better accommodated
> with a parameterised function call?
>
> <snip>[color=green]
> > //cell tab properties
> > var td2=document.createElement('td');
> > td2.style.borderRight = 'gray 1px solid';
> > td2.style.borderTop = 'gray 1px solid';
> > td2.style.borderLeft = 'gray 1px solid';
> > td2.innerText='Properties';
> > td2.style.textAlign='center';
> > td2.style.padding='2px';
> > td2.colSpan = '2';
> > tr2.appendChild(td2);[/color]
> <snip>[color=green]
> > var results = new String(eval("theobject." + prop));[/color]
> <snip>
>
> Using - eval - to resolve a dynamically created dot notation property
> accessor? It might be an idea to learn javascript if you are planning on
> scripting web browsers:-
>
> <URL:
http://jibbering.com/faq/#FAQ4_39 >
>
> Richard.[/color]
