How to debug/log useful information inside immer callback?

Question

I'm using immer in a react app to handle state changes. Let's say the state didn't change as I expected, so I'd want to debug it, but both console.log and debugger gives a Proxy object which doesn't contain any useful information, e.g. what is the state at that time.

Example code to get the new state:

return immer(state, draftState => {
    // Some mutations here, didn't go as expected
    console.log(draftState.blah) // Gives 'Proxy' object
    debugger // Same deal
  })

How can I debug my code?

Answer 1

Immer 7+ has current() for this purpose. So, you can do this:

import { current } from 'immer';

console.log(current(draft));

Official documentation and test