Interferences with Redux DevTools extension

[decline]

Angular DevTools version (required): 1.0.1

Redux DevTools version: 2.17.1

Angular version (required): 11.0.9

Description of issue:

When running Angular DevTools together with Redux DevTools, the profiler will be bloated with change-detection events of Source: Window.addEventListener:message. This is coming from Redux DevTools so I know this is not your fault. Sadly it makes using the profiler impossible to use, which is even more tragic, since Redux DevTools is a widely used extension in the NgRx community.

So my question would be if there is any way to ignore these events, maybe using the filter? I only see the possibility to filter for certain events like source: click, but not a possibility to ignore certain events like source: !Window.addEventListener:message

Do you have any suggestions or plans how to deal with this issue?

I also made a video to get a better understanding:

• it first starts with some regular change-detection events
• afterwards the Redux DevTools are turned on and the profiler will be bloated with the mentioned events

Screen.Recording.2021-05-27.at.12.36.27.mov

[AleksanderBodurri]

@decline thank you for opening this issue. If you type !source: message or !source: Window.addEventListener:message in the filter input does the same issue still happen?

In any case we should consider creating some documentation for the profiler event filter to better communicate its functionality.

[decline]

@AleksanderBodurri Yes, using the filter values you provided the events will actually get filtered out. But since these Window.addEventListener:message are still happening in the background (like a few hundred per second), the Profiler becomes unresponsive and other events don't show up anymore (or very late).

So for now the only solution for me is to disable the Redux DevTools extension I guess 😕

[mgechev]

We got an early heads up about this issue, but since the message exchange triggers change detection the profiler accurately represents what's happening in the app.

Seems like the way to go is use the two DevTools independently so that the message passing from redux DevTools doesn't interfere with Angular DevTools.