如何debug/log immer callback里面有用的信息？

Question

我在 React 应用程序中使用 immer 来处理状态变化。假设状态没有像我预期的那样改变，所以我想调试它，但是 console.log 和 debugger 都给出了一个不包含任何有用信息的 Proxy 对象，例如当时是什么状态

获取新状态的示例代码：

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

如何调试我的代码？

Answer 1

事实证明，您只需要深入研究 chrome 开发工具 - 例如如果您使用的是调试器，那么您可以在右侧面板上单击 Scope -> Local -> searchTarget -> [[Target]] -> base/draft，在那里您可以看到实际值。

Answer 2

对于遇到此问题并对如何找到 Scope -> Local -> searchTarget -> [[Target]] -> base/draft 感到困惑的任何其他人，请确保设置 debugger。设置完成后，您将在 Sources 选项卡的右侧面板中看到相关信息：

Answer 3

如果您对草稿进行序列化/反序列化，输出将是一个普通的 JavaScript 对象，并将在控制台中显示为原样。

console.log(JSON.parse(JSON.stringify(draft)))

Answer 4

Immer 7+ 有 current() 用于此目的。所以，你可以这样做：

import { current } from 'immer';

console.log(current(draft));

官方documentation and test

如何debug/log immer callback里面有用的信息？

How to debug/log useful information inside immer callback?

reactjs

immer.js