Debugging a custom function node

[Bart Butenaers]

Hi everybody,

I started with Node-Red about two weeks ago.  To be able to troubleshoot errors, I have setup the experimental node-V8-inspector, and it works like a charm!  The Chrome developer tools shows all the available javascript files, allows to add breakpoints, watch variables, ...   This tool saved me a lot of headache already.

Today I have added a custom function node to a flow (containing my own javascript source).  I wanted to debug this custom javascript source code, however I cannot find it anywhere in Chrome developer tools.  I expected that Node-Red would have been generating some kind of js file, but (after executing a grep command) it looks to me that my source code is not stored in a .js file but instead in the .json file of my flow ...

Is there any way to debug a custom function node in Chrome developer tools?  I don't mean adding debug statements to my code, to write loggings to the debug console.

Thanks in advance !!!

Bart Butenaers

[Bart Butenaers]

I did some further investigation myself.  My conclusion is that it isn't possible to debug (in Chrome developer tools) Javascript code that has been put directly inside a Function not.  But I have never used Javascript before, so please give me feedback if I made wrong conclusions!

My test flow consists out of an Inject node that triggers a function node:

The Function node in turn contains my custom Javascript source code:

This is the source code that I would like to see in Chrome Developer Tools, so I could add breakpoints there for troubleshooting...

However only the installed nodes are displayed (which are real .js files on my server), not my custom code (which is stored in my flow .json file):

The only relevant stuff for me in this list, is the Javascript code of the Node-Red's core Function Node itself (since that wraps my custom code).  

Let's put a breakpoint in that 80-function.js file.

As soon as the first (Inject) node is triggered in the flow, the debugger halts at the breakpoint:

When inspecting the 'this' variable, we see that it contains my Javascript source code as a plain text string:

So at this point, Chrome isn't even aware that it is Javascript code.

At line 183 the entire string is evaluated (i.e. executed) at once, by the NodeJs virtual machine (vm.js).

To get around that is not possible, when looking at this thread.

So I'm afraid my debug story ends here.  No happy end this time ...

[Ben Hardill]

The content of a function node is executed on the backend not in the browser so you will not be able to use chrome's debug tools to debug it.

You can use done if the old school methods and use node.log/console.log which you can use to print out values. These will print to the Node-RED log on the backend

[Wesley Stam]

You could also just put your custom code in a separate .js file somewhere on the same system and require it in a node-red function node.

You could require it in the settings.js like: 'myModule:require('myModule');
or you could do 'require:require' in settings.js and use it directly in a function node like: 'context.global.require('myModule').

[Ben Hardill]

That still won't let Bart debug it in Chrome.

[Dave C-J]

you could try node-inspector - but it does run slow....

[Nicholas O'Leary]

This was covered in depth just a couple days ago on the list.

It is impossible to use the node debug tools within the function node. This is a known limitation of the VM module we use to run the function code.

You can use node inspector etc for everything else, but for the code inside a Function node you options are limited to console.logs and node.logs.

Nick

On Mon, 26 Dec 2016, 12:34 Dave C-J, <dce...@gmail.com> wrote:

you could try node-inspector - but it does run slow....

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CACXWFwL%2BLOza5bRw8f6WP1BiBWXGSyW802bCKitC%2BOC-R26Vng%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Bart Butenaers]

Hi Ben,

Indeed I can use the old school logging methods, but it would have been great if I could debug my custom code.  

About the Chrome debug tools: if you start node red the standard way, indeed -like you mention - you can only debug the client side javascript code (i.e. the UI code that is provided by the webserver on port 1880 by default).  However, when you start nodejs in debug mode, you can use Chrome also to debug server side Javascript code!  This is very handy if some of the nodes in the flow doesn't behave like you expected.  To accomplish server side debugging, you can either use the Node Inspector module (written in C), or the new experimental V8 inspector (build-in inside nodejs): in both cases Chrome developer tools will communicate with the node js server to debug the server side code (difference between both is explained in this blog).  I use the V8 inspector because it works out-of-the-box between nodejs and Chrome.

Steps to accomplish server side debugging (using V8 inspector):

• Start node-red in debug mode:   node --inspect /usr/lib/node_modules/node-red/red.js
• Copy the link that is being displayed now:

Debugger listening on port 9229.

Warning: This is an experimental feature and could change at any time.

To start debugging, open the following URL in Chrome:

    chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/6c9b3686-001e-42a4-86c7-6e77ae4bb097

• Paste this link in Chrome.  Remark: if Chrome is started on another computer in your LAN, the 127.0.0.1 in the link should be replaced by the ip-address of the device where node-red is running on.
• Now the developer tools will open automatically and Chrome will connect to port 9229 to communicate with the V8 debug protocol
• Open a javascript file and place breakpoints
• Now you can start debugging your node red flow nodes.

Kind regards,

Bart

[Bart Butenaers]

Hi Wesley,

last friday I also had the same brilliant idea to put my custom code inside a separate javascript file (which was included afterwards in my function node).  I thought indeed that my code would appear in Chrome developer tools as a separate file, where I could add breakpoints.  However, I ran into the same problems: A single string was executed on nodejs virtual machine.  Only difference was that the string didn't contain my custom code directly, but it contained my include instead.  But again, I couldn't add any breakpoints.

But I'm new to node-red, so perhaps I did something completely wrong!  Is this something you got working?  In that case, it would be great if you point me in the good direction to accomplish this.

Kind regards,

Bart Butenaers

[Bart Butenaers]

Hi Nick,

I (desperate) tried to find other solutions/workarounds last weekend, but since I'm a Javascript dummy I have not enough knowledge to get it done.

Another attempt

What I have tried to do:

• I found out that Chrome has a feature, that allows a piece of dynamic Javascript to appear as a file (where breakpoints can be set). 
• This can be done by adding a parser attribute to the dynamic Javascript code, which I have added to my function node:

• Now indeed the dynamicScript.js will appear in my developer tools, and I can put breakpoints in it:

 

• But I never arrive at that breakpoint ...

The weird thing is that the dynamicScript.js seems not to be called, it just seems evaluating my original code (but I can be mistaken):

Question

Since it seems there is no workaround to debug dynamic code that is executed by runInContext, perhaps it is possible to alter the function node.  Would it be possible/useful to add an extra checkbox to the function node 'execute in V8 debugger'.  In that case the function node would not execute the custom code via runInContext, but via something else that would allow the custom code to be debugged (e.g. runInDebugContext if that would solve it).  Currently the function nodes are awesome, but the more custom code are added to them, the more useful a debugging feature would be ...

Hope to hear from you again.

Kind regards,

Bart Butenaers

[Ben Hardill]

To be honest if you are at the stage where you have so much code in a function node that you need a debugger you should probably start to think about writing a custom node, it really isn't that hard and the instructions are on the docs site http://nodered.org/docs/creating-nodes/

[Bart Butenaers]

Hi Ben,

To be honest, I think you are absolute right ;-)  I'm going to write my custom nodes for complex stuff, so I can debug them easily using the V8 debugger.  For smaller tasks, I will use the Function node (which I can troubleshoot using simple logging statements).  Thanks a lot for pointing me in the right direction !!!

Kind regards,

Bart