WSL2下Next.js Dev Server在Chrome DevTools仅显示打包代码求助

针对你遇到的WSL2环境下Next.js开发时DevTools无法正确映射源码的问题，可按以下步骤排查解决：

1. 修复路径映射差异 #

WSL2的Linux路径与Windows路径格式不匹配，导致DevTools无法识别source map中的文件路径。可通过修改next.config.js（无则新建）添加Webpack配置，自动转换路径格式：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    if (process.env.NODE_ENV === 'development') {
      config.devtool = 'source-map';
      config.output.devtoolModuleFilenameTemplate = (info) => {
        // 将WSL的/mnt/c/...路径转换为Windows的C:/...格式
        const path = info.absoluteResourcePath.replace(/^\/mnt\/([a-z])\//, '$1:/');
        return `file:///${path.replace(/\\/g, '/')}`;
      };
    }
    return config;
  },
};

module.exports = nextConfig;

修改后重启npm run dev，DevTools即可正确解析源码路径。

2. 改用WSL2局域网IP访问 #

localhost转发可能干扰source map的请求传递，可直接用WSL2的局域网IP启动服务：

• 在WSL2终端执行hostname -I获取当前IP（通常为192.168.x.x格式）
• 启动服务时指定该IP：HOST=你的WSL_IP npm run dev
• 在Windows Chrome中访问http://你的WSL_IP:3000，绕过localhost转发，确保source map请求正常传递。

3. 将项目移至WSL2内部文件系统 #

若项目当前放在挂载的Windows盘符（如/mnt/c/xxx），建议移到WSL2内部目录（如~/projects/xxx）：

• 复制项目文件到WSL内部目录
• 重新执行npm ci安装依赖
• 启动服务，避免Windows挂载盘符带来的路径解析异常和性能问题。

4. 清除DevTools缓存 #

旧的source map缓存可能导致异常，可强制刷新：

• 打开Chrome DevTools，按Ctrl+Shift+R硬刷新页面
• 在Sources面板中，右键点击左侧文件夹，选择Delete cached content，清除缓存后重新加载页面。

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