如何訪問 Safari 中的 redux 商店？

Question

語境

我正在嘗試調試 React 應用程序，但無法修改源代碼以記錄 redux 變量。 在 chrome 中，我可以通過關聯的擴展訪問 redux 存儲，但似乎 safari 不存在這樣的等價物。

題

如何在 Safari 中訪問 redux 商店？ 我可以使用控制台這樣做嗎？

Answer 1

如果您使用Nextjs框架，則可以通過在 safari 中打開控制台來實現。 在其中鍵入window 。 展開它。 現在只需檢查窗口對象屬性。 您會找到一個類似於“__REDUX”之類的鍵。 就我而言，它是__NEXT_REDUX_STORE__ 。

現在找到它后，只需在控制台中輸入以下內容。：

__NEXT_REDUX_STORE__.getState();

您現在可以檢查應用程序當前的 redux 狀態。

Answer 2

不幸的是，最簡單的解決方案是修改源代碼，為 Redux 存儲設置一個全局變量。 （為了讓 Safari 更容易調試，預先修改您可以控制的任何應用程序可能是值得的。）

不修改源代碼，應該是可以的，雖然有點別扭。 以下說明適用於 React 16.12.0。

1. 在 Safari 的 Web Inspector（開發工具）中，轉到 Elements 選項卡並找到您的 React 根元素（ <div id="root">或您傳遞給ReactDOM.render類似ReactDOM.render ）。
2. 點擊它。 Web Inspector 應該在它旁邊顯示一個= $0 ，表明您現在可以在 Web Inspector 控制台中將該 DOM 節點引用為$0 。
3. 在 Web Inspector 的 Console 選項卡中，輸入Object.keys($0)並按 Enter 以查看 React 添加到 DOM 節點的內部屬性。 對於我的應用程序，我看到["__reactContainere$8yexuoe6iiv", "_reactRootContainer"] 。
4. 通過鍵入$0["__reactContainere$8yexuoe6iiv"] （替換您的內部屬性名稱）並按 Enter，將內部 React 對象轉儲到控制台。
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 3

我不知道用於 redux 調試的 safari 擴展（歡迎更正）。 該線程表明這是由於缺乏開發工具 API： https : //github.com/zalmoxisus/redux-devtools-extension/issues/435

Redux 狀態不在全局范圍內，因此您將無法在不修改源代碼的情況下通過控制台訪問它。

Answer 4

您可以使用connect函數提取狀態。 然后只是將其字符串化？

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

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

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 提到的不同。

Answer 6

根據其他瀏覽器的GitHub 存儲庫，請使用remote-redux-devtools 。