Question

我正在使用Next.js，并且遵循here修改的open bug report处的配方来修复节点中的断点。

Node的断点效果很好。他们也在FireFox中工作。当我在渲染器中添加一个断点时，它将移至另一行，并且在VSCode中弹出一个对话框，提示：

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

单击是不会执行任何操作。它会在适当的时间点中断，但是我正在尝试找出如何摆脱此警告并阻止断点跳跃的方法。

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"
  }
},

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

1 个答案: