Redux DevTools 为什么在浏览器里找不到? 打工人芹芹 提问于 2026-02-28 16:11:18 阅读 29 前端 我按照文档装了 Redux DevTools 浏览器扩展,也在代码里加了 devTools: true,但打开 Chrome 开发者工具还是看不到 Redux 那个 tab,是我哪里漏了吗? 这是我的 store 配置: const store = createStore( rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); 我来解答 赞 7 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 2 条解答 设计师悦洋 Lv1 哎呀看到你的代码了,这个写法本身没啥大问题,但我怀疑有几个地方可能踩坑了,你排查一下。 先确认下 Chrome 扩展是不是真的启用了。点浏览器右上角那个拼图图标,找到 Redux DevTools,确保它是开启状态。有时候装了但没启用也是白搭。 然后检查下开发者工具里,右上角有个 ">>" 的箭头,点开看看 Redux 是不是藏在里面。有时候 tab 太多了会被折叠进去,我之前也被这个坑过。 如果上面都没问题,试试刷新页面,或者干脆重启一下浏览器。Redux DevTools 需要在页面加载时注入那个全局变量,有时候装完扩展需要重启才能生效。 另外你的代码可以稍微改得更稳妥一点: const store = createStore( rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ); 你原代码里用了 &&,这是 HTML 转义后的写法,如果直接复制粘贴的话其实是错的,要用真正的 && 运算符才行。 如果还是不行,打开控制台敲一下 window.__REDUX_DEVTOOLS_EXTENSION__ 看看是不是 undefined,如果是的话那就是扩展没正确加载。 希望能帮到你!搞定了说一声哈。 回复 点赞 1 2026-03-01 12:25 IT人振巧 Lv1 看到你的代码了,问题应该不难排查,我们一步步来。 先说个最容易被忽略的点,Chrome 开发者工具的 tab 栏是有宽度限制的,Redux DevTools 的 tab 很可能被折叠到最右边的那个 >> 箭头里面了。点开那个箭头看看有没有 Redux 选项,有的话右键把它 pin 住就行。 如果那里也没有,我们再检查几个地方。 第一,确认扩展真的装好了。在地址栏输入 chrome://extensions/,找找有没有 Redux DevTools,得是开启状态才行。要是连这个页面都找不到,那就是扩展根本没装上,去 Chrome 商店重新装一遍。 第二,你的代码写法本身没问题,但我建议稍微改一下,加个容错处理: import { createStore, compose } from 'redux'; const store = createStore( rootReducer, compose( // 这个判断是为了防止没装扩展时报错 window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f ) ); 原理是这样:createStore 的第二个参数如果是函数,Redux 会把它当作 enhancer 来处理。你原来的写法在扩展没装的时候会返回 undefined,可能导致一些奇怪的问题。用 compose 包一下,再给个默认值 f => f(就是个透传函数),就比较稳了。 第三,打开控制台看看有没有报错。有时候是其他代码报错导致 store 根本没创建成功,那扩展自然也检测不到。 第四,刷新页面。这个听起来很傻,但有时候扩展刚装好需要刷新一下页面才能生效,或者你代码改了没刷新。 第五,如果你用的是 Redux Toolkit,那就更简单了,configureStore 默认就开启了 DevTools: import { configureStore } from '@reduxjs/toolkit'; const store = configureStore({ reducer: rootReducer, // devTools: true // 默认就是 true,开发环境自动开启,不用手动写 }); 基本上就是这几个原因,绝大多数情况就是 tab 被折叠了或者扩展没开。排查完告诉我结果。 回复 点赞 3 2026-02-28 22:12 加载更多 相关推荐 1 回答 57 浏览 Redux DevTools 为什么在浏览器里没反应? 我按照文档装了 Redux DevTools 扩展,也配置了 store,但打开浏览器插件一直是空的,没有任何 action 记录,这是怎么回事? 我的 store 配置是这样的: import { ... Code°俊杰 前端 2026-03-06 11:52:17 2 回答 161 浏览 为什么Redux DevTools显示空状态但没报错? 在React项目里配置了Redux store后,Redux DevTools扩展明明已经打开,状态却一直显示为空对象。代码应该没问题啊,我检查过Provider包裹了根组件,store也正确传进去了... 夏侯熙炫 前端 2026-02-19 00:13:23 2 回答 64 浏览 Redux DevTools为什么不记录异步操作的中间状态? 在用Redux Toolkit处理API调用时,发现DevTools时间轴里只有最终的success状态,中间的pending状态完全没显示。明明在slice里设置了extraReducers处理pe... 书生シ瑞琴 前端 2026-01-25 20:35:20 1 回答 46 浏览 为什么Chrome DevTools里看不到我写的CSS变量? 我在项目里用了CSS自定义属性(变量),但在DevTools的Styles面板里死活找不到这些变量,调试起来特别麻烦。 我明明在:root里定义了,也确认页面能正常渲染,但DevTools就是不显示。... Prog.红梅 前端 2026-03-15 22:29:18 1 回答 41 浏览 为什么手机上调试 Vue 页面时 DevTools 看不到源码? 我用 Chrome 连真机调试一个 Vue 项目,页面能打开,但 DevTools 的 Sources 里只看到打包后的 JS,根本找不到原始的 .vue 文件。明明本地开发时 devServer 开... 玉宸 Dev 移动 2026-03-29 22:57:15 2 回答 41 浏览 Chrome DevTools 里的 Snippets 保存后怎么找不到了? 我昨天在 Chrome DevTools 的 Sources 面板里新建了个 Snippet,写了段调试用的 console.log('init'),点了保存,今天打开 DevTools 却怎么也找不... 东方维通 工具 2026-03-27 04:35:22 2 回答 46 浏览 Chrome DevTools 工作区映射后为什么保存无效? 我按照文档把本地项目文件夹添加到 DevTools 的 Workspace 里了,也成功映射到了 Sources 面板,修改 CSS 能实时生效,但点保存(Ctrl+S)却提示“无法保存”。 试过右键... 司马瑞珺 工具 2026-03-14 22:03:18 2 回答 34 浏览 Chrome DevTools 工作区映射后为什么改代码不生效? 我用 Vue 写了个组件,本地开发时想通过 DevTools 的 Workspace 直接修改源码并保存,但改完刷新就没了,根本没写回文件。明明已经把项目文件夹加到 Workspace 了,也显示了绿... 紫瑶 工具 2026-03-08 21:48:21 2 回答 65 浏览 Taro项目里用了Redux,为什么页面跳转回来状态就没了? 大家好,我在用Taro3开发小程序时遇到了个奇怪的问题。我按照文档配置了Redux store, 在页面A里通过dispatch更新了状态,跳转到页面B再返回后,之前的状态就变回初始值了。我试过在页面... 爱学习的芳芳 框架 2026-02-18 17:03:28 1 回答 57 浏览 Chrome DevTools 动画面板为啥不显示我的 CSS 动画? 我在做一个按钮 hover 的缩放动画,但在 Chrome DevTools 的 Animations 面板里完全看不到任何动画记录,明明页面上有明显动效。我试过刷新、重新触发 hover,也确认打开... ❤浩迪 工具 2026-03-31 14:48:13
先确认下 Chrome 扩展是不是真的启用了。点浏览器右上角那个拼图图标,找到 Redux DevTools,确保它是开启状态。有时候装了但没启用也是白搭。
然后检查下开发者工具里,右上角有个 ">>" 的箭头,点开看看 Redux 是不是藏在里面。有时候 tab 太多了会被折叠进去,我之前也被这个坑过。
如果上面都没问题,试试刷新页面,或者干脆重启一下浏览器。Redux DevTools 需要在页面加载时注入那个全局变量,有时候装完扩展需要重启才能生效。
另外你的代码可以稍微改得更稳妥一点:
你原代码里用了
&&,这是 HTML 转义后的写法,如果直接复制粘贴的话其实是错的,要用真正的&&运算符才行。如果还是不行,打开控制台敲一下
window.__REDUX_DEVTOOLS_EXTENSION__看看是不是 undefined,如果是的话那就是扩展没正确加载。希望能帮到你!搞定了说一声哈。
先说个最容易被忽略的点,Chrome 开发者工具的 tab 栏是有宽度限制的,Redux DevTools 的 tab 很可能被折叠到最右边的那个 >> 箭头里面了。点开那个箭头看看有没有 Redux 选项,有的话右键把它 pin 住就行。
如果那里也没有,我们再检查几个地方。
第一,确认扩展真的装好了。在地址栏输入 chrome://extensions/,找找有没有 Redux DevTools,得是开启状态才行。要是连这个页面都找不到,那就是扩展根本没装上,去 Chrome 商店重新装一遍。
第二,你的代码写法本身没问题,但我建议稍微改一下,加个容错处理:
原理是这样:createStore 的第二个参数如果是函数,Redux 会把它当作 enhancer 来处理。你原来的写法在扩展没装的时候会返回 undefined,可能导致一些奇怪的问题。用 compose 包一下,再给个默认值 f => f(就是个透传函数),就比较稳了。
第三,打开控制台看看有没有报错。有时候是其他代码报错导致 store 根本没创建成功,那扩展自然也检测不到。
第四,刷新页面。这个听起来很傻,但有时候扩展刚装好需要刷新一下页面才能生效,或者你代码改了没刷新。
第五,如果你用的是 Redux Toolkit,那就更简单了,configureStore 默认就开启了 DevTools:
基本上就是这几个原因,绝大多数情况就是 tab 被折叠了或者扩展没开。排查完告诉我结果。