Debugging config screen fails in Chrome

Developing Nodes
1

Hi folks,

Does anybody else has recently troubles to debug the client side (config screen) of his custom nodes, using Chrome developer tools (version 78.0.3904.97 on Windows 10)?

When developing a custom node, I debug my config screens by adding a simple 'debugger' statement:

oneditprepare: function() {
   debugger;
   ...
}

However for some reason this doesn't work anymore :woozy_face:
When my developer tools window is open, nothing happens anymore when a node has been double-clicked. Which means the config screens aren't displayed anymore... When I close my developer tools window, everything works fine (but then of course I cannot debug anything).

The only thing I can see is the following error (that occurs every time I open the config screen):

image
image955Ɨ118 11.1 KB

Following this Stackoverflow discussion, it seems to me that the next code snippet:

d3.event && d3.event.preventDefault()

Should be rewritten as:

d3.event && d3.event.cancelable && d3.event.preventDefault()

But every time I try to update this code, my Chrome developer tools crashes. So I have no idea whether this is the problem/solution :weary:

Any tips? Thanks !
Bart

2

I don't know the answer I'm afraid but have you tried with other tools?

Maybe try Vivaldi instead of Chrome to see if that is different. Or debug in VScode rather than the browser.

3

Hey Julian,
Thanks for your compassion :wink:

Did a quick test on my son's Windows 10 pc (please don't tell him :rofl:), and there it was working fine. Finally I saw a difference between both pc's. On mine, the developer tools showed some mobile related stuff on top:

image

Seemed I had turned on the device toolbar:

image

And that introduced the touch events, which are not wanted in a debugging context (since Android Chrome has no developer tools). So that is why the touch-related error popped up...

After turning off the device toolbar, everything worked fine again.
Again an evening wasted ...

Case closed!

1 Like