mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Make Debug object explorable
This commit is contained in:
parent
0cd20768f4
commit
e30da2168d
@ -68,10 +68,55 @@ $(function() {
|
||||
|
||||
'</span>';
|
||||
}
|
||||
msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</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;
|
||||
}
|
||||
});
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user