Debug JS code inside function node

FAQs
1

I had what started off as a simple function node where the code has gotten much more complex as I have been addressing a variety of corner cases. Unfortunately all of that complexity has hidden some bugs. I really need to be able to step through the code to sort it out. Ideally I would be able to use the Chrome debugger, but I found this from quite some time ago:

Is that an accurate sumation of what is possible?

I had been contemplating at some point actually building my own custom nodes and this may push me over the edge to do it, but I such a long to do list, I wasn't jumping at the chance to go there yet.

2

The function node runs server side not client side. While it is still possible (to use Chrome Dev tools) what I do is start node-red via VSCode then when I want to debug a function node, I write a debugger statement in the function and Vs code stops on that like & I can step through.

2 Likes
3

Which is more likely a smaller learning curve, going down the custom node path (which I will want to do eventually anyway) or learning how to start node-red via VSCode?

4

Yeah - double benefit.

I'll post a quick how to run up node-red in a second (gotta find the post I made - I refer back to it everytime i start out on a new machine)

5

Here is it...

And although the topic is about debuging a custom node - it works perfectly well for your requirement...

Just put debugger in your function node

e.g...

var x = msg.payload;
debugger
//...some complex code
//...some complex code
//...some complex code
//...some complex code
return msg;

and if its all working, VSCode will pause on the debugger line.

1 Like
6

Thanks, for the quick responses.

After quickly skimming this, I had one question. Does this require NR to be installed and running on the machine running VS Code?
Or perhaps would this work with the existing install by altering this line:
"program": "c:\path_to_npm_global\node-red\red.js"

I currently have NR running in a docker container on a NAS and am wondering if I am about to have more than one NR environment and have to start importing/exporting to get the environments to look similar.

7

Docker - that is a bit tougher.

You'll likely have to start node with --inspect flag and expose port 9229 to outside docker then use chrome dev tools

node --inspect path_to/node-red/red.js

I'm certain you could also attach VSCode (but I haven't done it myself)

Search the forum for "@BartButenaers docker debug" - i'm certain i seen something along the lines of debugging a docker install not too long ago.

PS, you should have stated docker earlier - :sigh: - might be worth updating the title to something like "Debug function node remotely when running node-red in docker"

8

The way I debug javascript for function nodes is by using REPL.IT

This gives you an online REPL environment that allows you to test and debug javascript code.
Sure, you may have to hard code a msg.payload or other variables you may be using in your flow, but after that it's pretty great, as you can made incremental changes in the repl, and simulate whatever permutations you cant without affecting your flow in node-red, and once you're happy, just copy your code over to your function node and deploy. Plus you get the power of the REPLs linting and formatting as well (right click in the editor).
I wish I had discovered it earlier!

9

I use REPL IT too (even posted some on this forum as proof of concepts)

I especially like it because it uses the monaco editor (same as VSCode) & gives you a full node environment.

However, you dont get node-red & debugging is mainly console.log

VSCode (or chrome developer tools) is the way to go (IMO)

1 Like
10

I will have to try the VS Code solution soon then!
Just so you know though, debugger works in repl.it as well. :slight_smile:

11

Of course it does - its client side (unlike a node-red function node that runs server side)

12

Heuh can you debug a function node? At the time being, I realised it wasn't possible because the javascript was passed by NodeJs to a sandbox as a single string, which 'evaluated' that string in a single statement. So that was my trigger to put my code in my first custom node, because that was easily to debug... But would be nice if it is possible now!

1 Like
13

Absolutely. The sandbox code is shown only but you can inspect the value of objects like flow and global and msg etc. Works a treat. I use it when I can't see the trees for the wood. Step through code, see where I messed up.

2 Likes
14

Hey Steve,
Thanks a lot for the tip :+1: :+1: :+1: :+1:

At the time being this was not possible. But seems that since NodeJs version 8.4.0 it is indeed possible to attach a remote debugger to a vm context. What a pity that I haven't tried it anymore meanwhile...

Here are the steps to debug a function node via the Chrome debugger:

  1. You need to configure ONCE the IP address of your Node-RED server, via chrome://inspect:

    image

    A. Click the 'Configure' button
    B. Enter <ip address Node-RED server>:9229
    C. Click the "Done" button

    Remark: if you are running Node-RED on multiple devices, you can specify here all their IP addresses. But I wouldn't do that because - when one of the Node-RED instances is not accessible - Chrome will keep trying to access it, resulting in long waiting times...

  2. Enter a debugger; statement in your function node code:

    image

  3. Start your Node-RED server in debug-mode (which means it is allowed to attach a debugger process), e.g. on Linux:

    node  --inspect=0.0.0.0  /usr/bin/node-red

    Remark: for those who don't know where there Node-RED has been installed, you can find it like this on Linux:

    image

    Remark: for those who want to debug the startup code of Node-RED, you need to use this command:

    node  --inspect=0.0.0.0 --inspect-brk  /usr/bin/node-red

  4. Node-RED will start now, and NodeJs allows a debugger process to attach:

    image

  5. Now Chrome should see that the debugger can be attached:

    image

    A. Chrome will show your server
    B. Chrome will show an "inspect" link

  6. After clicking the "inspect" link, a Chrome developer console window will open. You will arrive in the debugger at your function node:

    image
    image729Ă—340 68.8 KB

    Remark: it could be that the debugger stops at another debugger statement of another node (e.g. another developer forgot to remove a debugger statement). Just use F8 to unpause the debugger and let it run to the next debugger statement (or breakpoint).

  7. Now you can step through your code (via the navigation buttons on the top right), show content of variables (on the lower right), and so on...

    Remark: it is also possible to debug other nodes, by pressing Ctrl-P, and then selecting the node that you need:

    image

  8. Click on a line number to add a breakpoint, where your debugger needs to stop:

    image

Although Visual Studio code offers much more functionality, for lots of users it might be easier to start with the Chrome debugger I think ...

Have fun with debugging your function node!
Bart

7 Likes
15

I think we should move this to the FAQ category... really good stuff everyone ! Thanks

2 Likes
16

And how can I do that?
I assume it should be via the "wrench" button, but in all my posts there is only this option available:

image
image789Ă—201 9.48 KB

17

It has been done already :slight_smile:
But for people starting the topic with the pen icon on the first post that also allows to change title of the topic. (Since this is in FAQ, have some more FAQ)

1 Like
18

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.