Debugging experience with proxies

[vjau]

Hi,
i really like Mobx, but i find the debugging experience problematic because of the proxy use.
When i'm using my testing library (Jest with Wallaby), everytime a test is red, i get an undecipherable result.
Instead of got result "foo" expected result "bar" i get a proxy. So i have to add toJS just to see the actual result.
Also when using the debugger, i can't see the value i want to peek at because they are all behind proxies. This make pretty much the debugger useless, having to resort to console.log(toJS(val)) everywhere, or using intermediary value const debug = toJS(val) just to see the actual value.
Is there something i'm not getting ? Is there a workaround ? How are you doing it ?

[urugator]

The proxy should be completely indistinguishable from the proxied object for the consuming code. When you see some difference in output, it's a "feature" of the runtime. So this is more of an issue of the introspection tools of these libraries/nodejs. However I just tried vscode/chrome/terminal and the string output is always the original object (even for util.inspect by default - there is a flag) or in case of interactive env (debugger/chrome console) the object is inspectable under [[target]] prop. Did not try jest.

[vjau]

Thank you, it seems to work correctly with "raw" Jest so i suppose this is a problem with Wallaby, i'm gonna see with them.
I didn't know about the target prop, i'm gonna look for it.

[kubk]

Just want to add that If you'd like to see the real proxy structure in browser console without calling toJS you can use Chrome formatters. There are a few packages that provide Mobx-specific formatters:

• Original package. Last commit was 5 years ago
• Chrome formatters as a part of mobx-logger package. This package is up-to-date and also provides formatters for ES6 Map and Set.