| <html> |
| <head> |
| <title>Deep Debugger</title> |
| <script> |
| |
| var tableRows = {}; |
| var tableCels = {}; |
| var tableObjs = {}; |
| var tablesBuilt = {}; |
| var tableShows = {}; |
| var tableHides = {}; |
| |
| // IE: nodes w/id need to be redeclared or getElementById is b0rked |
| var frame = null; |
| |
| window.onload = function(){ |
| // if IE loads this page too quickly (instantly) then |
| // window.debugVar might not have been set |
| window.setTimeout(startMeUp, 100); |
| } |
| |
| function startMeUp(){ |
| frame = document.getElementById('frame'); |
| // GET string |
| var index = location.search.split("=").pop(); |
| var debugObj = window.opener.dojo.debugDeep; |
| var debugVar = debugObj.debugVars[index] || window.debugVar; |
| buildTable('root', frame, debugVar); |
| } |
| |
| function buildTable(path, parent, obj){ |
| var keys = []; |
| var vals = []; |
| for(var prop in obj){ |
| keys.push(prop); |
| try { |
| vals[prop] = obj[prop]; |
| } catch(E) { |
| vals[prop] = 'ERROR: ' + E.message; |
| } |
| } |
| keys.sort(keySorter); |
| |
| if (!keys.length){ |
| |
| var div = document.createElement('div'); |
| div.appendChild(document.createTextNode('Object has no properties.')); |
| |
| parent.appendChild(div); |
| return; |
| } |
| |
| |
| var t = document.createElement('table'); |
| t.border = "1"; |
| |
| var tb = document.createElement('tbody'); |
| t.appendChild(tb); |
| |
| |
| for(var i = 0; i < keys.length; i++) { |
| buildTableRow(path+'-'+keys[i], tb, keys[i], vals[keys[i]]); |
| } |
| |
| if (path == 'root'){ |
| //t.style.width = '90%'; |
| } |
| t.style.width = '100%'; |
| |
| parent.appendChild(t); |
| |
| tablesBuilt[path] = true; |
| } |
| |
| function buildTableRow(path, tb, name, value) { |
| |
| var simpleType = typeof(value); |
| var createSubrow = (simpleType == 'object'); |
| var complexType = simpleType; |
| |
| if (simpleType == 'object'){ |
| var cls = getConstructorClass(value); |
| if (cls){ |
| if (cls == 'Object'){ |
| }else if (cls == 'Array'){ |
| complexType = 'array'; |
| }else{ |
| complexType += ' ('+cls+')'; |
| } |
| } |
| } |
| |
| /*var tr1 = document.createElement('tr'); |
| var td1 = document.createElement('td'); |
| var td2 = document.createElement('td'); |
| var td3 = document.createElement('td'); |
| var td4 = document.createElement('td');*/ |
| |
| var row = tb.rows.length; |
| var tr1 = tb.insertRow(row++); |
| var td1 = tr1.insertCell(0); |
| var td2 = tr1.insertCell(1); |
| var td3 = tr1.insertCell(2); |
| var td4 = tr1.insertCell(3); |
| |
| tr1.style.verticalAlign = 'top'; |
| td1.style.verticalAlign = 'middle'; |
| |
| td1.className = 'propPlus'; |
| td2.className = 'propName'; |
| td3.className = 'propType'; |
| td4.className = 'propVal'; |
| |
| //tr1.appendChild(td1); |
| //tr1.appendChild(td2); |
| //tr1.appendChild(td3); |
| //tr1.appendChild(td4); |
| |
| if (createSubrow){ |
| var img1 = document.createElement('img'); |
| img1.width = 9; |
| img1.height = 9; |
| img1.src = 'arrow_show.gif'; |
| var a1 = document.createElement('a'); |
| a1.appendChild(img1); |
| a1.href = '#'; |
| a1.onclick = function(){ showTableRow(path); return false; }; |
| |
| var img2 = document.createElement('img'); |
| img2.width = 9; |
| img2.height = 9; |
| img2.src = 'arrow_hide.gif'; |
| var a2 = document.createElement('a'); |
| a2.appendChild(img2); |
| a2.href = '#'; |
| a2.onclick = function(){ hideTableRow(path); return false; }; |
| a2.style.display = 'none'; |
| |
| tableShows[path] = a1; |
| tableHides[path] = a2; |
| |
| td1.appendChild(a1); |
| td1.appendChild(a2); |
| }else{ |
| var img = document.createElement('img'); |
| img.width = 9; |
| img.height = 9; |
| img.src = 'spacer.gif'; |
| |
| td1.appendChild(img); |
| } |
| |
| td2.appendChild(document.createTextNode(name)); |
| td3.appendChild(document.createTextNode(complexType)); |
| td4.appendChild(buildPreBlock(value)); |
| |
| //tb.appendChild(tr1); |
| |
| if (createSubrow){ |
| var tr2 = tb.insertRow(row++); |
| var td5 = tr2.insertCell(0); |
| var td6 = tr2.insertCell(1); |
| |
| //var tr2 = document.createElement('tr'); |
| //var td5 = document.createElement('td'); |
| //var td6 = document.createElement('td'); |
| |
| td5.innerHTML = ' '; |
| //td6.innerHTML = ' '; |
| |
| td6.colSpan = '3'; |
| |
| tr2.appendChild(td5); |
| tr2.appendChild(td6); |
| |
| tr2.style.display = 'none'; |
| |
| tb.appendChild(tr2); |
| |
| tableRows[path] = tr2; |
| tableCels[path] = td6; |
| tableObjs[path] = value; |
| } |
| } |
| |
| function showTableRow(path){ |
| |
| var tr = tableRows[path]; |
| var td = tableCels[path]; |
| var a1 = tableShows[path]; |
| var a2 = tableHides[path]; |
| |
| if (!tablesBuilt[path]){ |
| |
| //alert('building table for '+path); |
| buildTable(path, td, tableObjs[path]); |
| } |
| |
| tr.style.display = 'table-row'; |
| |
| a1.style.display = 'none'; |
| a2.style.display = 'inline'; |
| } |
| |
| function hideTableRow(path){ |
| |
| var tr = tableRows[path]; |
| var a1 = tableShows[path]; |
| var a2 = tableHides[path]; |
| |
| tr.style.display = 'none'; |
| |
| a1.style.display = 'inline'; |
| a2.style.display = 'none'; |
| } |
| |
| function buildPreBlock(value){ |
| |
| // |
| // how many lines ? |
| // |
| |
| var s = ''+value; |
| s = s.replace("\r\n", "\n"); |
| s = s.replace("\r", ""); |
| var lines = s.split("\n"); |
| |
| |
| if (lines.length < 2){ |
| |
| if (lines[0].length < 60){ |
| |
| var pre = document.createElement('pre'); |
| pre.appendChild(document.createTextNode(s)); |
| return pre; |
| } |
| } |
| |
| |
| // |
| // multiple lines :( |
| // |
| |
| var preview = lines[0].substr(0, 60) + ' ...'; |
| |
| var pre1 = document.createElement('pre'); |
| pre1.appendChild(document.createTextNode(preview)); |
| pre1.className = 'clicky'; |
| |
| var pre2 = document.createElement('pre'); |
| pre2.appendChild(document.createTextNode(s)); |
| pre2.style.display = 'none'; |
| pre2.className = 'clicky'; |
| |
| pre1.onclick = function(){ |
| pre1.style.display = 'none'; |
| pre2.style.display = 'block'; |
| } |
| |
| pre2.onclick = function(){ |
| pre1.style.display = 'block'; |
| pre2.style.display = 'none'; |
| } |
| |
| var pre = document.createElement('div'); |
| |
| pre.appendChild(pre1); |
| pre.appendChild(pre2); |
| |
| return pre; |
| } |
| |
| function getConstructorClass(obj){ |
| |
| if (!obj.constructor || !obj.constructor.toString) return; |
| |
| var m = obj.constructor.toString().match(/function\s*(\w+)/); |
| |
| if (m && m.length == 2) return m[1]; |
| |
| return null; |
| } |
| |
| function keySorter(a, b){ |
| |
| if (a == parseInt(a) && b == parseInt(b)){ |
| |
| return (parseInt(a) > parseInt(b)) ? 1 : ((parseInt(a) < parseInt(b)) ? -1 : 0); |
| } |
| |
| // sort by lowercase string |
| |
| var a2 = String(a).toLowerCase(); |
| var b2 = String(b).toLowerCase(); |
| |
| return (a2 > b2) ? 1 : ((a2 < b2) ? -1 : 0); |
| } |
| |
| </script> |
| <style> |
| |
| body { |
| font-family: arial, helvetica, sans-serif; |
| } |
| |
| table { |
| border-width: 0px; |
| border-spacing: 1px; |
| border-collapse: separate; |
| } |
| |
| td { |
| border-width: 0px; |
| padding: 2px; |
| } |
| |
| img { |
| border: 0; |
| } |
| |
| pre { |
| margin: 0; |
| padding: 0; |
| white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ |
| white-space: -pre-wrap; /* Opera 4 - 6 */ |
| white-space: -o-pre-wrap; /* Opera 7 */ |
| white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ |
| word-wrap: break-word; /* IE 5.5+ */ |
| } |
| |
| pre.clicky { |
| cursor: hand; |
| cursor: pointer; |
| } |
| |
| td.propPlus { |
| width: 9px; |
| background-color: #ddd; |
| } |
| |
| td.propName { |
| background-color: #ddd; |
| } |
| |
| td.propType { |
| background-color: #ddd; |
| } |
| |
| td.propVal { |
| background-color: #ddd; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <h2>Javascript Object Browser</h2> |
| |
| <div id="frame"></div> |
| |
| </body> |
| </html> |
