NextJS+Redux-TK项目Chrome调试器断点值显示异常问题

本地及服务器部署运行均正常，但Chrome调试器无法正常工作：断点暂停时，Sources标签下悬停变量或Scope区域的数值混乱且错误。例如selectedShip实际是包含name、shipCode等属性的船舶对象（控制台及应用运行均验证），但调试器中显示为router对象，还出现了两个不存在的pcl-global-headers元素，导致无法正常调试。

现有配置 #

• 已安装redux-devtools-extension（疑问：使用RTK是否必要？）
• store.js配置：

export const store = configureStore({
    reducer: {
        // 为简洁省略reducers
    },
    devTools: process.env.NODE_ENV !== 'prod'
});

• next.config.js配置：

module.exports = {
    env: {
        environment: env
    },
    productionBrowserSourceMaps: true,
    basePath: basePath
};

• Chrome Devtools的Source Maps设置已开启
• gulpfile.js仅用于Sass处理，无Source Maps/编译相关配置
• 疑问：是否遗漏了Babel相关配置？

解决方案建议 #

1. 卸载redux-devtools-extension
   RTK的configureStore已内置Redux DevTools支持，单独安装的包会和内置工具冲突，直接卸载即可。

2. 验证环境变量正确性
   确认process.env.NODE_ENV在开发环境下为development，可通过console.log(process.env.NODE_ENV)打印验证，避免因环境判断错误导致DevTools未启用。

3. 重置Next.js构建缓存
   删除.next文件夹和node_modules/.cache目录，重新构建项目，排查是否因缓存导致Source Maps生成异常。

4. Babel配置检查
   若项目有自定义.babelrc或babel.config.js，确保添加Source Maps配置：

{
  "sourceMaps": "both"
}

无自定义Babel配置则无需额外设置，Next.js默认会处理。

5. Chrome DevTools重置与扩展排查

• 打开DevTools设置（右上角齿轮图标），确认Sources选项下Enable JavaScript source maps和Enable CSS source maps已勾选
• 临时禁用所有Chrome扩展，排查是否有扩展干扰调试器变量解析

6. Gulp Sass任务添加Source Maps
   虽然Gulp仅处理Sass，但错误的Source Maps可能影响DevTools整体解析，为Sass任务添加配置：

const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass({ sourceMap: true }))
    .pipe(gulp.dest('dist/css'));
});

内容的提问来源于stack exchange，提问作者neekode