node-red-contrib-msginspector 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rpostkg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# node-red-msginspector
+
+A Node-RED package that aims to be a compromise between the debug node and the node-red-debugger package.
+
+## Features
+
+Adds a single node (msginspector) that acts as a drop-in solution for checking incoming messages in a flow, while also letting them pass through to the next node without any changes.
+The node displays the message type, topic and the payload itself. There are two ways to display the information:
+ - Right above the node (fancy, slightly janky, informative)
+ - Inline (underneath the node, more native but also way way more limiting)
+
+The fancy display can be toggled off in the node's settings.
+
+## Issues
+
+The aforementioned fancy display goes over some of the UI elements of node red. Not great but not annoying enough to bother fixing.
+
+Due to the way the fancy display works, it updates at a set interval, which will make it look off when you're panning around the flows. Once again it's not big enough of a deal for myself personally.
+
+## Why?
+
+The debug output tab gets messy at times, node-red-debugger is sometimes too in-depth and can be frustrating to use if you have a constant stream of messages. This is the middle ground
+
+**You probably shouldn't use this in prod or anywhere for that matter. It's only public for ease of installation for myself and I'm content with what stage things are at right now.**
+
+## License
+
+MIT I guess

package/msginspector/icons/icon-msginspector.svg

@@ -0,0 +1 @@
+<svg viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-magnifier" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>1142</title> <defs> </defs> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(1.000000, 0.000000)" fill="#f6f5f4"> <path d="M16,5.954 C16,2.665 13.317,0 10.009,0 C6.698,0 4.016,2.665 4.016,5.954 C4.016,9.241 6.699,11.906 10.009,11.906 C13.317,11.906 16,9.241 16,5.954 L16,5.954 Z M4.934,6.019 C4.934,3.213 7.213,0.943 10.026,0.943 C12.837,0.943 15.114,3.214 15.114,6.019 C15.114,8.823 12.837,11.094 10.026,11.094 C7.213,11.094 4.934,8.822 4.934,6.019 L4.934,6.019 Z" class="si-glyph-fill"> </path> <path d="M1.822,15.964 L0,14.142 L4.037,10.104 C4.037,10.104 4.133,10.869 4.617,11.351 C5.099,11.835 5.859,11.927 5.859,11.927 L1.822,15.964 L1.822,15.964 Z" class="si-glyph-fill"> </path> <path d="M13.398,5.073 C13.398,5.645 13.838,5.429 13.838,4.634 C13.838,3.264 12.729,2.154 11.359,2.154 C10.562,2.154 10.347,2.593 10.92,2.593 C12.29,2.593 13.398,3.704 13.398,5.073 L13.398,5.073 Z" class="si-glyph-fill"> </path> </g> </g> </g></svg>

package/msginspector/msginspector.html

@@ -0,0 +1,245 @@
+<script type="text/html" data-template-name="msginspector">
+  <div class="form-row">
+    <label for="node-input-name">
+      <i class="fa fa-tag"></i> Name
+    </label>
+    <input type="text" id="node-input-name" placeholder="Message Inspector" />
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-showBubble">
+      <i class="fa fa-eye"></i> Show Bubble
+      <span style="font-size:0.8em; color:#666; margin-left:8px;">(Display message above node)</span>
+    </label>
+    <input
+      type="checkbox"
+      id="node-input-showBubble"
+      checked
+      style="display:inline-block; width:auto; vertical-align:top;"
+    />
+  </div>
+
+  <div class="form-tips" style="font-size:0.83em; color:#666; margin-top:8px;">
+    <i class="fa fa-info-circle"></i> Displays comprehensive message information with a minimalist speech bubble above the node.
+  </div>
+</script>
+
+<style>
+  .msginspector-bubble {
+    position: fixed;
+    background: #fff;
+    border: 2px solid #2D9596;
+    border-radius: 8px;
+    padding: 0;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 11px;
+    color: #333;
+    width: max-content;
+    max-width: 350px;
+    z-index: 9999;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    pointer-events: auto;
+    transform: translate(-50%, -100%) translateY(-10px);
+    transition: opacity 0.2s ease-out;
+    display: none;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .msginspector-bubble-content::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .msginspector-bubble-content::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  .msginspector-bubble-content::-webkit-scrollbar-thumb {
+    background: #2D9596;
+    border-radius: 4px;
+  }
+
+  .msginspector-bubble-content::-webkit-scrollbar-thumb:hover {
+    background: #247a7b;
+  }
+
+  .msginspector-bubble::after {
+    content: "";
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    margin-left: -10px;
+    border-width: 10px 10px 0 10px;
+    border-style: solid;
+    border-color: #2D9596 transparent transparent transparent;
+  }
+
+  .msginspector-bubble-header {
+    background: #2D9596;
+    color: #fff;
+    padding: 6px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 10px;
+    letter-spacing: 0.5px;
+  }
+
+  .msginspector-bubble-content {
+    background: #fff;
+    padding: 10px;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 300px;
+    overflow-y: auto;
+    line-height: 1.4;
+    color: #333;
+  }
+
+  .msginspector-bubble-type-tag {
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-size: 9px;
+  }
+</style>
+
+<div id="msginspector-display" style="position: relative;"></div>
+
+<script type="text/html" data-help-name="msginspector">
+  <p>A Node-RED node that displays comprehensive message information with a visual bubble above the node.</p>
+  
+  <h3>Features</h3>
+  <ul>
+    <li>Shows all message properties in a collapsible format</li>
+    <li>Displays message type, topic, and payload</li>
+    <li>Minimalist speech bubble design</li>
+    <li>Configurable to show/hide bubble display</li>
+  </ul>
+  
+  <h3>Usage</h3>
+  <p>Drag this node into your flow to inspect messages passing through. The bubble will display:</p>
+  <ul>
+    <li>Message type (string, number, object, etc.)</li>
+    <li>Topic (if present)</li>
+    <li>Payload content</li>
+    <li>Custom properties in collapsible sections</li>
+  </ul>
+  
+  <h3>Formatting</h3>
+  <p>Payloads and properties are displayed using JSON formatting for readability. Complex nested structures are automatically handled.</p>
+</script>
+
+<script type="text/javascript">
+  RED.nodes.registerType("msginspector", {
+    category: "debug",
+    color: "#2D9596",
+    defaults: {
+      name: { value: "Message Inspector" },
+      showBubble: { value: true }
+    },
+    inputs: 1,
+    outputs: 1,
+    icon: "icon-msginspector.svg",
+    label: function () {
+      return this.name || "Message Inspector";
+    },
+    labelStyle: function () {
+      return this.name ? "node_label_italic" : "";
+    }
+  });
+</script>
+
+<script type="text/javascript">
+  (function () {
+    const bubbles = {};
+
+    RED.comms.subscribe("msginspector:update", function (topic, data) {
+      const nodeId = data.id;
+      const node = RED.nodes.node(nodeId);
+      if (!node) return;
+
+      let bubble = bubbles[nodeId];
+      if (!data.showBubble && bubble) {
+        bubble.remove();
+        delete bubbles[nodeId];
+        return;
+      }
+      if (!data.showBubble) return;
+
+      if (!bubble) {
+        bubble = document.createElement("div");
+        bubble.className = "msginspector-bubble";
+        bubble.id = "msginspector-bubble-" + nodeId;
+        bubble.style.opacity = "0";
+        document.body.appendChild(bubble);
+        bubbles[nodeId] = bubble;
+        requestAnimationFrame(() => bubble.style.opacity = "1");
+      }
+
+      const header = `<div class="msginspector-bubble-header">
+        <span>${data.topic || "INSPECTOR"}</span>
+        <span class="msginspector-bubble-type-tag">${data.type}</span>
+      </div>`;
+
+      const contentDiv = document.createElement("div");
+      contentDiv.className = "msginspector-bubble-content";
+      contentDiv.textContent = data.content;
+
+      bubble.innerHTML = header;
+      bubble.appendChild(contentDiv);
+
+      // Position the bubble
+      updateBubblePosition(node, bubble);
+    });
+
+    function updateBubblePosition(node, bubble) {
+      if (!node || !bubble) return;
+
+      const nodeElement = document.getElementById(node.id);
+      if (!nodeElement) {
+        bubble.style.display = "none";
+        return;
+      }
+
+      const rect = nodeElement.getBoundingClientRect();
+
+      // If the node is off-screen, hide the bubble
+      if (rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth) {
+        bubble.style.display = "none";
+        return;
+      }
+
+      bubble.style.display = "flex";
+      bubble.style.left = (rect.left + rect.width / 2) + "px";
+      bubble.style.top = rect.top + "px";
+    }
+
+    // Clean up when node is removed
+    RED.events.on("nodes:remove", function (node) {
+      if (bubbles[node.id]) {
+        bubbles[node.id].remove();
+        delete bubbles[node.id];
+      }
+    });
+
+    // Update positions on scroll/zoom/drag
+    setInterval(() => {
+      for (const nodeId in bubbles) {
+        const node = RED.nodes.node(nodeId);
+        const bubble = bubbles[nodeId];
+        if (node && bubble) {
+          if (node.showBubble === false || node.showBubble === "false") {
+            bubble.style.display = "none";
+            continue;
+          }
+          updateBubblePosition(node, bubble);
+        }
+      }
+    }, 50);
+
+  })();
+</script>

package/msginspector/msginspector.js

@@ -0,0 +1,134 @@
+"use strict";
+
+module.exports = function (RED) {
+  function msginspectorNode(config) {
+    const node = this;
+    RED.nodes.createNode(this, config);
+
+    this.showBubble = config.showBubble !== undefined ? config.showBubble : true;
+    this.messageLimit = config.messageLimit || 10;
+
+    node.on("input", function (msg, send, done) {
+      try {
+        if (msg === null || msg === undefined) {
+          node.warn("Received null or undefined message");
+          send(msg);
+          done();
+          return;
+        }
+
+        node.lastMessage = {
+          message: msg,
+          timestamp: new Date().toISOString(),
+          nodeId: node.id
+        };
+
+        updateBubble();
+
+        send(msg);
+
+      } catch (error) {
+        node.error(`Error processing message: ${error.message}`, msg);
+        send(msg);
+      }
+
+      done();
+    });
+
+    node.on("close", function (removed, done) {
+      node.status({});
+      done();
+    });
+
+    function updateBubble() {
+      if (!node.lastMessage) return;
+
+      const message = node.lastMessage.message;
+      const displayContent = formatMessage(message);
+
+      // Publish to client for the rich bubble display
+      if (node.showBubble) {
+        RED.comms.publish("msginspector:update", {
+          id: node.id,
+          content: displayContent,
+          type: typeof message.payload,
+          topic: message.topic || "",
+          showBubble: node.showBubble
+        });
+      }
+
+      // Restore useful status for the default display
+      const maxLength = 120;
+      let statusText = displayContent.replace(/\n\n/g, " | ").replace(/\n/g, " ");
+      if (statusText.length > maxLength) {
+        statusText = statusText.substring(0, maxLength) + "...";
+      }
+
+      node.status({
+        fill: "green",
+        shape: "dot",
+        text: statusText
+      });
+    }
+
+    function formatMessage(msg) {
+      if (!msg) return "No message";
+
+      const formatValue = (val, indent = 0) => {
+        const indentStr = "  ".repeat(indent);
+
+        if (val === null || val === undefined) return "null";
+        if (typeof val === "string") return `"${val}"`;
+        if (typeof val === "boolean") return val.toString();
+
+        try {
+          const str = JSON.stringify(val, null, 2);
+          if (str === "{}" && typeof val === "object") return "object";
+          if (str === "[]" && Array.isArray(val)) return "array";
+          return str;
+        } catch (e) {
+          return String(val);
+        }
+      };
+
+      const getTypeName = (obj) => {
+        if (obj === null) return "null";
+        if (Array.isArray(obj)) return `array[${obj.length}]`;
+        return typeof obj;
+      };
+
+      const msgType = getTypeName(msg);
+      const msgTopic = msg.topic ? msg.topic : "no topic";
+      const msgPayload = formatValue(msg.payload);
+
+      let properties = "";
+      if (typeof msg === "object" && msg !== null) {
+        const props = Object.keys(msg)
+          .filter(key => key !== "payload" && key !== "topic")
+          .map(key => {
+            const val = msg[key];
+            return `${key}: ${formatValue(val, 1)}`;
+          })
+          .join("\n");
+
+        if (props) {
+          properties = props;
+        }
+      }
+
+      let output = `Type: ${msgType}\n`;
+      output += `Topic: ${msgTopic}\n`;
+      output += `Payload: ${msgPayload}`;
+
+      if (properties) {
+        output += `\n\nProperties:\n${properties}`;
+      }
+
+      return output;
+    }
+
+    updateBubble();
+  }
+
+  RED.nodes.registerType("msginspector", msginspectorNode);
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "node-red-contrib-msginspector",
+  "version": "1.0.0",
+  "description": "A node that displays incoming message information with a visual display above the node.",
+  "author": "rpostkg <190353914+rpostkg@users.noreply.github.com>",
+  "license": "MIT",
+  "files": [
+    "msginspector/",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rpostkg/nr-msginspector.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rpostkg/nr-msginspector/issues"
+  },
+  "homepage": "https://github.com/rpostkg/nr-msginspector#readme",
+  "keywords": [
+    "node-red",
+    "inspector",
+    "debug",
+    "message"
+  ],
+  "node-red": {
+    "version": ">=3.0.0",
+    "nodes": {
+      "msginspector": "msginspector/msginspector.js"
+    }
+  },
+  "engines": {
+    "node": ">=14.14"
+  }
+}