Javascript Next.js和FireFox使用源代码映射进行调试

我正在使用Next.js，并遵循了由它修改的方法来修复节点中的断点

节点中的断点工作正常。他们也在FireFox中工作。当我在渲染中添加断点时，它将移动到另一行，并在VSCode中出现一个弹出窗口，其中显示：

此文件的路径未映射到Firefox加载的任何url。也许调试配置需要此文件的路径映射-是否让路径映射向导尝试为您创建路径映射

单击“是”不起任何作用。它将在适当的点中断，但我正试图找出如何消除此警告并阻止断点跳转

launch.json

"configurations": [
    {
      "name": "Next: Launch",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "profile": "dev-edition-default"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "port": 9230,
      "console": "integratedTerminal",
      "env": {
        "NODE_OPTIONS": "--inspect=9230"
      }
    }],
  "compounds": [
    {
      "name": "Next: Full Launch",
      "configurations": ["Next: Node", "Next: Launch"]
    },
    {
      "name": "Next: Full Attach",
      "configurations": ["Next: Node", "Next: Attach"]
    }
  ]

next.config.js

module.exports = {
  webpack(config) {
    config.devtool = "eval-source-map";
    return config;
  }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "typeRoots": ["node_modules/mapkit-typescript", "node_modules/@types"],
    "sourceMap": true
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

---

您的launch.json文件指定

“url”：http://localhost:3000“

但我假设您在Firefox中打开的是localhost:9230。将launch.json URL更改为正确的端口，错误就会消失：）

编辑：

由于上述错误，请尝试以下方法：

在firefox对象中，添加一个pathMappings键，该值是一个将本地文件路径映射到本地主机url的对象

{
  "name": "Next: Launch",
  "type": "firefox",
  "request": "launch",
  "reAttach": true,
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}",
  "profile": "dev-edition-default",
  "pathMappings": {
    "path/in/your/computer/index.html":"http://localhost:3000/index.html"
  }
},

---

感谢您的回复，Firefox位于localhost:3000上。9230是NodeHm的web套接字检查端口，感谢您的反馈。我会再调查一些，如果我找到答案，我会回来：）你能找到解决问题的办法吗。我也有同样的问题