frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Make Debug object explorable

Browse Source
This commit is contained in:
Nick O'Leary 2016-06-21 22:50:09 +01:00
parent 0cd20768f4
commit e30da2168d
3 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
nodes/core/core/lib/debug/debug.js
View File

@ -68,10 +68,55 @@ $(function() {
'</span>';
}
if (format !== 'Object') {
msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
} else {
var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
buildMessageElement(JSON.parse(payload)).appendTo(el);
}
$("#debug-content").append(msg);
$("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
},false);
},false)
function buildMessageElement(obj) {
var i;
var e;
var entryObj;
var element = $('<span class="debug-message-element"></span>');
if (Array.isArray(obj)) {
$('<span>').html('Array['+obj.length+']').appendTo(element);
for (i=0;i<obj.length;i++) {
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
if (typeof obj[i] === 'object') {
$('<i class="fa fa-caret-right"></i> ').click(function(e) {
$(this).parent().toggleClass('collapsed');
}).appendTo(entryObj);
}
$('<span class="debug-message-object-key"></span>').text(i).appendTo(entryObj);
$('<span>: </span>').appendTo(entryObj);
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
buildMessageElement(obj[i]).appendTo(e);
}
} else if (typeof obj === 'object') {
$('<span>').html('Object').appendTo(element);
var keys = Object.keys(obj);
for (i=0;i<keys.length;i++) {
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
if (typeof obj[keys[i]] === 'object') {
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').click(function(e) {
$(this).parent().toggleClass('collapsed');
}).appendTo(entryObj);
}
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryObj);
$('<span>: </span>').appendTo(entryObj);
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
buildMessageElement(obj[keys[i]]).appendTo(e);
}
} else if (typeof obj === 'string') {
$('<span class="debug-message-object-value"></span>').text('"'+obj+'"').appendTo(element);
} else {
$('<span class="debug-message-object-value"></span>').text(""+obj).appendTo(element);
}
return element;
}
});

31
nodes/core/core/lib/debug/style.css
View File

@ -3,6 +3,9 @@
margin:0;
background: #fff;
}
.debug-window .debug-message-payload {
font-size: 12px;
}
#debug-content {
position: absolute;
top: 43px;
@ -54,3 +57,31 @@
border-left-color: #f99;
border-right-color: #f99;
}
.debug-message-object-entry {
padding-left: 15px;
padding-bottom: 3px;
}
.debug-message-object-key {
color: #a66;
}
.debug-message-object-value {
}
.debug-message-object-handle {
color: #999;
font-size: 0.8em;
width: 1em;
margin-left: -1em;
text-align: center;
transition: transform 0.2s ease-in-out;
transform: rotate(90deg);
}
.debug-message-object-entry.collapsed>.debug-message-object-handle {
transform: rotate(0deg);
}
.debug-message-object-entry.collapsed .debug-message-object-entry {
display:none;
}

1
nodes/core/core/lib/debug/view.html
View File

@ -3,6 +3,7 @@
<link rel="stylesheet" href="../../red/style.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../../vendor/font-awesome/css/font-awesome.min.css">
<title>Node-RED Debug Tools</title>
</head>
<body class="debug-window">
<div class="sidebar-header">