I have an HTTP response that I would like to take a closer look at. Both the debug node and the context tab truncate the string to 1415 characters. Can I somehow get the value out of the editor or do I have to write it to a file or provide it by HTTP or something like that?
This is a limit in settings.js
// The maximum length, in characters, of any message sent to the debug sidebar tab
debugMaxLength: 1000,
It can be changed but may cause a slowdown in the browser, so it may be better to write it to a file to inspect it.
You can send the value to console in the debug node config, were it will not be truncated .
Or
Here is a subflow where you can send the msg or any property of it to a separarte browser window, where you can copy it if you wish.
4 Likes
That is very, very clever. I'm going to make use of it in some of my more complex flows. Thanks.
FYI
Just tried out your subflow in my 3.1.0-beta-4 windows instance and I got this error and an unconnected msg in the browser tab
I then tried it out on my main 3.0.2 running on Pi2 and it worked lovely
When 3.1.0 is released i will look to see if issue remains. Cheers for heads up. Looks like websocket node may have some breaking changes.
I wrote a uibuilder version at some point - based on this clever sub-flow.
[{"id":"38dea932ad8bf5b0","type":"group","z":"ff1a7711.244f48","name":"uibuilder Node-RED debug page - with full output and copy (Read my description for details)","style":{"label":true,"fill":"#ffefbf","fill-opacity":"0.34","color":"#000000"},"nodes":["b2b9cd88db08056f","30f917ba22b7601a","465991cb13575bdc","2dcf170369271854","85e33c87a851fd7b","cd117dec98696547"],"env":[{"name":"debug_name","value":"Debug","type":"str"},{"name":"debug_property","value":"msg","type":"str"}],"x":34,"y":319,"w":578,"h":142,"info":"A simple debug output page using uibuilder.\r\n\r\nNote that this group has 2 defined environment\r\nvariables. \r\n\r\n`debug_name` and `debug_property`. These\r\ncan also be overridden using msg properties\r\nof the same name.\r\n\r\nSimple send any message to the `link-in` node\r\nin this group and view a formatted version of\r\nthe message on the debug web page.\r\n\r\nThe web page has pause/resume buttons and \r\nclear all entries buttons.\r\n\r\nEach entry on the page can be copied to the \r\nclipboard using the ❒ button. Or the entry \r\ncan be deleted using the ❌ button.\r\n\r\nThe formatted output for each entry appears in \r\na scrollable box. You can grab the bottom-right\r\ncorner and expand the box manually.\r\n\r\nUnlike Node-RED's debug panel, ALL of the msg\r\nobject is included in the output - up to the \r\nmax limit of the Socket.IO client. If you need\r\nto extend the limit, you can do so in the \r\nuibuilder settings in the `settings.js` file.\r\n\r\nHowever, as with any web app, be wary of How\r\nmuch data you keep in the browser window. If \r\nyou let it get too big, your browser will slow\r\ndown and eventually break."},{"id":"b2b9cd88db08056f","type":"function","z":"ff1a7711.244f48","g":"38dea932ad8bf5b0","name":"","func":"// What msg property to debug (or the whole msg)\nconst debug_property = msg.debug_property || env.get('debug_property') || 'msg'\n// Each property part as an array. e.g `msg._ui` becomes ['msg','_ui']\nlet debug_property_array = []\n// Record any errors\nlet err = []\n\nlet dt = (new Date()).toLocaleString()\n\ntry {\n debug_property_array = RED.util.normalisePropertyExpression(debug_property)\n // node.send([null, {debug_property, debug_property_array}])\n} catch (e) {\n node.warn(e.message)\n err.push(e.message)\n}\n\nlet msg1 = {data: null}\nif (debug_property === 'msg') {\n // Get the whole msg\n msg1.data = RED.util.cloneMessage(msg)\n} else {\n try {\n // Try to get a specific msg property if requested\n let ans = RED.util.getMessageProperty(msg, debug_property)\n if (ans === undefined) {\n err.push(`Message property not found. '${debug_property}'`)\n } else {\n msg1.data = ans\n }\n } catch(e) {\n // Else get the whole msg\n msg1.data = RED.util.cloneMessage(msg)\n // but remove the debug meta data if it was passed in on the orig msg\n delete msg1.data.debug_name\n delete msg1.data.debug_property\n delete msg1.data.pass_debug_property\n delete msg1.data.debug_array\n err.push(e.message)\n }\n}\n\nmsg1.topic = msg.topic\nmsg1.errors = err\nmsg1.debug_property = debug_property\nmsg1.debug_property_array = debug_property_array\n// Optional msg name - will default to original msg id\nmsg1.debug_name = msg.debug_name || env.get(\"debug_name\") || msg._msgid || \"name error\"\nmsg1.debug_dt = dt\n\nreturn [msg1,msg]","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":220,"y":360,"wires":[["30f917ba22b7601a"],[]],"inputLabels":["msg to debug"],"outputLabels":["debug msg","Original msg"]},{"id":"30f917ba22b7601a","type":"uibuilder","z":"ff1a7711.244f48","g":"38dea932ad8bf5b0","name":"","topic":"","url":"debug","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"6.5.0","showMsgUib":false,"credentials":{},"x":480,"y":360,"wires":[[],[]]},{"id":"465991cb13575bdc","type":"link in","z":"ff1a7711.244f48","g":"38dea932ad8bf5b0","name":"DEBUG","links":["e1e4747c8aa0481c"],"x":75,"y":360,"wires":[["b2b9cd88db08056f"]]},{"id":"2dcf170369271854","type":"comment","z":"ff1a7711.244f48","g":"38dea932ad8bf5b0","name":"index.html","info":"<!doctype html>\n<html lang=\"en\">\n\n<head>\n\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <link rel=\"icon\" href=\"../uibuilder/images/node-blue.ico\">\n\n <title>Debug - Node-RED uibuilder</title>\n <meta name=\"description\" content=\"Node-RED uibuilder - Debug\">\n\n <!-- Your own CSS (defaults to loading uibuilders css)-->\n <link type=\"text/css\" rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->\n <script defer src=\"../uibuilder/uibuilder.iife.min.js\"></script>\n <script defer src=\"./index.js\">\n /* OPTIONAL: Put your custom code in that */\n </script>\n <!-- #endregion -->\n\n</head>\n\n<body class=\"uib\">\n <h1 class=\"with-subtitle\">uibuilder - Debug</h1>\n <div role=\"doc-subtitle\">Using the IIFE library.</div>\n\n <div id=\"header\">\n <button id=\"pauser1\" value=\"pause\" onclick=\"doPause(event)\">Pause</button>\n <button onclick=\"doClear(event)\">Clear All</button>\n <button onclick=\"doToggle(event)\">Toggle All</button>\n </div>\n\n <div id=\"more\">\n <!-- '#more' is used as a parent for dynamic HTML content in examples -->\n </div>\n\n <div id=\"footer\">\n <button id=\"pauser2\" value=\"pause\" onclick=\"doPause(event)\">Pause</button>\n <button onclick=\"doClear(event)\">Clear All</button>\n <button onclick=\"doToggle(event)\">Toggle All</button>\n </div>\n\n</body>\n\n</html>","x":120,"y":420,"wires":[]},{"id":"85e33c87a851fd7b","type":"comment","z":"ff1a7711.244f48","g":"38dea932ad8bf5b0","name":"index.js","info":"// uibuilder.logLevel = 2 // info\n\nconst elPaused1 = document.getElementById(\"pauser1\") || { innerText: '' }\nconst elPaused2 = document.getElementById(\"pauser2\") || { innerText: '' }\nlet paused = false\nlet msgCount = 0\n\n// Stop/resume inbound msgs\nfunction doPause(event) {\n if (paused === true) {\n elPaused1.innerText = \"Pause\"\n elPaused2.innerText = \"Pause\"\n paused = false\n uibuilder.log('info', 'uibuilder.debug', 'Visual debug messages flowing')\n } else {\n elPaused1.innerText = \"Resume\"\n elPaused2.innerText = \"Resume\"\n paused = true\n uibuilder.log('info', 'uibuilder.debug', 'Visual debug messages paused')\n }\n}\n\n// Clears all debug entries\nfunction doClear(event) {\n document.querySelector('#more').textContent = ''\n}\n\n// Toggle Hide/Show all syntax-highlight boxes\nfunction doToggle(event) {\n const els = event.target.parentElement.parentElement.querySelectorAll('pre.compact.syntax-highlight')\n els.forEach( el => {\n if (el.offsetWidth > 0) el.style.display = 'none'\n else el.style.display = 'block'\n })\n}\n\n// Copy the selected debug entry text to the browser OS clipboard\nfunction cpy(event) {\n const elToCopy = event.target.parentElement.parentElement.querySelector('pre')\n window.prompt(\"Copy to clipboard: Ctrl+C, Enter\", elToCopy.innerText)\n}\n// Remove the selected debug entry\nfunction del(event) {\n event.target.parentElement.parentElement.remove()\n}\n// Toggle hide/show syntax-highlight for selected debug entry\nfunction toggle(event) {\n const el = event.target.parentElement.parentElement.querySelector('pre')\n if (el.offsetWidth > 0) el.style.display = 'none'\n else el.style.display = 'block'\n}\n\nuibuilder.onChange('msg', (msg) => {\n // console.log('DEBUG msg', msg)\n\n if (paused === true || msg._ui) return\n\n ++msgCount\n\n // use uibuilder's low-code capability to build the output structure for the new debug entry\n const toAdd = [{\n method: 'add',\n components: [\n {\n type: 'article',\n parent: '#more',\n position: 'first',\n id: `dbg_${msgCount}`,\n attributes: {\n class: 'dbg',\n },\n components: [\n {\n type: 'div',\n slot: `#${msgCount} | ${msg.debug_name} | ${msg.debug_dt} | <i title=\"msg property\">${msg.debug_property}</i> | <button title=\"copy\" class=\"cbtn\" onclick=\"cpy(event)\"> 📋 </button> <button title=\"toggle\" class=\"cbtn\" onclick=\"toggle(event)\"> ⬇️ </button> <button title=\"delete\" class=\"cbtn fr\" onclick=\"del(event)\"> 🗑️ </button>`,\n },\n ],\n }\n ],\n\n }]\n\n // If there are errors, output a list of them\n if (msg.errors.length > 0) {\n toAdd[0].components[0].components.push({\n type: 'div',\n slot: `<p class=\"error\">${msg.errors.join('</p><p class=\"error\">')}</p>`\n })\n } else {\n // otherwise output the msg.data highlighted\n toAdd[0].components[0].components.push({\n type: 'pre',\n attributes: {\n class: 'compact syntax-highlight',\n },\n // Formates the data using a simple JSON colour formatter\n slot: uibuilder.syntaxHighlight(msg.data)\n })\n }\n\n uibuilder.ui(toAdd)\n})\n","x":250,"y":420,"wires":[]},{"id":"cd117dec98696547","type":"comment","z":"ff1a7711.244f48","g":"38dea932ad8bf5b0","name":"index.css","info":"/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.css`\n * This version auto-adjusts for light/dark browser settings but might not be as complete.\n */\n@import url(\"../uibuilder/uib-brand.css\");\n\n#header {\n margin-bottom: 0;\n padding-bottom: .5em;\n border-bottom: 1px solid var(--surface5);\n}\n#footer {\n margin-top: 1em;\n padding-top: .5em;\n border-top: 1px solid var(--surface5);\n}\n.dbg {\n border: 1px solid var(--surface5);\n padding: 0.2rem 0.5rem;\n margin: 0;\n}\n.cbtn {\n padding: 2px 5px;\n border-radius: 0;\n background: inherit;\n margin: 2px;\n}\n.compact {\n margin: 0;\n padding-top: 0.2rem;\n padding-bottom: 0.2rem;\n}\n.fr {\n float: right;\n}","x":380,"y":420,"wires":[]}]
Just did a little exploring and for some reason - there's no code in the function node
Code is their on the working Pi 3.0.2 one
[edit] I've found out I don't seem able to type code into ANY function node on by 3.1.0-beta-4 
so I'll go a and report that on its thread
The no-code issue is fixed (clash with new FlowFlow dashboard) but still getting the missing server config error message and not connected in the browser tab
[edit} I removed the FF dashboard module completely (and restarted NR) but made no difference
Did you refresh the browser
I have now but no difference
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
