在浏览器中调试 reducer 时,为什么看不到变量的值?

Nic*_*ick 6 javascript google-chrome-devtools source-maps firefox-developer-tools redux

使用 Chrome 或 Firefox 开发人员工具时,我无法查看某些 reducer 变量的值。例如,newItem在下面的 Chrome 调试器屏幕截图中:

铬合金: Chrome 屏幕截图

火狐: 火狐截图

代码运行良好。日志语句输出正确,但通过调试器检查只显示undefined. 但是,如果我查看 Scope 视图,我可以看到一个名为的变量_newItem,它具有所有正确的属性和值(由于它们可能敏感而被隐藏)。

似乎导致此问题的原因是当我对状态进行浅层克隆时:(let newState = {...state};使用扩展语法或Object.assign({}, state).

每个后续变量基于newState显示undefined_variableName[0-9]*在开发工具范围视图上都有一个对应的变量。

这不会发生在我们的 React 组件或其他非 Reducer 代码中。

似乎 Redux、源映射和开发人员工具可能存在一些问题,但我无法在 Redux 文档或问题跟踪器或 Chrome 错误跟踪器中找到任何搜索结果。

Redux:4.0.5
操作系统:Windows 10 x64

测试: Chrome: 81.0.4044.122, Canary: 84.0.4125.0
Firefox: 75.0, Dev. 版:76.0b4 (64-bit)

注:这是不一样的这个问题,与刚刚Chrome的闭包变量的优化交易。

小智 0

为了查看减速器的值,我通常使用插件,Redux DevTools Extension它看起来很棒,并且允许我调试每个状态更改。

如果您想查看此处的文档,我将其留给您: Redux DevTools Extension