Create a new flow in Node-Red by importing the following code:
[{"id":"5d251d29.c95494","type":"http in","name":"","url":"/debug","method":"get","x":83.5,"y":900,"z":"7f7e9fdc.66f4e8","wires":[["3d2ba73.d5f8858"]]},{"id":"90fdbfab.d378e8","type":"template","name":"output_template","field":"payload","format":"handlebars","template":"<!DOCTYPE html> \n<html>\n<head>\n\t<title>{{payload.pgTitle}}</title>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<meta charset=\"utf-8\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n\t{{! Supports old browsers AND detects mobile browsers: install via Bower }}\n\t<script src=\"/bower_components/modernizer/modernizr.js\"></script>\n\t<style>\n\t body {font-family:sans-serif;font-size:93%;}\n\t #output >section >p {color:silver;font-size:83%;}\n\t #output >section >pre {font-family:\"Lucida Console\", monospace;}\n\t</style>\n</head><body>\n <h1>Node-Red Debug Page</h1>\n <div id=\"output\"></div>\n \n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></script>\n <script src=\"/js/jquery.animate-shadow-min.js\"></script>\n {{! Load mqtt.js to get MQTT over web services }}\n {{! @see http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/plain/src/mqttws31.js }}\n <script src=\"/js/mqttws31.js\"></script>\n {{! Load startup script }}\n {{{payload.script1}}}\n</body>\n</html>","x":424,"y":900,"z":"7f7e9fdc.66f4e8","wires":[["463b6e68.e4a9b"]]},{"id":"3d2ba73.d5f8858","type":"template","name":"script1 (ws)","field":"payload.script1","format":"handlebars","template":"<script>\nvar mqttStart = function() {\n\t// @see http://www.eclipse.org/paho/files/jsdoc/symbols/Paho.MQTT.Client.html\n\t\n\tvar reconnectTimeout = 2000; \n\t\n\t// Create a client instance\n\tvar mqtt = new Paho.MQTT.Client( location.hostname, 9001, \"web_\" + parseInt(Math.random() * 100, 10) );\n\n\t// @see http://www.eclipse.org/paho/files/jsdoc/symbols/Paho.MQTT.Client.html#connect\n\tvar options = {\n\t\ttimeout: 3,\n\t\t//useSSL: useTLS,\n\t\tcleanSession: true,\n\t\tonSuccess: onConnect,\n\t\tonFailure: onConnectionLost\n\t};\n\t// set callback handlers\n\tmqtt.onConnectionLost = onConnectionLost;\n\tmqtt.onMessageArrived = onMessageArrived;\n\n\t// connect the client\n\tmqtt.connect(options);\n\n\t// called when the client connects\n\tfunction onConnect() {\n\t\t// Once a connection has been made, make a subscription and send a message.\n\t\tconsole.log(\"onConnect\");\n\n \t// Subscribe to required msgs\n \tmqtt.subscribe(\"DEBUG/#\");\n\t\t\n\t\t// Send something (test)\n\t\tvar message = new Paho.MQTT.Message(\"Hello\");\n\t\tmessage.destinationName = \"/World\";\n\t\tmqtt.send(message); \n\t}\n\n\t// called when the client loses its connection\n\tfunction onConnectionLost(responseObject) {\n\t\t$('#status').val(\"Connection failed or lost: \" + responseObject.errorMessage + \" (code: \" + responseObject.errorCode + \"). Retrying\");\n\t\tif (responseObject.errorCode !== 0) {\n\t\t\tconsole.log(\"onConnectionLost:\"+responseObject.errorMessage);\n\t\t}\n\t\tsetTimeout(mqttStart, reconnectTimeout);\n\t}\n\n\t// called when a message arrives\n\tfunction onMessageArrived(message) {\n\t\t//console.log(\"onMessageArrived: \" + message.payloadString + \", From: \" + message.destinationName + \" (QoS: \" + message.qos +\", Retained: \" + message.retained + \")\");\n console.log(\"MQTT Msg Recieved: \" + message.destinationName + \" (QoS: \" + message.qos +\", Retained: \" + message.retained + \")\");\n\n \t// Get the topic\n \tvar topic = message.destinationName.replace(/^DEBUG\\//,'');\n \t// Make the topic ID friendly by replacing / with _ & whitespace with _\n \tvar topicId = topic.replace(/\\/|\\s/g,'_');\n \tconsole.log( \"Target Section ID: \" + topicId );\n\n \t// Create a timestamp for the latest update\n \tvar ts = new Date();\n \t// Try to parse JSON input, assume string if this fails\n \tvar myobj = '';\n \ttry {\n \t myobj = JSON.stringify(JSON.parse(message.payloadString),null,2);\n \t} catch(e) {\n \t myobj = message.payloadString;\n \t}\n\n \t// We want an output for EACH TOPIC - check if container exists, if not create it\n \tvar myDivs = $('#output').children('#' + topicId);\n if(myDivs.length === 0){\n myDivs = $('<section id=\"' + topicId + '\"><h2>' + topic + '</h2><p></p><pre></pre></div>')\n .appendTo('#output');\n }\n // Now add the content\n $('#' + topicId + ' >p').\n fadeOut().\n text('Last Update: ' + ts).stop().\n css('boxShadow', '0 0 30px #FF5500').\n fadeIn().\n animate({boxShadow: '0 0 0 #000'});\n $('#' + topicId + ' >pre').\n text( myobj );\n \t//html( syntaxHighlight(JSON.parse(message.payloadString)) );\n \n\t}\n}; // --- End of function mqttStart --- //\n\nfunction syntaxHighlight(json) {\n if (typeof json != 'string') {\n json = JSON.stringify(json, undefined, 2);\n }\n json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n return json.replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, function (match) {\n var cls = 'number';\n if (/^\"/.test(match)) {\n if (/:$/.test(match)) {\n cls = 'key';\n } else {\n cls = 'string';\n }\n } else if (/true|false/.test(match)) {\n cls = 'boolean';\n } else if (/null/.test(match)) {\n cls = 'null';\n }\n return '<span class=\"' + cls + '\">' + match + '</span>';\n });\n};\n\n// Only kick things off when the whole document is loaded\n$( document ).ready(function() {\n\tmqttStart();\n});\n</script>","x":247.25,"y":900.25,"z":"7f7e9fdc.66f4e8","wires":[["90fdbfab.d378e8"]]},{"id":"3b62bfa1.1d22f8","type":"comment","name":"Debugging Page","info":"[Home Page](http://192.168.1.167:8000/debug)","x":98,"y":860,"z":"7f7e9fdc.66f4e8","wires":[]},{"id":"463b6e68.e4a9b","type":"http response","name":"","x":600,"y":900,"z":"7f7e9fdc.66f4e8","wires":[]}]