如何访问 Safari 中的 redux 商店？

Posted 2023-02-19

【中文标题】如何访问 Safari 中的 redux 商店？

【英文标题】：How do I access the redux store in Safari?

【发布时间】：2020-04-22 09:09:06

【问题描述】：

上下文

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

问题

如何在 Safari 中访问 redux 商店？我可以使用控制台执行此操作吗？

【问题讨论】：

使用将 redux 状态记录到 console.debug() 的中间件

未修改源代码的问题具体说明

检查您的本地存储。它可能使用redux-persist 之类的东西在刷新之间保持状态。

好电话，但在我的情况下没有这样的运气

我只是想在您的recently deleted question 上指出，您可以根据指定的原点和指定的路线以编程方式控制 CORS。请参阅 corsOptions here 中的 origin 函数。很抱歉劫持了这个问题，但你删除了我正在输入评论的那个。仍然认为我可以提供帮助，但没有任何其他交流方式。

【参考方案1】：

不幸的是，最简单的解决方案是修改源代码，为 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()

【讨论】：

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

【参考方案2】：

如果您使用Nextjs 框架，您可以通过在 safari 中打开控制台来实现。在其中输入window。展开它。现在只需检查窗口对象属性。你会发现一个类似'__REDUX'或类似的键。就我而言，它是__NEXT_REDUX_STORE__。

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

__NEXT_REDUX_STORE__.getState();

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

【讨论】：

我相信__NEXT_REDUX_STORE__是Next.js提供的。如果您使用的是更普通的 Redux 应用程序，您可能会不走运。

是的，它适用于 nextjs。但通常在使用 redux 的 s-s-r 应用程序中，服务器会在 html 标记中发送存储，并从那里创建一个全局变量来存储它。

【参考方案3】：

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

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

【参考方案4】：

您可以使用connect 函数提取状态。然后把它串起来？

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

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

【讨论】：

问题说明源代码没有被修改

【参考方案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 提到的区别。

【参考方案6】：

根据其GitHub repository对于其他浏览器使用remote-redux-devtools。