# Debugging config screen fails in Chrome

**URL:** <https://discourse.nodered.org/t/debugging-config-screen-fails-in-chrome/17758>\
**Category:** Developing Nodes\
**Created:** [10 November 2019 22:06 UTC](https://discourse.nodered.org/t/debugging-config-screen-fails-in-chrome/17758 "2019-11-10T22:06:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 November 2019 22:06 UTC](https://discourse.nodered.org/t/debugging-config-screen-fails-in-chrome/17758/1 "2019-11-10T22:06:44Z")

</div>

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:

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

```

However for some reason this doesn't work anymore 🥴  
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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/111e77183902fe96870dda43e29be39e506361f0.png)

Following this [Stackoverflow](https://stackoverflow.com/questions/26478267/touch-move-getting-stuck-ignored-attempt-to-cancel-a-touchmove) discussion, it seems to me that the next code snippet:

```auto
d3.event && d3.event.preventDefault()

```

Should be rewritten as:

```auto
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 😩

Any tips? Thanks !  
Bart

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 November 2019 23:10 UTC](https://discourse.nodered.org/t/debugging-config-screen-fails-in-chrome/17758/2 "2019-11-10T23:10:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 November 2019 23:48 UTC](https://discourse.nodered.org/t/debugging-config-screen-fails-in-chrome/17758/3 "2019-11-10T23:48:39Z")

</div>

Hey Julian,  
Thanks for your compassion 😉

Did a quick test on my son's Windows 10 pc (please don't tell him 🤣), 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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/42682a648465ec41ca542d58f7a9ff9dee602e59.png)

Seemed I had turned on the device toolbar:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/41bcfd3fb58fe7c7c9bd0595a16bc3ece5bd6ab2.png)

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!
