javascript - 如何在 Safari 中访问 redux 存储？

Question

上下文

我正在尝试调试 React 应用程序，但无法修改源代码来记录 redux 变量。在 Chrome 中，我可以通过关联的 extension 访问 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 的控制台选项卡中，输入 Object.keys($0)然后按 Enter 键即可查看 React 添加到 DOM 节点的内部属性。对于我的应用程序，我看到 ["__reactContainere$8yexuoe6iiv", "_reactRootContainer"] .
4. 通过输入 $0["__reactContainere$8yexuoe6iiv"] 将内部 React 对象转储到控制台(替换您的内部属性名称)并按 Enter 键。
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()