{"id":21340130,"url":"https://github.com/totallyinformation/node-red-example-debug","last_synced_at":"2025-07-12T14:33:06.587Z","repository":{"id":31199198,"uuid":"34759979","full_name":"TotallyInformation/node-red-example-debug","owner":"TotallyInformation","description":"Some example code to help with debugging Node-Red application flows","archived":false,"fork":false,"pushed_at":"2016-03-19T21:12:49.000Z","size":12,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-15T12:50:26.610Z","etag":null,"topics":["mqtt","node-red","webapp","websockets"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TotallyInformation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-28T22:47:53.000Z","updated_at":"2021-08-03T05:01:41.000Z","dependencies_parsed_at":"2022-09-09T07:20:59.741Z","dependency_job_id":null,"html_url":"https://github.com/TotallyInformation/node-red-example-debug","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotallyInformation%2Fnode-red-example-debug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotallyInformation%2Fnode-red-example-debug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotallyInformation%2Fnode-red-example-debug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotallyInformation%2Fnode-red-example-debug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TotallyInformation","download_url":"https://codeload.github.com/TotallyInformation/node-red-example-debug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225824977,"owners_count":17529905,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mqtt","node-red","webapp","websockets"],"created_at":"2024-11-22T00:49:22.582Z","updated_at":"2024-11-22T00:49:23.026Z","avatar_url":"https://github.com/TotallyInformation.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# node-red-example-debug\n\nThis is some example code to help with debugging Node-Red application flows.\n\nTo use it, you need a flow to output a webpage on \"/debug\", a subflow that outputs \nthe msg object to MQTT, an MQTT broker that supports access over websockets \n(e.g. Mosquitto compiled with websockets or Mosca) and access to JQuery, Paho (MQTT web client) and the\n[jquery-animate-shadow](http://www.bitstorm.org/jquery/shadow-animation/)\nplugin for consumption in the web page.\n\n- [Subflow](Web_Debug_Subflow.md). This adds a \"DEBUG/\" prefix to the msg.topic and outputs to MQTT.\n  ![web_debug_subflow](https://cloud.githubusercontent.com/assets/1591850/7382163/85713a06-ee03-11e4-959f-026a14b09309.png)\n- [Page Flow](Debug_Page_Flow.md). This listens for and outputs a web page on \"/debug\".\n  ![debug_page_flow](https://cloud.githubusercontent.com/assets/1591850/7382150/5bcb12b2-ee03-11e4-8903-1bc3e2619631.png)\n\nThe resulting web page will be initially blank except for a title. However, it will be listening for output\nfrom your MQTT broker on the \"DEBUG/#\" topic. Any recieved output will be dumped into an appropriate section element.\nEach unique topic will get it's own output that will be updated on reciept of a new message for that topic.\n\nSome JQuery animation magic can also be used to highlight which topic has just been updated.\n\nThe output of the message is formatted using the JavaScript JSON.stringify function if it is valid JSON, otherwise it is\ntreated as a simple string.\n\nYou have probably realised that the Page Flow could easily be simplified. It is this structure because I took it from another set of flows that I use to allow [dynamic form updates](https://github.com/TotallyInformation/node-red-example-liveupdates).\n\n## Dependencies\n\n- JQuery (Used from cdnjs in the code given)\n- jquery.animate-shadow-min.js, a JQuery library\n- [mqttws31.js](http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/plain/src/mqttws31.js), the Paho client library\n- I've also used modernizer.js to support older browsers and detect mobile browsers. This probably isn't needed.\n\n## Configuration\n\nThis example needs a few local files as shown in Dependencies above. You need to put these in a place that Express (the web server that Node-Red uses behind the scenes) will find them and serve them up a \"static\" files for you.\n\nTo do this, assuming you have the recommended install on a Raspberry Pi, create a folder:\n\n    /home/pi/.nodered/public\nAdjust things according to your installation. Put the static files such as mqttws31.js in that folder or a subfolder of it (I tend to split things up into `js`, `css` and `images` folders.\n\nThen edit the `settings.js` file that should be in `/home/pi/.nodered` unless you've moved things around. Add the following:\n\n    httpStatic: '/home/pi/.nodered/public',\n    \nYou can quickly test this is correct by putting a simple html file (e.g. `blah.html`) into the public folder and calling the URL `http://localhost:1880/blah.html`. You should see your html rendered into the browser.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotallyinformation%2Fnode-red-example-debug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftotallyinformation%2Fnode-red-example-debug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotallyinformation%2Fnode-red-example-debug/lists"}