在浏览器中调试reducer时，为啥看不到变量的值？

Posted 2023-02-19

【中文标题】在浏览器中调试reducer时，为啥看不到变量的值？

【英文标题】：When debugging a reducer in the browser, why can't I see a variable's value?在浏览器中调试reducer时，为什么看不到变量的值？

【发布时间】：2020-07-28 17:26:26

【问题描述】：

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

铬：

火狐：

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

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

基于newState 的每个后续变量都显示undefined，但在开发工具的Scope 视图中有一个对应的_variableName[0-9]*。

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

似乎 Redux、源映射和开发人员工具可能存在问题，但我在 Redux 文档或问题跟踪器以及 Chrome 错误跟踪器中都找不到任何内容。

Redux：4.0.5 操作系统：Windows 10 x64

测试于： 铬：81.0.4044.122，金丝雀：84.0.4125.0 火狐：75.0，开发者。版号：76.0b4 (64-bit)

注意：这与this issue 不同，后者仅处理 Chrome 对闭包变量的优化。

【问题讨论】：

当您在以下行暂停时是否也会发生这种情况：group.items = [？有时 Chrome 不会在某些范围内正确映射变量。同样在调试器中，变量_newItem 以_ 为前缀，而在您的源代码中它没有_，所以它不是同一个变量吗？

@BenWinding 是的，无论断点或当前执行行在哪里，它都会发生。并且，在作用域窗格中的变量与_ 是相同的。只是可以有很多这样的变量。查看带有_group 前缀的那些。 _group3 具有应在源视图中为 group 显示的正确值。它似乎总是最后一个，其他的似乎总是未定义。就像有一个源映射问题，但它是一个弹出的create-react-app，没有构建修改。

“只是这样的变量可以有很多。” 那么没有_前缀的变量也在其中一个范围窗格中吗？另外，您是否可以通过在 Chrome 控制台中输入该值来查看该值？最后，使用 Firefox 开发工具是否也会出现此问题？

@BenWinding 我刚刚检查过，控制台反映了范围窗格的内容。也就是说，它们在那里也被“破坏”了。

@BenWinding 如果变量名已经用下划线“损坏”了，则未损坏的形式存在，但为undefined。 Chrome 和 Firefox 开发工具都会发生这种情况。我用 FF 截图更新了问题。

【参考方案1】：

要查看 reducer 的值，我通常使用 Redux DevTools Extension 插件，它看起来很棒，并且允许我调试每个状态更改。

如果您想在此处查看文档，我将其留给您： Redux DevTools Extension