mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Make inbuilt debug messages navigable
This commit is contained in:
Nick O'Leary
157
nodes/core/core/lib/debug/debug-utils.js
Normal file
157
nodes/core/core/lib/debug/debug-utils.js
Normal file
@@ -0,0 +1,157 @@
|
||||
|
||||
RED.debug = (function() {
|
||||
function buildMessageElement(obj,topLevel) {
|
||||
var i;
|
||||
var e;
|
||||
var entryObj;
|
||||
var header;
|
||||
var headerHead;
|
||||
var value;
|
||||
var element = $('<span class="debug-message-element"></span>').toggleClass('collapsed',topLevel);
|
||||
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);
|
||||
} else {
|
||||
header = $('<span>').appendTo(element);
|
||||
if (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();
|
||||
});
|
||||
}
|
||||
$('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('array['+obj.length+']').appendTo(header);
|
||||
headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
|
||||
$('<span>[ </span>').appendTo(headerHead);
|
||||
}
|
||||
|
||||
|
||||
for (i=0;i<length;i++) {
|
||||
if (topLevel) {
|
||||
value = obj[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);
|
||||
}
|
||||
if (i < length -1) {
|
||||
$('<span>, </span>').appendTo(headerHead);
|
||||
}
|
||||
}
|
||||
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
|
||||
header = $('<span></span>').appendTo(entryObj);
|
||||
if (typeof obj[i] === 'object' && obj[i] !== null) {
|
||||
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(header);
|
||||
header.addClass("debug-message-expandable");
|
||||
header.click(function(e) {
|
||||
$(this).parent().toggleClass('collapsed');
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
$('<span class="debug-message-object-key"></span>').text(i).appendTo(header);
|
||||
$('<span>: </span>').appendTo(entryObj);
|
||||
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
|
||||
buildMessageElement(obj[i],false).appendTo(e);
|
||||
}
|
||||
if (length < obj.length) {
|
||||
if (topLevel) {
|
||||
$('<span> ...</span>').appendTo(headerHead);
|
||||
}
|
||||
$('<div class="debug-message-object-entry"><span class="debug-message-object-key">...</span></div>').appendTo(element);
|
||||
}
|
||||
if (topLevel) {
|
||||
if (length === 0) {
|
||||
$('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
|
||||
}
|
||||
$('<span> ]</span>').appendTo(headerHead);
|
||||
}
|
||||
} 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();
|
||||
});
|
||||
}
|
||||
} 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') {
|
||||
$('<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 === 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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
$('<span> }</span>').appendTo(headerHead);
|
||||
}
|
||||
} else if (typeof obj === 'string') {
|
||||
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
|
||||
} else {
|
||||
$('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+obj).appendTo(element);
|
||||
}
|
||||
return element;
|
||||
}
|
||||
return {
|
||||
buildMessageElement: buildMessageElement
|
||||
}
|
||||
})();
|
||||
@@ -89,67 +89,4 @@ $(function() {
|
||||
$("#debug-content").append(msg);
|
||||
$("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
|
||||
},false);
|
||||
|
||||
function buildMessageElement(obj,topLevel) {
|
||||
var i;
|
||||
var e;
|
||||
var entryObj;
|
||||
var header;
|
||||
var element = $('<span class="debug-message-element"></span>').toggleClass('collapsed',topLevel);
|
||||
if (Array.isArray(obj)) {
|
||||
$('<span>').html('Array['+obj.length+']').appendTo(element);
|
||||
var length = Math.min(obj.length,10);
|
||||
for (i=0;i<length;i++) {
|
||||
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
|
||||
header = $('<span></span>').appendTo(entryObj);
|
||||
if (typeof obj[i] === 'object' && obj[i] !== null) {
|
||||
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(header);
|
||||
header.addClass("debug-message-expandable");
|
||||
header.click(function(e) {
|
||||
$(this).parent().toggleClass('collapsed');
|
||||
});
|
||||
}
|
||||
$('<span class="debug-message-object-key"></span>').text(i).appendTo(header);
|
||||
$('<span>: </span>').appendTo(entryObj);
|
||||
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
|
||||
buildMessageElement(obj[i],false).appendTo(e);
|
||||
}
|
||||
if (length < obj.length) {
|
||||
$('<div class="debug-message-object-entry"><span class="debug-message-object-key">...</span></div>').appendTo(element);
|
||||
}
|
||||
} else if (obj === null) {
|
||||
$('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(element);
|
||||
} else if (typeof obj === 'object') {
|
||||
|
||||
header = $('<span>').html((topLevel?(JSON.stringify(obj,2).substring(0,200)):'Object')).appendTo(element);
|
||||
if (topLevel) {
|
||||
$('<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');
|
||||
});
|
||||
}
|
||||
var keys = Object.keys(obj);
|
||||
for (i=0;i<keys.length;i++) {
|
||||
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
|
||||
header = $('<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(header);
|
||||
header.addClass("debug-message-expandable");
|
||||
header.click(function(e) {
|
||||
$(this).parent().toggleClass('collapsed');
|
||||
});
|
||||
}
|
||||
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(header);
|
||||
$('<span>: </span>').appendTo(header);
|
||||
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
|
||||
buildMessageElement(obj[keys[i]],false).appendTo(e);
|
||||
}
|
||||
} else if (typeof obj === 'string') {
|
||||
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
|
||||
} else {
|
||||
$('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+obj).appendTo(element);
|
||||
}
|
||||
return element;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -63,6 +63,9 @@
|
||||
}
|
||||
.debug-message-element {
|
||||
color: #333;
|
||||
font-family: Menlo, monospace;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.debug-message-object-key {
|
||||
color: #792e90;
|
||||
@@ -95,11 +98,26 @@
|
||||
.debug-message-element.collapsed .debug-message-object-entry {
|
||||
display:none;
|
||||
}
|
||||
.debug-message-element:not(.collapsed) .debug-message-object-header {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.debug-message-element.collapsed .debug-message-object-type-header {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
.debug-message-type-other { color: #2033d6; }
|
||||
.debug-message-type-string { color: #b72828; }
|
||||
.debug-message-type-null { color: #666; font-style: italic;}
|
||||
.debug-message-type-meta { color: #666; font-style: italic;}
|
||||
|
||||
.debug-message-expandable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.debug-message-expandable:hover {
|
||||
background: #fefefe;
|
||||
}
|
||||
.debug-message-expandable:hover .debug-message-object-handle {
|
||||
color: #b72828 !important;
|
||||
}
|
||||
|
||||
@@ -15,5 +15,6 @@
|
||||
<div id="debug-content"></div>
|
||||
</body>
|
||||
<script src="../../vendor/vendor-jquery.js"></script>
|
||||
<script src="debug-utils.js"></script>
|
||||
<script src="debug.js"></script>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user