如何访问 Safari 中的 redux 商店？

Question

语境

我正在尝试调试 React 应用程序，但无法修改源代码以记录 redux 变量。在 chrome 中，我可以通过关联的扩展访问 redux 存储，但似乎 safari 不存在这样的等价物。

题

如何访问 Safari 中的 redux 商店？我可以使用控制台这样做吗？

Answer 1

不幸的是，最简单的解决方案是修改源代码以将全局变量设置为 Redux 存储。（为了使 Safari 更易于调试，可能值得先行修改您可以控制的任何应用程序来执行此操作。）

不修改源码，应该是可以的，虽然比较别扭。以下说明适用于 React 16.12.0。

1. 在 Safari 的 Web Inspector（开发工具）中，转到 Elements 选项卡并找到您的 React 根元素（<div id="root">您传递给的 或类似元素ReactDOM.render）。
2. 点击它。Web Inspector= $0旁边应显示 ，表示您现在可以在 Web Inspector 控制台中将该 DOM 节点引用为$0。
3. 在 Web Inspector 的 Console 选项卡中，键入Object.keys($0)并按 Enter 键以查看 React 添加到 DOM 节点的内部属性。对于我的应用程序，我看到["__reactContainere$8yexuoe6iiv", "_reactRootContainer"].
4. 通过键入（替换您的内部属性名称）并按 Enter 键，将内部 React 对象转储到控制台$0["__reactContainere$8yexuoe6iiv"]。
5. 检查对象属性以找到 Redux 存储：在我的应用程序上，它位于child、下memoizedProps、下store，但这可能取决于 React 组件层次结构的具体情况以及挂载 Redux 的位置和方式<Provider>。
6. 使用store您刚刚找到的参考来调用 Redux 的getState。对于我的应用程序，这意味着键入 $0["__reactContainere$8yexuoe6iiv"].child.memoizedProps.store.getState()并按 Enter 键。

上面的一个更简单的单行替代方案：

document.getElementById('root')['_reactRootContainer']._internalRoot.current.child.memoizedProps.store.getState()

Answer 2

我不知道用于 redux 调试的 safari 扩展（欢迎更正）。该线程表明这是由于缺少开发工具 API： https: //github.com/zalmoxisus/redux-devtools-extension/issues/435

Redux 状态不在全局范围内，因此如果不修改源代码，您将无法通过控制台访问它。