I made this javascript to help me debug some javascript one
time and I have just been adding to it over the years. It
is IE specific (sure it would not be to hard to change that).
It is not ever meant to be rolled to a production environment.
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
(yea, I know they are all really properties) of that element.
Instructions:
Place the following line in your page you wish to debug:
<script language="JavaS cript" src="/Debugger.js"></script>
(this assumes your saved down the code to a file named
debugger.js in the root of your site)
Tips:
1. You can make the debug window appear by pressing "ctrl+shift +d"
2. There are three icons on the top they are as followed:
Parent object - Loads the parent object of the current object
Lock Object - Click to lock in the current object
Close - Closes the dom inspector window
3. You can press and hold CTRL and it will also lock the object in
3. You can click on a object listed in the object tag and
the debug window will populate with that objects data
4. You can click on the property name, or event name to goto
the msdn definition of that property or event.
5. You can click on the field headers to sort
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.onmous emove = document_onmous emove;
document.onmous eup = dragDropRelease ;
document.onkeyp ress = document_onkeyp ress;
var lastobject;
var currenttab = "Properties ";
var keyspressed = false;
var lastx;
var lasty;
var currentlyDraggi ng = false;
var offsetTopY = 0;
var offsetLeftX = 0;
var tabsChanged = false;
var DebuggerObjectL ist = new Array();
var debugger_select ed_border_top = '';
var debugger_select ed_border_botto m = '';
var debugger_select ed_border_right = '';
var debugger_select ed_border_left = '';
var debugger_Lock_C urrent_object = false;
//----------------------------------------------------
//--------------------------------------Building Table
//----------------------------------------------------
function WriteTable(x, y){
var InnerTbl1
try{
var InnerTbl1 =
document.getEle mentById("dubug gerInnerTbl1");
}catch(ex){}
if (InnerTbl1 == null){
OuterDiv1 = builddebugOuter Div1(x,y);
OuterTbl1 = builddebugOuter Tbl1();
var tb = document.create Element('tbody' );
tb.appendChild( buildBar());
tr=document.cre ateElement('tr' );
tr.appendChild( createTab("Prop erties"));
tr.appendChild( createTab("Even ts"));
tr.appendChild( createTab("Obje cts"));
tb.appendChild( tr);
tr=document.cre ateElement('tr' );
var td=document.cre ateElement('td' );
td.innerText=cu rrenttab;
td.style.textAl ign='center';
td.style.paddin g='2px';
td.colSpan = '3';
td.id = 'innerTblTitle1 ';
tr.appendChild( td);
tb.appendChild( tr);
tr=document.cre ateElement('tr' );
var td=document.cre ateElement('td' );
td.colSpan = '3';
InnerTbl1 = document.create Element('table' );
InnerTbl1.id = 'dubuggerInnerT bl1';
InnerTbl1.borde r = '0';
InnerTbl1.cellP adding = '1';
InnerTbl1.style .width = '100%';
var th2=document.cr eateElement('th ead');
var tr2=document.cr eateElement('tr ');
tr2.appendChild (debugger_creat eSortButton("Na me"));
tr2.appendChild (debugger_creat eSortButton("Va lue"));
th2.appendChild (tr2);
InnerTbl1.appen dChild(th2);
var div1 = document.create Element('div');
div1.style.over flow = 'auto';
div1.style.heig ht = '250px';
div1.appendChil d(InnerTbl1);
td.appendChild( div1);
tr.appendChild( td);
tb.appendChild( tr);
OuterTbl1.appen dChild(tb);
OuterDiv1.appen dChild(OuterTbl 1);
document.body.a ppendChild(Oute rDiv1);
return document.getEle mentById("dubug gerInnerTbl1");
}else{
var InnerTable1RowL ength = InnerTbl1.rows. length - 1;
for (var i = 1; i <= InnerTable1RowL ength; i++){
InnerTbl1.delet eRow(1);
}
return InnerTbl1;
}
}
function builddebugOuter Div1(x,y){
var d = document.create Element('div');
d.id = 'debugOuterDiv1 ';
d.style.positio n = 'absolute';
d.style.top = x;
d.style.left = y;
//d.style.overflo w = 'auto';
d.style.width = '318px';
d.style.height = '321px';
d.style.backgro undColor = 'white';
d.style.borderW idth = '4';
d.style.borderC olor = '#3300ff';
d.style.borderS tyle = 'groove';
return d;
}
function builddebugOuter Tbl1(){
var OuterTbl1 = document.create Element('table' );
OuterTbl1.style .width='310px';
OuterTbl1.cellP adding = '0';
OuterTbl1.cellS pacing = '0';
return OuterTbl1;
}
function debugger_create SortButton(debu gger_title){
var td=document.cre ateElement('td' );
td.innerText = debugger_title;//'Name';
td.id = 'sort' + debugger_title;
td.style.backgr oundColor = 'silver';
td.style.fontFa mily = 'arial'
td.style.fontSi ze = '8pt';
td.style.cursor = 'hand';
td.style.paddin gTop = '0';
td.style.paddin gBottom = '0';
td.style.paddin gLeft = '2px';
td.style.height = '16px';
td.style.border Top = '1px solid buttonhighlight ';
td.style.border Left = '1px solid buttonhighlight ';
td.style.border Right = '1px solid buttonshadow';
td.style.border Bottom = '1px solid buttonshadow';
td.onclick = new Function("sortR ow(this)");
return td;
}
function getObjectName(o ){
var n = "";
n =
isnull(o.tagNam e,
isnull(o.id,
isnull(o.name,
isnull(o.value, new String(o)))));
return n;
}
function isnull(checkthi s, usethisifso){
if ((checkthis == null) ||
(checkthis == 'undefined') ||
(checkthis == '') || (checkthis == '0')){
return usethisifso;
}else{
return checkthis;
}
}
//---------------------------------------------------------
//-------------------------------------Build Object Results
//---------------------------------------------------------
function buildObjectResu lts(theobject, x, y){
if ((theobject == 'undefined') ||
(theobject == null) ||
(hasParent(theo bject, 'debugOuterDiv1 ')))
return;
if ((x == 'undefined') || (x == null))
x = lastx;
if ((y == 'undefined') || (y == null))
y = lasty;
var protbl = WriteTable(x, y);
var TitleBarLink = document.create Element("a");
TitleBarLink.hr ef =
"http://msdn.microsoft. com/library/default.asp?" +
"url=/workshop/author/dhtml/reference/objects/" +
getObjectName(t heobject) + ".asp";
TitleBarLink.ta rget = "_blank";
TitleBarLink.st yle.color = "white";
TitleBarLink.in nerText = getObjectName(t heobject);
document.getEle mentById("debug gerTitleCell1") .innerHTML
= "";
document.getEle mentById(
"debuggerTitleC ell1").appendCh ild(TitleBarLin k);
DebuggerObjectL ist = new Array();
var i = 0;
var objectCount = 0;
for (p in theobject){
i++;
var prop = new String(p);
var results = "";
try{
results = new String(
eval("theobject ." + prop + ";")
);
}catch(ex){resu lts = ""}
if (results != ""){
switch(currentt ab){
case "Properties ":
if ((prop.substrin g(0, 2) != 'on')
&& (results != '[object]'))
newRow(protbl, prop, results);
break;
case "Events":
if (prop.substring (0, 2) == 'on')
newRow(protbl, prop, results);
break;
case "Objects":
if (results == '[object]'){
DebuggerObjectL ist[objectCount]
= eval("theobject ." + prop + ";");
objectCount++;
newRow(protbl, prop, results);
}
break;
}
}
if (i > 200)
break;
}
setDefaultArrow s();
objSortTable(do cument.getEleme ntById('dubugge rInnerTbl1'));
}
function newRow(protbl, prop, prop_value){
aRow = protbl.insertRo w();
aRow.id = 'debuggerDataRo w1' + prop;
newCell(aRow, prop, true, "right", "40px");
newCell(aRow, prop_value, false, "left", "180px");
}
var cellCounter = 0;
function newCell(aRow, prop, link, align, width){
cellCounter++;
DataCell1 = aRow.insertCell ();
DataCell1.id = 'debuggerDataCe ll1' + cellCounter;
DataCell1.style .width = width;
DataCell1.style .fontFamily = 'Arial';
DataCell1.style .fontSize = '8pt';
DataCell1.style .backgroundColo r = '#f5f5f5';
if (link){
if (currenttab == 'Objects')
DataCell1.oncli ck = new Function(
"buildObjectRes ults2(" +
(DebuggerObject List.length - 1) +
")");
else if (currenttab == 'Properties')
DataCell1.oncli ck = new Function (
"window.ope n(" +
"'http://msdn.microsoft. com/workshop/author/dhtml/" +
"reference/properties/" + prop + ".asp')");
else if (currenttab == 'Events')
DataCell1.oncli ck = new Function (
"window.ope n(" +
"'http://msdn.microsoft. com/workshop/author/dhtml" +
"/reference/properties/" + prop + ".asp')");
DataCell1.style .cursor = 'hand';
}
DataCell1.textA lign = align;
DataCell1.style .verticalAlign = "top";
var replaceRegExpre ce2 = />/g;
prop = prop.replace(re placeRegExprece 2,">\n\r")
if (prop.length >= 50){
DataDiv1 = document.create Element('div');
DataDiv1.id = 'debuggerDataDi v1' + cellCounter;
DataDiv1.style. overflow = 'auto';
DataDiv1.style. width = width;
DataDiv1.style. height = '120px';
DataDiv1.innerT ext = prop;
DataCell1.appen dChild(DataDiv1 )
}else{
DataCell1.noWra p = 'nowrap';
DataCell1.inner Text = prop;
}
if (!link){
var replaceRegExpre ce1 = /\'/g;
DataButtonCopy = document.create Element('a');
DataButtonCopy. innerText = " - Copy";
DataButtonCopy. style.padding=' 2px';
DataButtonCopy. href = "javascript:voi d(" +
"window.clipboa rdData.setData( 'Text', '" +
prop.replace(re placeRegExprece 1, "\\'") + "'));";
DataCell1.appen dChild(DataButt onCopy)
}
}
function buildObjectResu lts2(i){
var DebuggerTempObj ect = DebuggerObjectL ist[i];
buildObjectResu lts(DebuggerTem pObject);
lastobject = DebuggerTempObj ect;
}
//------------------------------------------------------
//----------------------------------Dom Parent Functions
//------------------------------------------------------
function getParent(o, tagName){
if (o == null)
return null;
else if (o.nodeType == 1 && o.tagName == tagName)
return o;
if (o.parentNode != null){
return getParent(o.par entNode, tagName);
}else{
return null;
}
}
function hasParent(theob ject, parentid) {
try{
if (theobject == null)
return false;
else if (theobject.node Type == 1 && theobject.id == parentid)
return true;
}catch(ex){
window.alert(ex .message);
}
try{
if (theobject.pare ntNode != null){
return hasParent(theob ject.parentNode , parentid);
}else{
return false;
}
}catch(ex){
window.alert(ex .message);
return false;
}
}
//------------------------------------------------------
//---------------------------------------------Key Mouse
//------------------------------------------------------
function document_onkeyp ress(){
if ((event.ctrlKey )
&& (event.shiftKey )
&& (event.keyCode == 4)){
if (keyspressed == true){
try{
document.getEle mentById(
"debugOuterDiv1 ").style.displa y = "none";
keyspressed = false;
}catch(ex){}
}else{
keyspressed = true;
try{
document.getEle mentById(
"debugOuterDiv1 ").style.displa y = "block";
}catch(ex){}
}
}
}
function document_onmous emove(){
if (!event.ctrlKey ){
if (keyspressed == true){
lastx = event.clientX + 10;
lasty = event.clientY + 10;
var theobject =
document.elemen tFromPoint(last x - 10, lasty - 10);
if ((!debugger_Loc k_Current_objec t) &&
(theobject != null) &&
(theobject != lastobject) &&
(!hasParent(the object, 'debugOuterDiv1 '))){
buildObjectResu lts(theobject, lastx, lasty);
lastobject = theobject;
}
}
if (currentlyDragg ing){
OuterDiv1 = document.getEle mentById(
"debugOuterDiv1 ");
OuterDiv1.style .top = event.clientY - offsetTopY;
OuterDiv1.style .left = event.clientX - offsetLeftX;
}
}
}
//------------------------------------------------------
//--------------------------------------------------Tabs
//------------------------------------------------------
function createTab(tabNa me){
var td=document.cre ateElement('td' );
td.style.border Right = 'gray 1px solid';
td.style.border Top = 'gray 1px solid';
td.style.border Left = 'gray 1px solid';
td.style.width = '104px';
if (tabName != currenttab)
td.style.border Bottom = 'gray 1px solid';
td.style.cursor = 'hand';
switch(tabName) {
case "Properties ":
td.onclick = changeTabsPrope rties;
break;
case "Events":
td.onclick = changeTabsEvent s;
break;
case "Objects":
td.onclick = changeTabsObjec ts;
break;
}
td.innerText=ta bName;
td.style.textAl ign='center';
td.style.paddin g='2px';
td.id = 'debuggerTabCel l1' + tabName;
return td;
}
function changeTabsPrope rties(){
if (currenttab != "Properties "){
try{
var a = document.getEle mentById("debug gerTabCell1"
+ currenttab);
a.style.borderB ottom = 'gray 1px solid';
a = document.getEle mentById(
"debuggerTabCel l1Properties");
a.style.borderB ottom = '';
a = document.getEle mentById("inner TblTitle1")
a.innerText = 'Properties';
}catch(ex){}
currenttab = "Properties ";
buildObjectResu lts(lastobject, null,null);
}
}
function changeTabsEvent s(){
if (currenttab != "Events"){
try{
var a = document.getEle mentById("debug gerTabCell1"
+ currenttab);
a.style.borderB ottom = 'gray 1px solid';
a = document.getEle mentById(
"debuggerTabCel l1Events");
a.style.borderB ottom = '';
a = document.getEle mentById("inner TblTitle1")
a.innerText = 'Events';
}catch(ex){}
currenttab = "Events";
buildObjectResu lts(lastobject, null,null);
}
}
function changeTabsObjec ts(){
if (currenttab != "Objects"){
try{
var a = document.getEle mentById("debug gerTabCell1"
+ currenttab);
a.style.borderB ottom = 'gray 1px solid';
a = document.getEle mentById(
"debuggerTabCel l1Objects");
a.style.borderB ottom = '';
a = document.getEle mentById("inner TblTitle1")
a.innerText = 'Objects';
}catch(ex){}
currenttab = "Objects";
buildObjectResu lts(lastobject, null,null);
}
}
//------------------------------------------------------
//---------------------------------------------Title Bar
//------------------------------------------------------
function buildBar(){
var tr=document.cre ateElement('tr' );
tr.id = 'debuggerTitleR ow1';
var td=document.cre ateElement('td' );
td.colSpan = '2';
td.style.filter = "progid:DXImage Transform.Micro soft." +
"Gradient(start ColorStr='#3568 CC', endColorStr='#9 8B2E6'" +
", gradientType='1 ')";
td.onmousedown = dragDropClick;
td.onmouseup = dragDropClick;
td.innerText = "Magic Debugger";
td.style.fontSi ze = '10pt';
td.style.color = 'white';
td.style.cursor = 'hand';
td.style.backgr oundColor = '#FFFF99';
td.id = "debuggerTitleC ell1";
tr.appendChild( td);
td=document.cre ateElement('td' );
var sss=document.cr eateElement('sp an');
sss.innerText = 'p';
sss.style.fontF amily = 'Wingdings 3';
sss.onclick = dubuggerParentO bject;
sss.style.fontS ize = '10pt';
sss.style.curso r = 'hand';
sss.id = 'debuggerCloseS pan3';
td.appendChild( sss);
var ss=document.cre ateElement('spa n');
ss.innerText = 'R';
ss.style.fontFa mily = 'Wingdings 3';
ss.onclick = dubuggerLockObj ect;
ss.style.fontSi ze = '10pt';
ss.style.cursor = 'hand';
ss.id = 'debuggerCloseS pan2';
td.appendChild( ss);
var s=document.crea teElement('span ');
s.innerText = 'V';
s.style.fontFam ily = 'Wingdings 2';
s.onclick = dubuggerClose;
s.style.fontSiz e = '10pt';
s.style.cursor = 'hand';
s.id = 'debuggerCloseS pan1';
td.appendChild( s);
td.style.textAl ign = 'right';
td.style.cursor = 'hand';
td.onmousedown = dragDropClick;
td.onmouseup = dragDropClick;
td.style.backgr oundColor = '#98B2E6';
td.style.color = 'white';
td.id = 'debuggerCloseC ell1';
tr.appendChild( td);
return tr;
}
function dubuggerClose() {
document.getEle mentById("debug OuterDiv1").sty le.display =
"none";
keyspressed = false;
}
function dubuggerLockObj ect(){
if (debugger_Lock_ Current_object)
document.getEle mentById("debug gerCloseSpan2") .innerText
= "R";
else
document.getEle mentById("debug gerCloseSpan2") .innerText
= "Q";
debugger_Lock_C urrent_object = !debugger_Lock_ Current_object;
}
function dubuggerParentO bject(){
buildObjectResu lts(lastobject. parentNode, null, null);
lastobject = lastobject.pare ntNode;
}
//------------------------------------------------------
//---------------------------------------------Drag Drop
//------------------------------------------------------
function dragDropClick() {
var OuterDiv1 = document.getEle mentById("debug OuterDiv1");
offsetTopY =
lasty -
(new Number(new String(
OuterDiv1.style .top).replace(' px',''))) - 10;
offsetLeftX = lastx - (new Number(new String(
OuterDiv1.style .left).replace( 'px',''))) - 10;
currentlyDraggi ng = true;
}
function dragDropRelease (){
currentlyDraggi ng = false;
}
//------------------------------------------------------
//---------------------------------------------TableSort
//------------------------------------------------------
var dom = (document.getEl ementsByTagName ) ? true : false;
var ie5 = (document.getEl ementsByTagName && document.all) ? true :
false;
var bDate = false;
var sType = "s";
var tbody_array = new Array();
var arrowUp, arrowDown;
if (ie5 || dom)
initSortTable() ;
function objSortTable(ob jTable){
var ethead = getChild(objTab le, "thead");
if (ethead == null) return null;
var etheadtr = getChild(ethead , "tr");
if (etheadtr == null) return null;
var etbody = getChild(objTab le, "tbody")
if (etbody == null) return null;
this.eTable = objTable;
this.eTHead = ethead;
this.eTBody = etbody;
this.arrTBody = new Array();
this.arrIDIndex = new Array();
this.desc = true;
this.sort = sortRow;
for (var i=0; i<etbody.childN odes.length; i++) {
this.arrTBody.p ush(etbody.chil dNodes[i]);
}
for (var i=0; i<etheadtr.chil dNodes.length; i++){
this.arrIDIndex[etheadtr.childN odes[i].id] = i;
}
}
function getChild(el, pTagName) {
if (el == null)
return null;
else if (el.nodeType == 1 && el.tagName.toLo werCase() ==
pTagName.toLowe rCase())
return el;
else
for (var i=0; i<el.childNodes .length; i++) {
if (getChild(el.ch ildNodes[i], pTagName) != null){
return getChild(el.chi ldNodes[i], pTagName);
}
}
}
function sortRow(e2sort) {
try{
var bDate =
(e2sort.id.toLo werCase().index Of("date") >= 0)? 1:0;
var doreverse = false;
e2sort._descend ing =
(e2sort._descen ding) ? false : true;
if (this.eTHead.ar row != null) {
if (this.eTHead.ar row.parentNode != e2sort)
this.eTHead.arr ow.parentNode._ descending = null;
doreverse = (this.eTHead.ar row.parentNode ==
e2sort) ? true : false ;
this.eTHead.arr ow.parentNode.r emoveChild(
this.eTHead.arr ow);
}
this.eTHead.arr ow = (e2sort._descen ding) ?
arrowDown.clone Node(true) : arrowUp.cloneNo de(true);
e2sort.appendCh ild(this.eTHead .arrow);
var eIndex = this.arrIDIndex[e2sort.id]
if (doreverse){
this.arrTBody.r everse();
}else{
var type_of_sort = (bDate == 1) ? 'dat' : null;
this.arrTBody.s ort(compareByCo lumn(
this.arrIDIndex[e2sort.id], type_of_sort));
}
for (var i=0; i<this.arrTBody .length; i++) {
this.eTBody.app endChild(this.a rrTBody[i]);
}
}catch(ex){
}
}
function compareByColumn (nCol, type_of_sort) {
var c = nCol;
function _compare(n1, n2) {
var it1 = n1.cells[c].innerText;
var it2 = n2.cells[c].innerText;
if (it1 < it2){
return -1;
}else if (it1 > it2){
return +1;
}else{
return 0;
}
}
function _compare_date(n 1, n2) {
var v;
var it1 = getChild(n1.cel ls[c], 'div').innerTex t;
var it2 = getChild(n2.cel ls[c], 'div').innerTex t;
if ((it1 != '') || (it1 != 'Jan 1 1900 12:00AM')){
if ((it2 != '') || (it1 != 'Jan 1 1900 12:00AM')){
if (new Date(it1) < new Date(it2)){
return -1;
}else if (new Date(it1) > new Date(it2)){
return +1;
}else{
return 0;
}
}else{
return -1;
}
}else{
return +1;
}
}
function _compare_num(n1 , n2){
var it1 = parseInt(n1.cel ls[c].innerText);
var it2 = parseInt(n2.cel ls[c].innerText);
if (it1 < it2){
return -1;
}else if (it1 > it2){
return +1;
}else{
return 0;
}
}
if (type_of_sort == 'num'){
return _compare_num;
}else if (type_of_sort == 'dat'){
return _compare_date;
}else{
return _compare;
}
}
function remove_non_num( sNum){
var newnum;
for (var i=0; i<sNum.length;i ++){
window.alert(ch ar(sNum.charAt( i)));
}
}
function initSortTable() {
arrowUp = document.create Element("SPAN") ;
var tn = document.create TextNode("6");
arrowUp.appendC hild(tn);
arrowUp.style.f ontFamily = 'webdings'
arrowUp.style.f ontColor = 'black';
arrowUp.style.p adding = '0';
arrowUp.style.f ontSize = '15pt';
arrowUp.style.w idth = '15px';
arrowUp.style.v erticalAlign = 'bottom';
arrowUp.style.m arginTop = '-10px';
arrowUp.style.m arginBottom = '-4px';
arrowDown = document.create Element("SPAN") ;
var tn = document.create TextNode("5");
arrowDown.appen dChild(tn);
arrowDown.class Name = "arrow";
arrowDown.appen dChild(tn);
arrowDown.style .fontFamily = 'webdings'
arrowDown.style .fontColor = 'black';
arrowDown.style .padding = '0';
arrowDown.style .fontSize = '15pt';
arrowDown.style .width = '15px';
arrowDown.style .verticalAlign = 'bottom';
arrowDown.style .marginTop = '-10px';
arrowDown.style .marginBottom = '-4px';
}
function setDefaultArrow s(srcEl, sDir){
try{
this.eTHead.arr ow.parentNode._ descending = null;
this.eTHead.arr ow.parentNode.r emoveChild(
this.eTHead.arr ow);
}catch(ex){
}
}