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

Question

I'm using Next.js, and have followed the recipe locatedhere modified by this open bug report to fix breakpoints in node.

Breakpoints in Node are working great. They are also kind of working in FireFox. When I add a breakpoint inside my render, it will move to a different line and a pop-up will come up in VSCode which says:

This file's path isn't mapped to any url that was loaded by Firefox. Perhaps your debug configuration needs a pathMapping for this file - do you want to let the Path Mapping Wizard try to create one for you?

Clicking yes does nothing. It will break at the appropriate point, but I'm trying to figure out how to get rid of this warning and stop the breakpoints from jumping.

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

Your launch.json file specifies "url": "http://localhost:3000" but I assume in Firefox you're opening localhost:9230. Change the launch.json URL to the correct port and the error should go away :)

Edit:

Since the above was wrong, try this:

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

In your firefox object, add a pathMappings key and the value is an object that maps the local filepath to the 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"
  }
},