如何在Safari中访问Redux商店?

wgmfuz8q  于 2023-11-19  发布在  其他
关注(0)|答案(7)|浏览(132)

背景

我试图调试一个React应用程序,但无法修改源代码来记录redux变量。在Chrome中,我可以通过关联的extension访问redux商店,但似乎safari没有这样的等价物。

问题

如何在Safari中访问Redux商店?可以使用控制台吗?

mhd8tkvw

mhd8tkvw1#

不幸的是,最简单的解决方案是修改源代码,为Redux商店设置一个全局变量。(为了让Safari更容易调试,可能值得预先修改您可以控制的任何应用程序。)
在不修改源代码的情况下,这应该是可能的,尽管这很尴尬。以下说明适用于React 16.12.0。
1.在Safari的Web Inspector(开发工具)中,转到Elements选项卡并找到您的React根元素(传递给ReactDOM.render<div id="root">或类似元素)。
1.点击它。Web Inspector应该在它旁边显示一个= $0,表明您现在可以在Web Inspector控制台中将该DOM节点引用为$0
1.在Web Inspector的Console选项卡中,键入Object.keys($0)并按Enter键以查看React添加到DOM节点的内部属性。对于我的应用程序,我看到["__reactContainere$8yexuoe6iiv", "_reactRootContainer"]
1.通过键入$0["__reactContainere$8yexuoe6iiv"](替换您的内部属性名称)并按Enter将内部React对象转储到控制台。
1.检查对象属性以找到Redux商店:在我的应用程序中,它在child下,在memoizedProps下,在store下,但这可能取决于您的React组件层次结构的具体情况以及您在何处以及如何挂载Redux的<Provider>
1.使用您刚刚找到的store引用来调用Redux的getState。对于我的应用程序,这意味着输入$0["__reactContainere$8yexuoe6iiv"].child.memoizedProps.store.getState()并按Enter。
一个更简单的一行替代上面的:

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

字符串

55ooxyrt

55ooxyrt2#

如果你使用的是Nextjs框架,你可以通过在safari中打开控制台来实现这一点。在其中输入window。展开它。现在只需检查窗口对象属性。你会发现一个类似'__REDUX'或类似的键。在我的情况下,它是__NEXT_REDUX_STORE__
找到它后,只需在控制台中输入以下内容。:
__NEXT_REDUX_STORE__.getState();
你现在可以检查你的应用程序的redux状态。

xdyibdwo

xdyibdwo3#

另一个访问存储的选择是,如果你坚持到localStorage(我猜你是... * 对吗?*),直接从localStorage访问它。
在我的场景中,这意味着:

jsonState  = localStorage['persist:root']    //gets the raw JSON
firstLevel = JSON.parse(jsonState)           //parses the first level, which seems to contain more JSON as values 
state      = Object.fromEntries(             //makes a new object from the pairs...
  Object.entries(firstLevel)                 //...when we split every key-value pair...
        .map(([k, v]) => [k, JSON.parse(v)]) //...to parse their values
)

字符串
或者,作为一个丑陋的一行字:

state = Object.fromEntries(Object.entries(JSON.parse(window.localStorage['persist:root'])).map(([key, json]) => [key, JSON.parse(json)]))

oxosxuxt

oxosxuxt4#

我不知道有一个用于redux调试的safari扩展(欢迎更正)。这个线程表明,这是由于缺乏dev-tools API:https://github.com/zalmoxisus/redux-devtools-extension/issues/435
Redux状态不在全局作用域中,因此如果不修改源代码,您将无法通过控制台访问它。

nxowjjhe

nxowjjhe5#

你可以使用connect函数提取状态,然后将其字符串化?

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

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

dgtucam1

dgtucam16#

加上@josh-kelley的回答。。
在2021年,用Safari Version 12.1(14607.1.40.1.4)进行测试,下面这行代码对我来说很有用:

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

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

fv2wmkja

fv2wmkja7#

根据其GitHub存储库,其他浏览器使用remote-redux-devtools

相关问题