firefox-devtools / firefox-devtools/vscode-firefox-debug

pathMappings don't work correctly with custom webRoot

Aperta
#226 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
447
Fork
76
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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;
![Screenshot from 2020-09-06 22-33-54](https://user-images.githubusercontent.com/5150432/92333843-4498a500-f091-11ea-87b2-67ecb45c3249.png)

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.
![step](https://user-images.githubusercontent.com/5150432/92333919-d7d1da80-f091-11ea-8b25-a1b31a3678e5.png)

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"]
}
]
}
```

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci il problema usando la configurazione di debug di VS Code mostrata, con webRoot impostato su ${workspaceFolder}/web/ e le configurazioni Firefox e Node avviate insieme. Analizza come webRoot personalizzato e pathMappings risolvono le sorgenti provenienti da webpack://, node_modules e .next durante l’esecuzione passo-passo dell’applicazione Next.js; il lavoro è completato quando i breakpoint e l’esecuzione passo-passo non producono più errori di sorgente mancante.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
nextjs, node.js, typescript, vscode, webpack
Ambito
devtools
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
32/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.