redux devtools 不在扩展 devtools 选项卡中显示状态

关键词：

【中文标题】redux devtools 不在扩展 devtools 选项卡中显示状态【英文标题】：redux devtools does not show state in extension devtools tab 【发布时间】：2018-05-20 18:20:40 【问题描述】：

我正在使用 react 和 redux 编写一个 chrome 扩展。该扩展在 chrome devtools 中有自己的选项卡。如果我尝试调试 react 代码，则会打开一个新的 chrome devtools，我可以在其中查看控制台、源代码等。

我在商店创建中有以下内容：

const store = createStore(rootReducer, preloadedState, compose(
    applyMiddleware(...middleware),
    global.devToolsExtension ? global.devToolsExtension() : f => f
))

问题是，出现了redux devtools，但是没有检测到store。我也尝试了here 的说明，但仍然没有效果。

我还想提一下，global.devToolsExtension 和 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 都是 undefined。

有人遇到过吗？

【问题讨论】：

【参考方案1】：

我已经设法使用remote-redux-devtools 显示状态。诀窍是右键单击Open Remote Devtools，然后在设置中标记为使用本地服务器。

在单独的选项卡中，确保通过 npm 或 yarn 安装 remotedev-server。示例：

yarn add -D remotedev-server

并运行以下命令：

var remotedev = require('remotedev-server');
remotedev( hostname: 'localhost', port: 8000 );

在这一切之后，状态应该在 redux 开发工具中可见。

【讨论】：

你可以发布任何反应原生的例子，在远程 redux devtools 中显示状态

如何在运行 React 的 Chrome 扩展中运行 Redux DevTools 扩展？

】如何在运行React的Chrome扩展中运行ReduxDevTools扩展？【英文标题】：HowtorunReduxDevToolsExtensionINSIDEChromeExtensionrunningReact?【发布时间】：2018-12-0220:01:00【问题描述】：我面临的一个大问题是，当我的React应用在Chrome扩展程序中运行时... 查看详情

如何启用 Redux Devtools？

】如何启用ReduxDevtools？【英文标题】：HowtoenableReduxDevtools?【发布时间】：2020-07-0508:40:02【问题描述】：我正在关注React教程，并且讲师在Chrome上安装了一个扩展程序，即ReduxDevtools。就我而言，我想知道为什么我的扩展程序似乎... 查看详情

调度 @ngrx/router-store 操作时出现 Redux devtools 扩展错误

】调度@ngrx/router-store操作时出现Reduxdevtools扩展错误【英文标题】：Reduxdevtoolsextensionerrorwhendispatching@ngrx/router-storeaction【发布时间】：2017-09-1605:14:02【问题描述】：我正在使用以下库：角4@ngrx/router-store@ngrx/store-devtools就在最近，... 查看详情

如何将 Redux devtools 与 Nextjs 一起使用？

】如何将Reduxdevtools与Nextjs一起使用？【英文标题】：HowtouseReduxdevtoolswithNextjs?【发布时间】：2021-09-1508:01:05【问题描述】：我正在尝试在我的Next.js应用程序上使用ReduxDevTools扩展。redux工作正常，但我无法在devtools中看到状态。我... 查看详情

为啥在 Redux-DevTools 中使用 Webpack HMR 插件时 App 状态会重置？

】为啥在Redux-DevTools中使用WebpackHMR插件时App状态会重置？【英文标题】：WhydoesAppstateresetswhenusingWebpackHMRpluginwithRedux-DevTools?为什么在Redux-DevTools中使用WebpackHMR插件时App状态会重置？【发布时间】：2016-10-2218:13:09【问题描述】：我... 查看详情

redux-devtools浏览器修改store值

1.npminstall--save-devredux-devtools 2.npminstal.--redux-devtools-dock-monitor 3.创建DevTools配置4.首页importDevToolsfrom‘./container/Devtools‘ https://github.com/gaearon/redux-devtools/blob/ 查看详情

将 redux-devtools 传递给带有中间件的 redux 存储

】将redux-devtools传递给带有中间件的redux存储【英文标题】：Passinginredux-devtoolstoareduxstorewithmiddleware【发布时间】：2016-10-0105:37:13【问题描述】：相对于redux-devtools文档中的编写方式，thiscode是如何处理的？https://github.com/auth0-blog/re... 查看详情

redux创建store，处理更新数据(代码片段)

...笔记本传递给storeimportreducerfrom‘./reducer‘;/***window.__REDUX_DEVTOOLS_EXTENSION__&&window.__REDUX_DEVTOOLS_EXTENSION__()*这句话的意思是如果页面上安装了reduxdevtools这个扩展，那么就在页面上使用这个工具*有了这个工具之后，再去做redux的... 查看详情

无法在 React Native 中连接 remote-redux-devtools

】无法在ReactNative中连接remote-redux-devtools【英文标题】：Cannotconnectremote-redux-devtoolsinReactNative【发布时间】：2020-05-1317:13:17【问题描述】：我无法在chrome中连接remote-redux-devtools调试器并收到此错误：SocketProtocolErrorname:"SocketProtocolEr... 查看详情

远程 redux devtools 停止工作

】远程reduxdevtools停止工作【英文标题】：remotereduxdevtoolsstoppedworking【发布时间】：2019-01-2016:49:57【问题描述】：之前有人问过这个问题，但我找不到可行的解决方案，所以我冒昧地展示我的代码，以防我遗漏了什么。我有一个... 查看详情

无法将 redux-devtools-extension 与 react-router-redux syncHistoryWithStore 一起使用

】无法将redux-devtools-extension与react-router-reduxsyncHistoryWithStore一起使用【英文标题】：unabletouseredux-devtools-extensionwithreact-router-reduxsyncHistoryWithStore【发布时间】：2016-09-2713:09:13【问题描述】：我无法将redux-devtools-extension与reac 查看详情

Redux 状态未在 Redux DevTool 中更新

】Redux状态未在ReduxDevTool中更新【英文标题】：ReduxStatenotupdatingintheReduxDevTool【发布时间】：2018-06-2907:14:11【问题描述】：当我单击一个按钮时，它会调度一个用于登录用户并返回用户数据的函数。但是Redux商店似乎在调度后没有... 查看详情

redux devtools 未显示状态

】reduxdevtools未显示状态【英文标题】：reduxdevtoolsnotshowingstate【发布时间】：2021-03-1901:25:39【问题描述】：谁能告诉我为什么我的redux应用程序不工作？我一直在从youtube的教程中一步步进行，但我的状态不是在redux开发工具中显... 查看详情

使用yarn安装vue-devtools(代码片段)

1. 从github 下载vuejs/vue-devtools https://github.com/vuejs/vue-devtools/archive/dev.zip2.安装yarn 及 编译vue-devtools npminstallyarn-gyarn-Vcdvue-devtools-devyarninstallyarnrunbuild 附图： 3.修改shells>chrome文件夹下的mainifest.json中的... 查看详情

让 Redux DevTools 工作

】让ReduxDevTools工作【英文标题】：GettingReduxDevToolsToWork【发布时间】：2016-09-1421:04:19【问题描述】：我关注了tutorial，但是，我得到了控制台错误："错误：期望reducer是一个函数"这是我的（相关）配置：WEBPACK.CONFIG.JS：...constTARGET... 查看详情

如何将操作发送到 redux-devtools 存储以从组件导入状态？

】如何将操作发送到redux-devtools存储以从组件导入状态？【英文标题】：Howtodispatchanactiontotheredux-devtoolsstoreforimportingastatefromacomponent?【发布时间】：2020-01-0606:11:57【问题描述】：我目前正在尝试实现一个集成在我的Angular应用程序... 查看详情

如何将堆栈跟踪添加到我当前的 Redux Devtools 设置中？

】如何将堆栈跟踪添加到我当前的ReduxDevtools设置中？【英文标题】：HowwouldIaddstacktracingtomycurrentReduxDevtoolssetup?【发布时间】：2021-12-1108:24:41【问题描述】：这是我当前的redux存储分配：importcomposeWithDevToolsfrom\'redux-devtools-extension\'... 查看详情

Angular NGRX - 为 Redux-Devtools 命名 store/app-instance

】AngularNGRX-为Redux-Devtools命名store/app-instance【英文标题】：AngularNGRX-namingthestore/app-instanceforRedux-Devtools【发布时间】：2017-11-2107:15:47【问题描述】：我在使用Redux-Devtools插件（适用于多个浏览器）时遇到问题。如此多的网站使用Red... 查看详情