首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法让redux devtools用于调试React Chrome扩展

Redux DevTools是一个用于调试Redux应用程序的浏览器扩展工具。它提供了一个用户界面,可以查看和操作Redux存储中的状态和操作。然而,由于Chrome扩展的限制,Redux DevTools无法直接用于调试React Chrome扩展。

为了在开发React Chrome扩展时使用Redux DevTools进行调试,可以考虑以下方法:

  1. 使用独立的开发环境:在开发React Chrome扩展时,可以使用独立的开发环境,例如使用create-react-app创建一个独立的React应用程序。在这个独立的应用程序中,可以使用Redux DevTools来调试Redux部分,然后将相关代码集成到Chrome扩展中。
  2. 使用自定义调试工具:可以开发一个自定义的调试工具,用于在Chrome扩展中调试Redux部分。这个工具可以模拟Redux DevTools的功能,例如显示状态和操作,并提供相应的操作接口。在开发过程中,可以将这个自定义调试工具集成到Chrome扩展中,以便进行调试。
  3. 使用其他调试工具:除了Redux DevTools,还有其他一些调试工具可以用于调试Redux应用程序,例如React Developer Tools和Redux DevTools Extension。这些工具可以在Chrome扩展中使用,并提供类似的调试功能。可以根据具体需求选择适合的调试工具。

需要注意的是,以上方法仅提供了一些思路和可能的解决方案,具体的实施方式可能因具体情况而异。在实际开发中,可以根据项目需求和技术要求选择合适的方法来进行调试。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

应用connected-react-router和redux-thunk打通react路由孤立

同步,并且从 store 访问 通过 dispatch actions 导航 在 redux devtools 中支持路由改变的时间旅行调试集成好处:1)路由信息可以同步到统一的 store 并可以从中获得...2)可以使用 Redux 的 dispatch action 来导航 3)集成 Redux 可以支持在 Redux devtools 中路由改变的时间履行调试集成的必要性:集成后允许 react router...开发调试工具 开发过程中免不了调试,常用的调试工具有很多,例如 redux-devtools-extension,redux-devtools,storybook 等。...__REDUX_DEVTOOLS_EXTENSION_COMPOSE__. redux-devtools-extension redux-devtools-extension 是一款调试 redux 的工具.../logOnly 如果不想在生产环境使用扩展,那就只开启redux-devtools-extension/developmentOnly就好点击文章查看更多细节 import thunk from "redux-thunk

2.4K00

React-Native调试工具Redux调试DOM结构查看

Redux调试 1. reactotron redux调试,除了最基本的打断点进去调试之外,还有一个好用的调试工具reactotron,它能够帮你清楚的记录你所发出的action,以及http请求,可以帮你更好的分析...redux-devtools-extension这个调试工具我用的比较少些,不过也是查看redux很好用的工具。...这个主要是可以在chrome浏览器的控制台中来查看。 ? redux-devtools install 可以直接从 Chrome Web Store来安装,这样方便许多。...3. remote-redux-devtools 这个我用的比较少,就不做详细介绍,可以去官网细看。 DOM结构查看 可以查看dom结构的react devtools。...import 'react-devtools'; // 引入,需要执行`yarn add react-devtools ` import { AppRegistry } from 'react-native

2.8K20
  • 回望过去,展望未来- 2024 React 生态一览表

    以下是一些用于 React 和相关库的流行开发工具: React Developer Tools[32] - 这个工具可作为 Chrome 扩展使用。...Redux DevTools[33] 是另一个 Chrome 扩展,可增强我们的 Redux 开发工作流程。它提供了对 Redux 存储的洞察,允许我们检查操作和状态更改,回溯和重放操作等。...Testing Playground[34] 是一个简化 React 组件测试的 Chrome 扩展。它提供了一个用于实验组件和其属性的可视化环境。...React Hook Form DevTools[35] - 对于那些使用 React Hook Form 的人,有可用于帮助调试表单行为的 DevTools。...TanStack Query DevTools[36] - TanStack Query 是用于 React 的数据获取库,它提供了用于调试和检查查询和突变的 DevTools

    69310

    几个好用的React-Native 开发工具

    2、React Navigation React Navigation 是一个用于 React Native 应用导航的库,它提供了一个简单易用的 API 来实现应用内的导航功能。...其中最重要的变化是采用了新的导航器架构,使得导航器更加易于扩展和定制。开发者可以通过学习 React Navigation,更加便捷地构建应用导航,提高应用的用户体验。...3、React Native Code Push React Native Code Push 是一个用于 React Native 应用热更新的服务,它可以帮助开发者在不发布新版本的情况下,快速地将应用程序的更新推送到用户设备上...5、React Native Debugger React Native Debugger 是一个调试工具,可以让开发者在 Chrome DevTools 中进行调试。...另外,React Native Debugger 还提供了一个 RNDebugger Chrome 插件,可以让开发者更方便地在 Chrome DevTools调试应用。

    2.2K10

    React Native 开发工具推荐

    图片2、React NavigationReact Navigation 是一个用于 React Native 应用导航的库,它提供了一个简单易用的 API 来实现应用内的导航功能。...其中最重要的变化是采用了新的导航器架构,使得导航器更加易于扩展和定制。开发者可以通过学习 React Navigation,更加便捷地构建应用导航,提高应用的用户体验。...ReduxReact Native 应用提供了一种可靠的状态管理方案,可以提高代码的可维护性和可测试性。...图片5、React Native DebuggerReact Native Debugger 是一个调试工具,可以让开发者在 Chrome DevTools 中进行调试。...另外,React Native Debugger 还提供了一个 RNDebugger Chrome 插件,可以让开发者更方便地在 Chrome DevTools调试应用。

    1.7K20

    移动开发者必备的 React Native 开发工具

    2、React NavigationReact Navigation 是一个用于 React Native 应用导航的库,它提供了一个简单易用的 API 来实现应用内的导航功能。...其中最重要的变化是采用了新的导航器架构,使得导航器更加易于扩展和定制。开发者可以通过学习 React Navigation,更加便捷地构建应用导航,提高应用的用户体验。...ReduxReact Native 应用提供了一种可靠的状态管理方案,可以提高代码的可维护性和可测试性。...5、React Native DebuggerReact Native Debugger 是一个调试工具,可以让开发者在 Chrome DevTools 中进行调试。...另外,React Native Debugger 还提供了一个 RNDebugger Chrome 插件,可以让开发者更方便地在 Chrome DevTools调试应用。

    1.8K20

    精选10款谷歌浏览器插件武装你的浏览器

    最近看到的一段话很有感触,日复一日的低效率工作只会消磨你的热情,而巨大的时间成本会你错失很多机会。 那么作为叶子结点的我们要学会主动提高生产效率。...1.Clear Cache 清空浏览器缓存这一项操作在调试的时候使用频率很高,一般需要经过几个步骤才能清空,使用Clear Cache只需单击一下按钮即可清除缓存,还支持配置其他想要清除的数据,大大提高调试效率...2.GITHUBER GITHUBER 是一个每日发现优质内容的 Chrome 主页拓展,将热门 Repo 送到你嘴边。...9.Extension Manager 扩展管理器,需要的只需单击移上去,暂不需要的可以单击移动下来。...其他 React 栈和 Vue 栈的同学推荐使用: React Developer Tools Redux DevTools Vue.js devtools

    61730

    精选10款谷歌浏览器插件武装你的浏览器

    最近看到的一段话很有感触,日复一日的低效率工作只会消磨你的热情,而巨大的时间成本会你错失很多机会。 那么作为叶子结点的我们要学会主动提高生产效率。...1.Clear Cache 清空浏览器缓存这一项操作在调试的时候使用频率很高,一般需要经过几个步骤才能清空,使用Clear Cache只需单击一下按钮即可清除缓存,还支持配置其他想要清除的数据,大大提高调试效率...2.GITHUBER GITHUBER 是一个每日发现优质内容的 Chrome 主页拓展,将热门 Repo 送到你嘴边。 ?...9.Extension Manager 扩展管理器,需要的只需单击移上去,暂不需要的可以单击移动下来。 ?...其他 React 栈和 Vue 栈的同学推荐使用: React Developer Tools Redux DevTools Vue.js devtools

    58120

    超硬核 Web 前端学霸笔记,学完就去找工作!

    Hackernoon - 一个独立的技术媒体网站 必须具有 Chrome 扩展程序 DailyDev - 在 Chrome 默认标签中获取有关 Dev 社区的最新消息。...React Developer Tools - React 开发者工具是 Chrome DevTools 扩展用于开源 React JavaScript 库。...Lighthouse - Lighthouse 是一个开源的自动化工具,用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。...Chrome 调试器 - 此扩展程序可让您从 VS Code 内部调试Chrome 浏览器中运行的 JavaScript 代码。...Microsoft Edge 调试器 - 在 Microsoft Edge 浏览器中调试 JavaScript 代码 Firefox 调试器 - 在 Firefox 中调试 Web 应用程序或浏览器扩展

    1.4K20

    React进阶(3)-上手实践Redux-如何改变store中的数据

    在reducer函数接收的第二个参数action就是接下来要干的事情了 在Redux中为了能够查看store中的各个状态,在chrome浏览器需先安装一个redux Devtools这个调试工具 当然安装这个插件...,需要科学上网.如果没有的话,在qq浏览器的插件市场里也是能够找得到的 qq浏览器各种插件也是应有尽有,与在chrome控制台里调试是一样的 方式一:创建store的时候,进行composeEnhancers...__REDUX_DEVTOOLS_EXTENSION__()); // createStore第二个参数添加这个redux-devtools的配置可以开启调试功能 方法二:终端下安装redux-devtools-extension...浏览器里添加redux-devtools,在创建store的createStore()的第二个参数中添加redux-devtools插件的配置,使浏览器支持Redux查看store的各种状态 const...__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); 2.

    2.6K30

    React进阶(3)-上手实践Redux-如何改变store中的数据

    在reducer函数接收的第二个参数action就是接下来要干的事情了 在Redux中为了能够查看store中的各个状态,在chrome浏览器需先安装一个redux Devtools这个调试工具 当然安装这个插件...,需要科学上网.如果没有的话,在qq浏览器的插件市场里也是能够找得到的 qq浏览器各种插件也是应有尽有,与在chrome控制台里调试是一样的 方式一:创建store的时候,进行composeEnhancers...__REDUX_DEVTOOLS_EXTENSION__()); // createStore第二个参数添加这个redux-devtools的配置可以开启调试功能 ?...(配置完后,刷新浏览器Redux调试工具就会出现了) 方法二:终端下安装redux-devtools-extension npm install --save redux-devtools-extension...的调试功能,第二种方法比较强大,推荐使用,这种配置完后,在各个浏览器都是可以使用的,至于其他一些额外拓展功能的,在后续的文章中,会不断会讲到 具体更改store的实例代码如下所示: import React

    2.2K20

    调试工具的通用原理:调试四要素

    有同学说,我用 React DevTools 和 Vue DevToolschrome 插件来调试 React、Vue 组件,还会用独立的 React DevTools 调试 React Native...如果是扩展 DevToolsChrome 插件,那还有一部分 DevTools Page,是在 DevTools 里显示的页面: Content Script 部分可以操作 DOM,可以监听 DOM...不过 React DevTools 还有独立的 Electron 应用,可以用于 React Native 的调试。...明显不是,CDP 协议用来调试 DOM、JS 等挺不错的,但是不好扩展,如果有别的需求,一般都是自定义调试协议。...也有不同的部分,比如 VSCode Debugger 多了一层 Debugger Adapter,用于跨语言的复用,Vue/React DevTools 通过向页面注入 backend 代码,然后通过

    2.4K20

    MobX状态管理:简洁而强大的状态机

    中间件集成尽管MobX并不像Redux那样与中间件紧密集成,但你可以使用mobx-react-devtools来监控状态变化,提供类似的时间旅行调试功能。...安装插件使用npm或yarn安装mobx-react-devtools: npm install --save mobx-react-devtools # 或 yarn add mobx-react-devtools...在Chrome或Firefox中,通常可以通过打开开发者工具,然后选择“.mobx-react-devtools”或“Extensions”面板来找到它。...时间旅行调试(Time Travel Debugging)虽然mobx-react-devtools不直接提供时间旅行调试,但你可以使用mobx-state-tree库,它与MobX兼容,并提供了时间旅行功能...与其他库的集成MobX不仅适用于React,也可以与Vue.js、Angular和其他库集成。此外,它还可以与Redux或其他状态管理库共存,用于特定的场景。

    16910
    领券