File size: 2,955 Bytes
e870690 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | var DebugPanel = {
breakpoints: [],
variables: {},
callStack: [],
isPaused: false,
toggleBreakpoint: function(file, line) {
var key = file + ':' + line;
var idx = this.breakpoints.indexOf(key);
if (idx >= 0) this.breakpoints.splice(idx, 1);
else this.breakpoints.push(key);
this.render();
},
setVariable: function(name, value) {
this.variables[name] = value;
this.render();
},
pushFrame: function(name) {
this.callStack.push({ name: name, time: new Date().toISOString() });
this.render();
},
popFrame: function() {
this.callStack.pop();
this.render();
},
pause: function(reason) {
this.isPaused = true;
this.setVariable('_pauseReason', reason);
this.render();
},
resume: function() {
this.isPaused = false;
this.callStack = [];
this.variables = {};
this.render();
},
clear: function() {
this.breakpoints = [];
this.variables = {};
this.callStack = [];
this.isPaused = false;
this.render();
},
getState: function() {
return {
paused: this.isPaused,
breakpoints: this.breakpoints.length,
variables: Object.keys(this.variables).length,
frames: this.callStack.length
};
},
render: function() {
var panel = document.getElementById('debug-content');
if (!panel) return;
var html = '<div class="debug-section">';
html += '<div class="debug-title">DEBUG ' + (this.isPaused ? '⏸ PAUSED' : '▶ RUNNING') + '</div>';
html += '<div class="debug-subtitle">BREAKPOINTS (' + this.breakpoints.length + ')</div>';
if (this.breakpoints.length === 0) html += '<div class="debug-item l-dim">none</div>';
this.breakpoints.forEach(function(bp) {
html += '<div class="debug-item l-yellow">• ' + bp + '</div>';
});
html += '<div class="debug-subtitle">VARIABLES</div>';
var vars = Object.keys(this.variables);
if (vars.length === 0) html += '<div class="debug-item l-dim">none</div>';
vars.forEach(function(k) {
html += '<div class="debug-item l-cyan">' + k + ' = ' + String(DebugPanel.variables[k]).substring(0, 50) + '</div>';
});
html += '<div class="debug-subtitle">CALL STACK (' + this.callStack.length + ')</div>';
if (this.callStack.length === 0) html += '<div class="debug-item l-dim">empty</div>';
this.callStack.forEach(function(f) {
html += '<div class="debug-item l-green">→ ' + f.name + '</div>';
});
html += '</div>';
panel.innerHTML = html;
},
renderToString: function() {
var s = 'DEBUG ' + (this.isPaused ? 'PAUSED' : 'RUNNING') + '\n';
s += 'Breakpoints: ' + this.breakpoints.join(', ') + '\n';
s += 'Variables: ' + JSON.stringify(this.variables) + '\n';
s += 'Call stack: ' + this.callStack.map(function(f) { return f.name; }).join(' → ');
return s;
}
};
|