R
Robert Skidmore
Debugger.js 1.0
This is my Javascript debugger.
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.
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"
2. You can stop the debug window from following your mouse by pressing
ctrl
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, event name, or the word msdn on
the object tab to goto the msdn definition of that property.
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;
function document_onkeypress(){
if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 4)){
if (keyspressed == true){
document.getElementById("floatingdiv").style.display = "none";
keyspressed = false;
}else{
keyspressed = true;
try{
document.getElementById("floatingdiv").style.display = "block";
}catch(ex){}
}
}
}
function document_onmousemove(){
try{
if (!event.ctrlKey){
lastx = event.clientX + 10;
lasty = event.clientY + 10;
var theobject = document.elementFromPoint(lastx - 10, lasty - 10);
if ((theobject != null) && (theobject != lastobject) &&
(hasParent(theobject, 'floatingdiv') == false) && (keyspressed ==
true)){
switch(currenttab){
case "properties":
buildProperties(theobject, lastx, lasty);
break;
case "objects":
buildObjects(theobject, lastx, lasty);
break;
case "events":
buildEvents(theobject, lastx, lasty);
break;
}
}
try{
div_for_object = document.getElementById("floatingdiv")
div_for_object.style.top = lasty;
div_for_object.style.left = lastx;
}catch(ex){}
lastobject = theobject;
}
}catch(ex){
window.alert(ex.message);
}
}
function WriteTable(theobject, x, y){
var table_for_object
try{
table_for_object = document.getElementById("floatingtable")
}catch(ex){
table_for_object = null;
window.alert(ex.message);
}
if (table_for_object == null){
//div
div_for_object = document.createElement('div');
div_for_object.id = 'floatingdiv';
div_for_object.style.position = 'absolute';
div_for_object.style.top = x;
div_for_object.style.left = y;
div_for_object.style.overflow = 'auto';
div_for_object.style.width = '220px';
div_for_object.style.height = '350px';
div_for_object.style.backgroundColor = 'white';
div_for_object.style.borderRight = '#ff0066 1px solid';
div_for_object.style.borderTop = '#ff0066 1px solid';
div_for_object.style.borderLeft = '#ff0066 1px solid';
div_for_object.style.borderBottom = '#ff0066 1px solid';
//table
outer_table = document.createElement('table');
outer_table.style.width='195px';
//row
var tb=document.createElement('tbody');
var tr=document.createElement('tr');
//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);
//append the tab row
tb.appendChild(tr);
//create content row
var tr=document.createElement('tr');
//create content cell
var td=document.createElement('td');
td.style.borderRight = 'gray 1px solid';
td.style.borderLeft = 'gray 1px solid';
td.style.borderBottom = 'gray 1px solid';
td.colSpan = '3';
//create content table in cell
table_for_object = document.createElement('table');
table_for_object.id = 'floatingtable';
table_for_object.style.width='190px';
table_for_object.border = '2';
//row
var tb2=document.createElement('tbody');
var tr2=document.createElement('tr');
//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);
tb2.appendChild(tr2);
table_for_object.appendChild(tb2);
td.appendChild(table_for_object);
tr.appendChild(td);
tb.appendChild(tr);
outer_table.appendChild(tb);
div_for_object.appendChild(outer_table);
document.body.appendChild(div_for_object);
return document.getElementById("floatingtable");
}else{
return document.getElementById("floatingtable");
}
}
function buildProperties(theobject, x, y){
if (theobject == undefined){
theobject = lastobject;
}
if (x == 'undefined'){
x = lastx;
}
if (y == 'undefined'){
y = lasty;
}
var protbl = WriteTable(theobject, x, y);
try{
for (var i = 2; i <= 300; i++){
protbl.deleteRow(2);
}
}catch(ex){}
for (p in theobject){
var prop = new String(p);
var results = new String(eval("theobject." + prop));
if ((prop.substring(0, 2) != 'on') && (results != '[object]')){
aRow = protbl.insertRow();
aCell1 = aRow.insertCell();
aCell1.style.width = '40px'
aCell1.style.fontFamily = 'Arial';
aCell1.style.fontSize = '8pt';
aCell1.style.backgroundColor = '#f5f5f5';
aCell1.innerText = prop;
aCell1.onclick = new Function
("window.open('http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/"
+ prop + ".asp')");
aCell1.style.cursor = 'hand';
aCell1.textAlign = "right";
aCell1.style.verticalAlign = "top";
aCell2 = aRow.insertCell();
aCell2.style.width = '60px'
aCell2.noWrap = 'nowrap';
aCell2.style.fontFamily = 'Arial';
aCell2.style.fontSize = '8pt';
aCell2.style.backgroundColor = '#f5f5f5';
if (results.length >= 50){
div_for_object = document.createElement('div');
div_for_object.style.overflow = 'auto';
div_for_object.style.width = '90px';
div_for_object.style.height = '120px';
div_for_object.innerText = results;
aCell2.appendChild(div_for_object);// = results;
}else{
aCell2.innerText = results;
}
}
}
currenttab = "properties";
}
function buildEvents(theobject, x, y){
if (theobject == undefined){
theobject = lastobject;
}
if (x == 'undefined'){
x = lastx;
}
if (y == 'undefined'){
y = lasty;
}
var protbl = WriteTable(theobject, x, y);
try{
for (var i = 2; i <= 300; i++){
protbl.deleteRow(2);
}
}catch(ex){}
for (p in theobject){
var prop = new String(p);
var results = new String(eval("theobject." + prop));
if (prop.substring(0, 2) == 'on'){
aRow = protbl.insertRow();
aCell1 = aRow.insertCell();
aCell1.style.width = '40px'
aCell1.style.fontFamily = 'Arial';
aCell1.style.fontSize = '8pt';
aCell1.style.backgroundColor = '#f5f5f5';
aCell1.innerText = prop;
aCell1.onclick = new Function
("window.open('http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events/"
+ prop + ".asp')");
aCell1.style.cursor = 'hand';
aCell1.textAlign = "right";
aCell1.style.verticalAlign = "top";
aCell2 = aRow.insertCell();
aCell2.style.width = '60px'
aCell2.noWrap = 'nowrap';
aCell2.style.fontFamily = 'Arial';
aCell2.style.fontSize = '8pt';
aCell2.style.backgroundColor = '#f5f5f5';
if (results.length >= 10){
div_for_object = document.createElement('div');
div_for_object.style.overflow = 'auto';
div_for_object.style.width = '90px';
div_for_object.style.height = '120px';
div_for_object.innerText = results;
aCell2.appendChild(div_for_object);// = results;
}else{
aCell2.innerText = results;
}
}
}
currenttab = "events";
}
var objArray = new Array();
function buildObjects(theobject, x, y){
if (theobject == undefined){
theobject = lastobject;
}
if (x == 'undefined'){
x = lastx;
}
if (y == 'undefined'){
y = lasty;
}
var protbl = WriteTable(theobject, x, y);
try{
for (var i = 2; i <= 300; i++){
protbl.deleteRow(2);
}
}catch(ex){}
var i = 0;
for (p in theobject){
var prop = new String(p);
var results = new String(eval("theobject." + prop));
if (results == '[object]'){
objArray = eval("theobject." + prop);
aRow = protbl.insertRow();
aCell1 = aRow.insertCell();
aCell1.style.width = '40px'
aCell1.style.fontFamily = 'Arial';
aCell1.style.fontSize = '8pt';
aCell1.style.backgroundColor = '#f5f5f5';
aCell1.innerText = prop;
aCell1.onclick = new Function("buildProperties2(" + i + ")");
aCell1.style.cursor = 'hand';
aCell1.textAlign = "right";
aCell1.style.verticalAlign = "top";
aCell2 = aRow.insertCell();
aCell2.style.width = '60px'
aCell2.noWrap = 'nowrap';
aCell2.style.fontFamily = 'Arial';
aCell2.style.fontSize = '8pt';
aCell2.style.backgroundColor = '#f5f5f5';
aCell2.innerText = 'MSDN';
aCell2.onclick = new Function
("window.open('http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/"
+ prop + ".asp')");
aCell2.style.cursor = 'hand';
i++;
}
}
currenttab = "objects";
}
function buildProperties2(i){
buildProperties(objArray);
lastobject = objArray;
}
function hasParent(theobject, parentid) {
if (theobject == null) return false;
else if (theobject.nodeType == 1 && theobject.id == parentid)
return true;
else
if (theobject.parentNode != null){
return hasParent(theobject.parentNode, parentid);
}else{
return false;
}
}
This is my Javascript debugger.
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.
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"
2. You can stop the debug window from following your mouse by pressing
ctrl
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, event name, or the word msdn on
the object tab to goto the msdn definition of that property.
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;
function document_onkeypress(){
if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 4)){
if (keyspressed == true){
document.getElementById("floatingdiv").style.display = "none";
keyspressed = false;
}else{
keyspressed = true;
try{
document.getElementById("floatingdiv").style.display = "block";
}catch(ex){}
}
}
}
function document_onmousemove(){
try{
if (!event.ctrlKey){
lastx = event.clientX + 10;
lasty = event.clientY + 10;
var theobject = document.elementFromPoint(lastx - 10, lasty - 10);
if ((theobject != null) && (theobject != lastobject) &&
(hasParent(theobject, 'floatingdiv') == false) && (keyspressed ==
true)){
switch(currenttab){
case "properties":
buildProperties(theobject, lastx, lasty);
break;
case "objects":
buildObjects(theobject, lastx, lasty);
break;
case "events":
buildEvents(theobject, lastx, lasty);
break;
}
}
try{
div_for_object = document.getElementById("floatingdiv")
div_for_object.style.top = lasty;
div_for_object.style.left = lastx;
}catch(ex){}
lastobject = theobject;
}
}catch(ex){
window.alert(ex.message);
}
}
function WriteTable(theobject, x, y){
var table_for_object
try{
table_for_object = document.getElementById("floatingtable")
}catch(ex){
table_for_object = null;
window.alert(ex.message);
}
if (table_for_object == null){
//div
div_for_object = document.createElement('div');
div_for_object.id = 'floatingdiv';
div_for_object.style.position = 'absolute';
div_for_object.style.top = x;
div_for_object.style.left = y;
div_for_object.style.overflow = 'auto';
div_for_object.style.width = '220px';
div_for_object.style.height = '350px';
div_for_object.style.backgroundColor = 'white';
div_for_object.style.borderRight = '#ff0066 1px solid';
div_for_object.style.borderTop = '#ff0066 1px solid';
div_for_object.style.borderLeft = '#ff0066 1px solid';
div_for_object.style.borderBottom = '#ff0066 1px solid';
//table
outer_table = document.createElement('table');
outer_table.style.width='195px';
//row
var tb=document.createElement('tbody');
var tr=document.createElement('tr');
//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);
//append the tab row
tb.appendChild(tr);
//create content row
var tr=document.createElement('tr');
//create content cell
var td=document.createElement('td');
td.style.borderRight = 'gray 1px solid';
td.style.borderLeft = 'gray 1px solid';
td.style.borderBottom = 'gray 1px solid';
td.colSpan = '3';
//create content table in cell
table_for_object = document.createElement('table');
table_for_object.id = 'floatingtable';
table_for_object.style.width='190px';
table_for_object.border = '2';
//row
var tb2=document.createElement('tbody');
var tr2=document.createElement('tr');
//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);
tb2.appendChild(tr2);
table_for_object.appendChild(tb2);
td.appendChild(table_for_object);
tr.appendChild(td);
tb.appendChild(tr);
outer_table.appendChild(tb);
div_for_object.appendChild(outer_table);
document.body.appendChild(div_for_object);
return document.getElementById("floatingtable");
}else{
return document.getElementById("floatingtable");
}
}
function buildProperties(theobject, x, y){
if (theobject == undefined){
theobject = lastobject;
}
if (x == 'undefined'){
x = lastx;
}
if (y == 'undefined'){
y = lasty;
}
var protbl = WriteTable(theobject, x, y);
try{
for (var i = 2; i <= 300; i++){
protbl.deleteRow(2);
}
}catch(ex){}
for (p in theobject){
var prop = new String(p);
var results = new String(eval("theobject." + prop));
if ((prop.substring(0, 2) != 'on') && (results != '[object]')){
aRow = protbl.insertRow();
aCell1 = aRow.insertCell();
aCell1.style.width = '40px'
aCell1.style.fontFamily = 'Arial';
aCell1.style.fontSize = '8pt';
aCell1.style.backgroundColor = '#f5f5f5';
aCell1.innerText = prop;
aCell1.onclick = new Function
("window.open('http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/"
+ prop + ".asp')");
aCell1.style.cursor = 'hand';
aCell1.textAlign = "right";
aCell1.style.verticalAlign = "top";
aCell2 = aRow.insertCell();
aCell2.style.width = '60px'
aCell2.noWrap = 'nowrap';
aCell2.style.fontFamily = 'Arial';
aCell2.style.fontSize = '8pt';
aCell2.style.backgroundColor = '#f5f5f5';
if (results.length >= 50){
div_for_object = document.createElement('div');
div_for_object.style.overflow = 'auto';
div_for_object.style.width = '90px';
div_for_object.style.height = '120px';
div_for_object.innerText = results;
aCell2.appendChild(div_for_object);// = results;
}else{
aCell2.innerText = results;
}
}
}
currenttab = "properties";
}
function buildEvents(theobject, x, y){
if (theobject == undefined){
theobject = lastobject;
}
if (x == 'undefined'){
x = lastx;
}
if (y == 'undefined'){
y = lasty;
}
var protbl = WriteTable(theobject, x, y);
try{
for (var i = 2; i <= 300; i++){
protbl.deleteRow(2);
}
}catch(ex){}
for (p in theobject){
var prop = new String(p);
var results = new String(eval("theobject." + prop));
if (prop.substring(0, 2) == 'on'){
aRow = protbl.insertRow();
aCell1 = aRow.insertCell();
aCell1.style.width = '40px'
aCell1.style.fontFamily = 'Arial';
aCell1.style.fontSize = '8pt';
aCell1.style.backgroundColor = '#f5f5f5';
aCell1.innerText = prop;
aCell1.onclick = new Function
("window.open('http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events/"
+ prop + ".asp')");
aCell1.style.cursor = 'hand';
aCell1.textAlign = "right";
aCell1.style.verticalAlign = "top";
aCell2 = aRow.insertCell();
aCell2.style.width = '60px'
aCell2.noWrap = 'nowrap';
aCell2.style.fontFamily = 'Arial';
aCell2.style.fontSize = '8pt';
aCell2.style.backgroundColor = '#f5f5f5';
if (results.length >= 10){
div_for_object = document.createElement('div');
div_for_object.style.overflow = 'auto';
div_for_object.style.width = '90px';
div_for_object.style.height = '120px';
div_for_object.innerText = results;
aCell2.appendChild(div_for_object);// = results;
}else{
aCell2.innerText = results;
}
}
}
currenttab = "events";
}
var objArray = new Array();
function buildObjects(theobject, x, y){
if (theobject == undefined){
theobject = lastobject;
}
if (x == 'undefined'){
x = lastx;
}
if (y == 'undefined'){
y = lasty;
}
var protbl = WriteTable(theobject, x, y);
try{
for (var i = 2; i <= 300; i++){
protbl.deleteRow(2);
}
}catch(ex){}
var i = 0;
for (p in theobject){
var prop = new String(p);
var results = new String(eval("theobject." + prop));
if (results == '[object]'){
objArray = eval("theobject." + prop);
aRow = protbl.insertRow();
aCell1 = aRow.insertCell();
aCell1.style.width = '40px'
aCell1.style.fontFamily = 'Arial';
aCell1.style.fontSize = '8pt';
aCell1.style.backgroundColor = '#f5f5f5';
aCell1.innerText = prop;
aCell1.onclick = new Function("buildProperties2(" + i + ")");
aCell1.style.cursor = 'hand';
aCell1.textAlign = "right";
aCell1.style.verticalAlign = "top";
aCell2 = aRow.insertCell();
aCell2.style.width = '60px'
aCell2.noWrap = 'nowrap';
aCell2.style.fontFamily = 'Arial';
aCell2.style.fontSize = '8pt';
aCell2.style.backgroundColor = '#f5f5f5';
aCell2.innerText = 'MSDN';
aCell2.onclick = new Function
("window.open('http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/"
+ prop + ".asp')");
aCell2.style.cursor = 'hand';
i++;
}
}
currenttab = "objects";
}
function buildProperties2(i){
buildProperties(objArray);
lastobject = objArray;
}
function hasParent(theobject, parentid) {
if (theobject == null) return false;
else if (theobject.nodeType == 1 && theobject.id == parentid)
return true;
else
if (theobject.parentNode != null){
return hasParent(theobject.parentNode, parentid);
}else{
return false;
}
}