Question

上下文

我正在尝试调试React应用程序，但是无法修改源代码来记录redux变量。在Chrome浏览器中，我可以通过关联的extension访问redux存储，但对于野生动物园来说似乎不存在这样的等效项。

问题

如何访问Safari中的redux存储？我可以使用控制台吗？

Answer 1

您可以通过在野生动物园中打开控制台来实现。在其中输入window。展开它。现在，只需检查window对象属性。您会找到类似“ __REDUX”之类的密钥。在我的情况下是__NEXT_REDUX_STORE__。

现在，找到它后，只需在控制台中输入以下内容即可。

__NEXT_REDUX_STORE__.getState();

您现在可以检查应用程序的当前还原状态。

Answer 2

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

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

Answer 3

您可以只使用connect函数提取状态。然后将其字符串化吗？

<pre>JSON.stringify({this.props.store, null, 2})</pre>

然后您可以直观地看到它。

Answer 4

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

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

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

一种更简单的单行替代方案：

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

Answer 5

添加到@josh-kelley 的回答中...

在 2021 年，使用 Safari 版本 12.1 (14607.1.40.1.4) 进行测试，以下行对我有用：

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

注意 children.props 与 @josh 提到的不同。