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

Question

我正在使用 Next.js，并已按照 here 修改的配方 open bug report 修复节点中的断点。

Node 中的断点运行良好。他们也有点在 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"]
}

Answer 1

您的 launch.json 文件指定了"url": "http://localhost:3000"，但我假设在 Firefox 中您打开的是 localhost:9230。将 launch.json URL 更改为正确的端口，错误应该会消失 :)

编辑：

既然上面错了，试试这个：

https://github.com/felixfbecker/vscode-php-debug/issues/254#issuecomment-410244336

在您的 firefox 对象中，添加一个 pathMappings 键，该值是将本地文件路径映射到 localhost 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"
  }
},