frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add debug filter box

Browse Source
This commit is contained in:
Nick O'Leary
2016-10-25 21:15:06 +01:00
parent 7607c4c882
commit 2b558768f1
11 changed files with 262 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
nodes/core/core/lib/debug/debug-utils.js
View File

@@ -1,6 +1,6 @@
RED.debug = (function() {
function buildMessageElement(obj,topLevel) {
function buildMessageElement(obj,topLevel,typeHint) {
var i;
var e;
var entryObj;
@@ -11,7 +11,7 @@ RED.debug = (function() {
if (Array.isArray(obj)) {
var length = Math.min(obj.length,10);
if (!topLevel) {
header = $('<span class="debug-message-type-meta"></span>').html('array['+obj.length+']').appendTo(element);
header = $('<span class="debug-message-type-meta"></span>').html(typeHint||('array['+obj.length+']')).appendTo(element);
} else {
header = $('<span>').appendTo(element);
if (length > 0) {
@@ -22,7 +22,7 @@ RED.debug = (function() {
e.preventDefault();
});
}
$('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('array['+obj.length+']').appendTo(header);
$('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html(typeHint||('array['+obj.length+']')).appendTo(header);
headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
$('<span>[ </span>').appendTo(headerHead);
}
@@ -36,7 +36,11 @@ RED.debug = (function() {
} else if (value === null) {
$('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
} else if (typeof value === 'object') {
$('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) {
$('<span class="debug-message-object-value debug-message-type-meta"></span>').html('buffer['+value.data.length+']').appendTo(headerHead);
} else {
$('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
}
} else if (typeof value === 'string') {
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
} else {
@@ -76,73 +80,82 @@ RED.debug = (function() {
} else if (obj === null || obj === undefined) {
$('<span class="debug-message-object-value debug-message-type-null">'+obj+'</span>').appendTo(element);
} else if (typeof obj === 'object') {
var keys = Object.keys(obj);
if (topLevel) {
header = $('<span>').appendTo(element);
if (keys.length > 0) {
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
header.addClass("debug-message-expandable");
header.click(function(e) {
$(this).parent().toggleClass('collapsed');
e.preventDefault();
});
}
if (obj.hasOwnProperty('type') && obj.type === 'Buffer' && obj.hasOwnProperty('data')) {
buildMessageElement(obj.data,false,'buffer['+obj.data.length+']').appendTo(element);
} else {
header = $('<span class="debug-message-type-meta"></span>').html('object').appendTo(element);
}
if (topLevel) {
$('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('object').appendTo(header);
headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
$('<span>{ </span>').appendTo(headerHead);
}
for (i=0;i<keys.length;i++) {
var keys = Object.keys(obj);
if (topLevel) {
if (i < 5) {
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(headerHead);
$('<span>: </span>').appendTo(headerHead);
value = obj[keys[i]];
if (Array.isArray(value)) {
$('<span class="debug-message-object-value debug-message-type-meta"></span>').html('array['+value.length+']').appendTo(headerHead);
} else if (value === null) {
$('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
} else if (typeof value === 'object') {
$('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
} else if (typeof value === 'string') {
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
} else {
$('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+value).appendTo(headerHead);
header = $('<span>').appendTo(element);
if (keys.length > 0) {
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
header.addClass("debug-message-expandable");
header.click(function(e) {
$(this).parent().toggleClass('collapsed');
e.preventDefault();
});
}
} else {
header = $('<span class="debug-message-type-meta"></span>').html('object').appendTo(element);
}
if (topLevel) {
$('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('object').appendTo(header);
headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
$('<span>{ </span>').appendTo(headerHead);
}
for (i=0;i<keys.length;i++) {
if (topLevel) {
if (i < 5) {
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(headerHead);
$('<span>: </span>').appendTo(headerHead);
value = obj[keys[i]];
if (Array.isArray(value)) {
$('<span class="debug-message-object-value debug-message-type-meta"></span>').html('array['+value.length+']').appendTo(headerHead);
} else if (value === null) {
$('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
} else if (typeof value === 'object') {
if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) {
$('<span class="debug-message-object-value debug-message-type-meta"></span>').html('buffer['+value.data.length+']').appendTo(headerHead);
} else {
$('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
}
} else if (typeof value === 'string') {
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
} else {
$('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+value).appendTo(headerHead);
}
if (i < keys.length -1) {
$('<span>, </span>').appendTo(headerHead);
}
}
if (i < keys.length -1) {
$('<span>, </span>').appendTo(headerHead);
if (i === 5) {
$('<span> ...</span>').appendTo(headerHead);
}
}
if (i === 5) {
$('<span> ...</span>').appendTo(headerHead);
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
var entryHeader = $('<span></span>').appendTo(entryObj);
if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) {
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(entryHeader);
entryHeader.addClass("debug-message-expandable");
entryHeader.click(function(e) {
$(this).parent().toggleClass('collapsed');
e.preventDefault();
});
}
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryHeader);
$('<span>: </span>').appendTo(entryHeader);
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
buildMessageElement(obj[keys[i]],false).appendTo(e);
}
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
var entryHeader = $('<span></span>').appendTo(entryObj);
if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) {
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(entryHeader);
entryHeader.addClass("debug-message-expandable");
entryHeader.click(function(e) {
$(this).parent().toggleClass('collapsed');
e.preventDefault();
});
}
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryHeader);
$('<span>: </span>').appendTo(entryHeader);
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
buildMessageElement(obj[keys[i]],false).appendTo(e);
}
if (keys.length === 0) {
$('<div class="debug-message-object-entry debug-message-type-meta collapsed"></div>').text("empty").appendTo(element);
}
if (topLevel) {
if (keys.length === 0) {
$('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
$('<div class="debug-message-object-entry debug-message-type-meta collapsed"></div>').text("empty").appendTo(element);
}
if (topLevel) {
if (keys.length === 0) {
$('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
}
$('<span> }</span>').appendTo(headerHead);
}
$('<span> }</span>').appendTo(headerHead);
}
} else if (typeof obj === 'string') {
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);

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

@@ -1,3 +1,4 @@
var RED = {};
$(function() {
$("#debug-tab-clear").click(function() {
@@ -80,12 +81,21 @@ $(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),true).appendTo(el);
if (format === 'Object' || /^array/.test(format) || format === 'boolean' || format === 'number' ) {
payload = JSON.parse(payload);
} else if (format === 'null') {
payload = null;
} else if (format === 'undefined') {
payload = undefined;
} else if (/^buffer/.test(format)) {
var buffer = payload;
payload = [];
for (var c = 0; c < buffer.length; c += 2) {
payload.push(parseInt(buffer.substr(c, 2), 16));
}
}
var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
RED.debug.buildMessageElement(payload,true,format).appendTo(el);
$("#debug-content").append(msg);
$("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
},false);

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

@@ -2,11 +2,12 @@
padding:0;
margin:0;
background: #fff;
line-height: 20px;
}
.debug-window .debug-message-payload {
font-size: 14px;
}
#debug-content {
.debug-content {
position: absolute;
top: 43px;
bottom: 0px;
@@ -14,6 +15,20 @@
right: 0px;
overflow-y: scroll;
}
.debug-filter-box {
position:absolute;
top: 42px;
left: 0px;
right: 0px;
background: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.debug-filter-row {
text-align: right;
}
.debug-message {
border-bottom: 1px solid #eee;
border-left: 8px solid #eee;

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

@@ -12,9 +12,9 @@
</span>
<span class="button-group"><a id="debug-tab-open" title="open in new window" class="sidebar-header-button" href="#"><i class="fa fa-desktop"></i></a></span>
<span class="button-group"><a id="debug-tab-clear" title="clear log" class="sidebar-header-button" href="#"><i class="fa fa-trash"></i></a></span></div>
<div id="debug-content"></div>
<div class="debug-content"></div>
</body>
<script src="../../vendor/vendor-jquery.js"></script>
<script src="debug-utils.js"></script>
<script src="debug.js"></script>
<script src="debug-utils.js"></script>
</html>