Troubleshooting JS event handlers - bartbutenaers/node-red-contrib-ui-svg GitHub Wiki

Starting from version 2.1.0 this node allows you to apply custom Javascript event handlers. The Javascript code which you have specified, will be executed in the dashboard browser session, as soon as the specified event occurs.

This page offers some tips and tricks, to start troubleshooting when your custom Javascript event handler code doesn't behave like you expect.

:warning: Of course some Javascript knowledge is required, to avoid too much of troubles! When you are not able to solve your problem using the steps below, it is advised to create a new post on the Node-RED forum so people from the community can help you. Please don't post questions about your custom Javascript code as an issue in this repository!

Show browser events on the server

When it looks like your Javascript code is not executed at all, you can do a quick check whether the event occurs:

When that checkbox is checked, a entry will appear in the Debug sidebar for every event that will be triggered:

If no event is displayed when you expect it, there must be something wrong with your CSS selector...

Syntax errors in injected Javascript code

When the Javascript code contains syntax errors, those errors can easily be tracked down. For example we inject javascript code where a ; has been forgotten between the two statements:

"var x=1 var y=2;"

This syntax error will be displayed in the browser console log, as soon as you trigger the event in the dashboard (i.e. as soon as the javascript code is executed). However the browser console log is not always easily accessible (e.g. on Android phones). That can easily be solved by activating "Show browser events on the server" option (in the 'Settings' tabsheet), because then the syntax error will also be displayed in the Debug sidebar of the flow editor:

Debug the JS code

When your code is executed but it behaves incorrectly, it might be very difficult to figure out what you have done wrong. To avoid a lot of trial and error iterations, you might also start debugging your code.

Note that your entire code snippet will be executed by the browser as one single block of text. So you cannot step through it line by line, like in a normal debugging session. As a workaround we will pause the debugger just before the event handler will be executed, and then execute some code snippets manually in the Developer tools console. That way you hopefully can find why your code doesn't work correctly.

Below is explained how to accomplish this in e.g. a Chrome browser:

Enable JS debugging in the "Settings" tabsheet:
Open the developer tools for your browser. For example for Chrome like this:
Do you stuff in the SVG in the dashboard, and once your event is triggered the browser's debugger will pause here automatically:
Now you can show variables, and execute pieces of your Javascript code (which is inside the userData.sourceCode variable) one by one (to figure out where stuff goes wrong). In the following animation it is demonstrated how to execute specified statements of your code in the browser console tabsheet: