How to test bug fix on local Node-Red installation?

Core Development
1

Hi,

I want to fix a bug and i cloned node-red from github.
Once I think the bug is fixed i want to test it first on my node-red installation.
However, I can’t find relevant file(s) in the installation. It’s spoken about ui-masonry.js.
The bug: https://github.com/node-red/node-red-dashboard/issues/249

Please, advise where/how in given installation i can copy the fix and test it?

Thank you.

2

I don’t know answer to your actual question but since that bug was fixed back in Nov 2017 then surely it must be in any version since then?

What is the actual problem your experiencing?

3

@cymplecy there have been recent reports of a similar issue remaining - and you’ll note that whilst there are some fixes associated with that issue, the issue itself remains open.

@igrowing if you want to test changes to the node-red-dashboard nodes, you should clone the node-red-dashboard project, not the node-red project. You can following the steps in the readme for how to clone and rebuild the nodes.

4

Hi Nick,

Some progress here with following your instructions: I can make changes in cloned dashboard project and build it with gulp on windows machine.

My next question is about debug.

  • How to print into console? (console.log() and console.warn() and log() don't work).
  • How to see regular log if it exists? (installed pm2, tried pm2 logs node-red and it crashes).
  • If these questions are useless for debug, what could you advise?

Thank you.

5

Debugging the dashboard is not "simple", but it can be done... but depends upon exactly which part you are trying to debug. Much of the logic of the ui nodes runs inside the node-red runtime server (so would output to the node-red console logs on the server host). The rest of the display/interaction logic is passed inside <script> tags to the browser, where you can see the logs using F12 to open the dev console.

The Chrome browser has the ability to connect to the runtime server and step through some of the code running there. But first you have to run node-red using the command line option --inspect. This outputs a url that you can paste into Chrome to connect to the server -- for example, I run this on my windows pc:

C:\NODE\node_red_dev> node --inspect ../node-red/red.js --version

Debugger listening on ws://127.0.0.1:9229/ad92d15c-5ae7-491d-ad50-f33d69a094a8
For help see https://nodejs.org/en/docs/inspector
18 Jul 13:51:25 - [info]

Welcome to Node-RED
===================

18 Jul 13:51:25 - [info] Node-RED version: v0.18.7-git
18 Jul 13:51:25 - [info] Node.js  version: v8.11.2
18 Jul 13:51:25 - [info] Windows_NT 10.0.17134 x64 LE
18 Jul 13:51:26 - [info] Loading palette nodes
18 Jul 13:51:28 - [warn] ------------------------------------------------------
18 Jul 13:51:28 - [warn] [node-red/rpi-gpio] Info : Ignoring Raspberry Pi specific node
18 Jul 13:51:28 - [warn] [node-red/tail] Not currently supported on Windows.
18 Jul 13:51:28 - [warn] ------------------------------------------------------
... etc ...

You can also put the javascript statement:

debugger;

inside your code -- and if there is a debugger attached when it hits that point, it should pause and wait for your input. Try opening the dev console (F12) and reload the dashboard.

If you prefer an IDE, I know Julian and others have documented various plugins for VSCode and Eclipse (I think). You may want to search the old google groups...

6

As states in original post:

So far, even brutal intentional destroy (expected total crash) in that file doesn't affect the result after compiling the code with gulp.
I tried just run gulp as stated in the "getting started". As well, I tried to run npm install of node-red-dashboard in according folder after gulp. Zero effect. Restarted node-red too, zero effect.

That was my guess too, therefore I asked:

I apologize for newbie dumb questions, these are my first steps into front-end. I see by code review where is the error and I know how to fix it. I just don't know how to build the project properly, and how to check the result. Any help or guidance in node.js environment is appreciated.

I'm trying to use MS VS Code over Windows at the moment, if this is important.

7

There was a nice example in google groups of using VS Code to debug a running node-red server from Julian earlier this year...

But if you have a local install of node-red-dashboard, and you "compile" it with gulp, but are seeing no changes when you reload the browser, then it sounds like your node-red server is not running with the local installed version. (I put "compile" in quotes, since nodejs is not compiled -- gulp is just packaging up all the html pages and js bits into files that the browser can digest).

One other trick I use to get non-minified .js files into the browser is (very briefly) described under the Developers section at the bottom of the dashboard homepage. Turns out that you can either delete the entire dist directory after running gulp, or just the index.html page that was generated. When the dashboard detects that page is missing, it uses the un-minified versions of the javascript files, so it's easier to step through them in the browser's dev console (F12). You should see something like this in your startup log, when it's set up properly:

Welcome to Node-RED
===================

13 Jul 11:49:46 - [info] Node-RED version: v0.18.7-git
13 Jul 11:49:46 - [info] Node.js  version: v8.11.2
13 Jul 11:49:46 - [info] Windows_NT 10.0.17134 x64 LE
13 Jul 11:49:47 - [info] Loading palette nodes
13 Jul 11:50:01 - [info] Dashboard version 2.9.5 started at /red/ui
13 Jul 11:50:05 - [warn] ------------------------------------------------------
13 Jul 11:50:05 - [warn] [node-red/rpi-gpio] Info : Ignoring Raspberry Pi specific node
13 Jul 11:50:05 - [warn] [node-red/tail] Not currently supported on Windows.
13 Jul 11:50:05 - [warn] ------------------------------------------------------
13 Jul 11:50:05 - [info] Settings file  : C:\NODE\node_red_ui\settings.js
13 Jul 11:50:05 - [info] HTTP Static    : C:\NODE\node_red_ui\public
13 Jul 11:50:05 - [info] User directory : C:\NODE\node_red_ui
13 Jul 11:50:05 - [warn] Projects disabled : editorTheme.projects.enabled=false
13 Jul 11:50:05 - [info] Flows file     : C:\NODE\node_red_ui\flows_ENTLAPTOP18.json
13 Jul 11:50:05 - [info] [Dashboard] Dashboard using development folder
13 Jul 11:50:05 - [info] Server now running at http://127.0.0.1:18806/admin/

Notice that second to last line... If you are not seeing that, then check that your npm link in your .node-red/node_modules directory is pointing to your local install of the dashboard.

8

You may also need to edit the appcache file (just change the date or version) for your browser client to see there is a new version and load it. Or in the browser debug tools there is also usually an option to turn off cache.