firefox-devtools / firefox-devtools/vscode-firefox-debug
pathMappings don't work correctly with custom webRoot
- Vorherrschende Sprache
- TypeScript
- Sterne
- 447
- Forks
- 76
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
Hello,
I have a repository that contains two different node.js projects managed by lerna on the root of it. Here is the tree output of the repository;
```
.
├── lerna.json
├── package.json
├── studio
│ ├── config
│ │ └── @sanity
│ │ ├── data-aspects.json
│ │ ├── default-layout.json
│ │ ├── default-login.json
│ │ └── form-builder.json
│ ├── package.json
│ ├── plugins
│ ├── README.md
│ ├── sanity.json
│ ├── schemas
│ │ ├── author.js
│ │ ├── blockContent.js
│ │ ├── category.js
│ │ ├── post.js
│ │ └── schema.js
│ ├── static
│ │ └── favicon.ico
│ ├── tsconfig.json
│ ├── versel.json
│ └── yarn.lock
└── web
├── interfaces
│ └── index.ts
├── lib
│ ├── api.ts
│ └── sanity.ts
├── LICENSE
├── next-env.d.ts
├── package.json
├── package-lock.json
├── pages
│ ├── about.tsx
│ ├── _app.tsx
│ ├── _document.tsx
│ └── index.tsx
├── public
│ └── logo.png
├── README.md
├── src
│ ├── AuthorBox.tsx
│ ├── Copyright.tsx
│ ├── HeroPost.tsx
│ ├── Layout.tsx
│ ├── Link.tsx
│ ├── Maintenance.tsx
│ ├── PostCard.tsx
│ ├── ProTip.tsx
│ └── theme.tsx
└── tsconfig.json
```
The problem occurs when I try to debug the `web` package. It's next.js application with TypeScript.
I've set `webRoot` to `${workspaceFolder}/web/` as the documentation suggests. At this point according to the documentation, default pathMappings should be added according to this webRoot. But instead, they don't.
After setting the `webRoot` and start the debugging process, the extension throws a question about missing pathMapping as soon as you want to set a breakpoint. Here is the screenshot of the question;

After accepting that question and restarting the debugger everything works at first sight. It catches all the breakpoints and pauses the process when hits them as expected.
But as soon as starting to run the program one or a few steps into (F11 shortcut) further, error messages start to appears.

Here are the example messages of missing source file errors;
```
Could not load source '_n_e/node_modules/@material-ui/core/esm/styles/index.js': Failed sourceRequest: the requested source can't be found.
```
After a few more steps I again get the error;
```
Could not load source '_n_e/node_modules/@material-ui/core/esm/styles/makeStyles.js': Failed sourceRequest: the requested source can't be found.
```
This error occurs when the step is on source codes from the `node_modules` and `.next` folder.
This is my VSCode debugging configuration. I've marked the section added after accepting the auto-mapping question. There is clearly something wrong here;
```json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"name": "Next: Firefox",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/web/",
// This pathMappings has added after question accepted
"pathMappings": [
{
"url": "webpack://_n_e/src",
"path": "${workspaceFolder}/web/src"
}
]
},
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "npm",
"args": [
"run",
"debug"
],
"port": 9229,
"console": "integratedTerminal",
"cwd": "${workspaceFolder}/web/"
}
],
"compounds": [
{
"name": "Next: Full",
"configurations": ["Next: Node", "Next: Firefox"]
}
]
}
```
Beitragsleitfaden
Rechercherichtung
Reproduziere das Problem mit der gezeigten VS Code-Debugkonfiguration, wobei webRoot auf ${workspaceFolder}/web/ gesetzt ist und die Firefox- und Node-Konfigurationen gemeinsam gestartet werden. Untersuche, wie benutzerdefiniertes webRoot und pathMappings Quellen aus webpack://, node_modules und .next auflösen, während du die Next.js-App schrittweise durchläufst; als erledigt gilt die Aufgabe, wenn Haltepunkte und das schrittweise Ausführen keine Fehler wegen fehlender Quellen mehr verursachen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- nextjs, node.js, typescript, vscode, webpack
- Bereich
- devtools
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 32/100