mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
261 lines
12 KiB
HTML
261 lines
12 KiB
HTML
|
|
<script type="text/x-red" data-template-name="debug">
|
|
<div class="form-row">
|
|
<label for="node-input-typed-complete"><i class="fa fa-list"></i> <span data-i18n="debug.output"></span></label>
|
|
<input id="node-input-typed-complete" type="text" style="width: 70%">
|
|
<input id="node-input-complete" type="hidden">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-console"><i class="fa fa-random"></i> <span data-i18n="debug.to"></span></label>
|
|
<select type="text" id="node-input-console" style="display: inline-block; width: 250px; vertical-align: top;">
|
|
<option value="false" data-i18n="debug.debtab"></option>
|
|
<option value="true" data-i18n="debug.tabcon"></option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
|
|
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-red" data-help-name="debug">
|
|
<p>The Debug node can be connected to the output of any node. It can be used to display the output of any message
|
|
property in the debug tab of the sidebar. The default is to display <code>msg.payload</code>.</p>
|
|
<p>Each message will also display the date, time, node-id and the type of the chosen property.</p>
|
|
<p>The sidebar can be accessed under the options drop-down ( <i class="fa fa-bars"></i> ) in the top right corner.</p>
|
|
<p>The button to the right of the node will toggle its output on and off so you can de-clutter the debug window.</p>
|
|
<p>You can explore the received messages further by clicking on them. Numbers will be shown in decimal and hex and
|
|
as a timestamp if appropriate. Objects and arrays can be further expanded as required. Buffers may be able to be
|
|
shown as strings if possible.</p>
|
|
<p>Selecting the node-id of any particular message will highlight (in red) the debug node that reported it.
|
|
This is useful if you wire up multiple debug nodes.</p>
|
|
<p>The node can also be configured to send all messages to the console log (⇶).</p>
|
|
<p><b>Note: </b>In addition, any calls to <b>node.warn</b> or <b>node.error</b> will also appear in the debug tab.</p>
|
|
</script>
|
|
<script src="debug/view/debug-utils.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
(function() {
|
|
var subWindow = null;
|
|
RED.nodes.registerType('debug',{
|
|
category: 'output',
|
|
defaults: {
|
|
name: {value:""},
|
|
active: {value:true},
|
|
console: {value:"false"},
|
|
complete: {value:"false", required:true}
|
|
},
|
|
label: function() {
|
|
var suffix = "";
|
|
if (this.console === true || this.console === "true") { suffix = " ⇲"; }
|
|
if (this.complete === true || this.complete === "true") {
|
|
return (this.name||"msg") + suffix;
|
|
} else {
|
|
return (this.name || "msg." + ((!this.complete || this.complete === "false") ? "payload" : this.complete)) + suffix;
|
|
}
|
|
},
|
|
labelStyle: function() {
|
|
return this.name?"node_label_italic":"";
|
|
},
|
|
color:"#87a980",
|
|
inputs:1,
|
|
outputs:0,
|
|
icon: "debug.png",
|
|
align: "right",
|
|
button: {
|
|
toggle: "active",
|
|
onclick: function() {
|
|
var label = this.name||"debug";
|
|
var node = this;
|
|
$.ajax({
|
|
url: "debug/"+this.id+"/"+(this.active?"enable":"disable"),
|
|
type: "POST",
|
|
success: function(resp, textStatus, xhr) {
|
|
var historyEvent = {
|
|
t:'edit',
|
|
node:node,
|
|
changes:{
|
|
active: !node.active
|
|
},
|
|
dirty:node.dirty,
|
|
changed:node.changed
|
|
};
|
|
node.changed = true;
|
|
node.dirty = true;
|
|
RED.nodes.dirty(true);
|
|
RED.history.push(historyEvent);
|
|
RED.view.redraw();
|
|
if (xhr.status == 200) {
|
|
RED.notify(node._("debug.notification.activated",{label:label}),"success");
|
|
} else if (xhr.status == 201) {
|
|
RED.notify(node._("debug.notification.deactivated",{label:label}),"success");
|
|
}
|
|
},
|
|
error: function(jqXHR,textStatus,errorThrown) {
|
|
if (jqXHR.status == 404) {
|
|
RED.notify(node._("common.notification.error", {message: node._("common.notification.errors.not-deployed")}),"error");
|
|
} else if (jqXHR.status === 0) {
|
|
RED.notify(node._("common.notification.error", {message: node._("common.notification.errors.no-response")}),"error");
|
|
} else {
|
|
RED.notify(node._("common.notification.error",{message:node._("common.notification.errors.unexpected",{status:err.status,message:err.response})}),"error");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
onpaletteadd: function() {
|
|
|
|
var options = {
|
|
messageMouseEnter: function(sourceId) {
|
|
if (sourceId) {
|
|
var n = RED.nodes.node(sourceId);
|
|
if (n) {
|
|
n.highlighted = true;
|
|
n.dirty = true;
|
|
}
|
|
RED.view.redraw();
|
|
}
|
|
},
|
|
messageMouseLeave: function(sourceId) {
|
|
if (sourceId) {
|
|
var n = RED.nodes.node(sourceId);
|
|
if (n) {
|
|
n.highlighted = false;
|
|
n.dirty = true;
|
|
}
|
|
RED.view.redraw();
|
|
}
|
|
},
|
|
messageSourceClick: function(sourceId) {
|
|
RED.view.reveal(sourceId);
|
|
},
|
|
clear: function() {
|
|
RED.nodes.eachNode(function(node) {
|
|
node.highlighted = false;
|
|
node.dirty = true;
|
|
});
|
|
RED.view.redraw();
|
|
}
|
|
};
|
|
|
|
var uiComponents = RED.debug.init(options);
|
|
|
|
RED.sidebar.addTab({
|
|
id: "debug",
|
|
label: this._("debug.sidebar.label"),
|
|
name: this._("debug.sidebar.name"),
|
|
content: uiComponents.content,
|
|
toolbar: uiComponents.footer,
|
|
enableOnEdit: true
|
|
});
|
|
RED.actions.add("core:show-debug-tab",function() { RED.sidebar.show('debug'); });
|
|
|
|
var that = this;
|
|
RED._debug = function(msg) {
|
|
that.handleDebugMessage("",{
|
|
name:"debug",
|
|
msg:msg
|
|
});
|
|
};
|
|
|
|
this.refreshMessageList = function() {
|
|
RED.debug.refreshMessageList(RED.workspaces.active());
|
|
if (subWindow) {
|
|
try {
|
|
subWindow.postMessage({event:"workspaceChange",activeWorkspace:RED.workspaces.active()},"*");
|
|
} catch(err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
};
|
|
RED.events.on("workspace:change", this.refreshMessageList);
|
|
|
|
this.handleDebugMessage = function(t,o) {
|
|
var sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
|
|
if (sourceNode) {
|
|
o._source = {id:sourceNode.id,z:sourceNode.z,name:sourceNode.name};
|
|
|
|
}
|
|
RED.debug.handleDebugMessage(o);
|
|
if (subWindow) {
|
|
try {
|
|
subWindow.postMessage({event:"message",msg:o},"*");
|
|
} catch(err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
};
|
|
RED.comms.subscribe("debug",this.handleDebugMessage);
|
|
|
|
$("#debug-tab-open").click(function(e) {
|
|
e.preventDefault();
|
|
subWindow = window.open(document.location.toString().replace(/[?#].*$/,"")+"debug/view/view.html"+document.location.search,"nodeREDDebugView","menubar=no,location=no,toolbar=no,chrome,height=500,width=600");
|
|
subWindow.onload = function() {
|
|
subWindow.postMessage({event:"workspaceChange",activeWorkspace:RED.workspaces.active()},"*");
|
|
};
|
|
});
|
|
|
|
$(window).unload(function() {
|
|
if (subWindow) {
|
|
try {
|
|
subWindow.close();
|
|
} catch(err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.handleWindowMessage = function(evt) {
|
|
var msg = evt.data;
|
|
if (msg.event === "mouseEnter") {
|
|
options.messageMouseEnter(msg.id);
|
|
} else if (msg.event === "mouseLeave") {
|
|
options.messageMouseLeave(msg.id);
|
|
} else if (msg.event === "mouseClick") {
|
|
options.messageSourceClick(msg.id);
|
|
} else if (msg.event === "clear") {
|
|
options.clear();
|
|
}
|
|
};
|
|
window.addEventListener('message',this.handleWindowMessage);
|
|
},
|
|
onpaletteremove: function() {
|
|
RED.comms.unsubscribe("debug",this.handleDebugMessage);
|
|
RED.sidebar.removeTab("debug");
|
|
RED.events.off("workspace:change", this.refreshMessageList);
|
|
window.removeEventListener("message",this.handleWindowMessage);
|
|
RED.actions.remove("core:show-debug");
|
|
|
|
delete RED._debug;
|
|
},
|
|
oneditprepare: function() {
|
|
$("#node-input-typed-complete").typedInput({types:['msg', {value:"full",label:RED._("node-red:debug.msgobj"),hasValue:false}]});
|
|
if (this.complete === "true" || this.complete === true) {
|
|
// show complete message object
|
|
$("#node-input-typed-complete").typedInput('type','full');
|
|
} else {
|
|
var property = (!this.complete||(this.complete === "false")) ? "payload" : this.complete+"";
|
|
$("#node-input-typed-complete").typedInput('type','msg');
|
|
$("#node-input-typed-complete").typedInput('value',property);
|
|
}
|
|
$("#node-input-typed-complete").on('change',function() {
|
|
if ($("#node-input-typed-complete").typedInput('type') === 'msg' &&
|
|
$("#node-input-typed-complete").typedInput('value') === ''
|
|
) {
|
|
$("#node-input-typed-complete").typedInput('value','payload');
|
|
}
|
|
});
|
|
},
|
|
oneditsave: function() {
|
|
var type = $("#node-input-typed-complete").typedInput('type');
|
|
if (type === 'full') {
|
|
$("#node-input-complete").val("true");
|
|
} else {
|
|
$("#node-input-complete").val($("#node-input-typed-complete").typedInput('value'));
|
|
}
|
|
}
|
|
|
|
});
|
|
})();
|
|
</script>
|