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

Unable to set breakpoints for nextjs app

オープン
#208 コメント 7 件 リアクション 3 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
447
フォーク
76
PR マージ指標
30日以内にマージされた PR はありません

説明

I'm trying to debug my nextjs app with Firefox.

I managed to debug it with chrome.

The error is that firefox can't find the files.
I already tried to add pathMappings but that is a lot to do and it still does not find components that are used inside these mappings.
Besides that: the chrome extension does not need these path mappings.

// launch.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",
"reAttach": true,
"name": "Firefox",
"url": "http://localhost:3000/",
"webRoot": "${workspaceFolder}",
"pathMappings": [
{"url": "/", "path": "${workspaceFolder}/pages/index.tsx"}
]
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "attach",
"name": "Server",
"port": 9229
}
],
"compounds": [
{
"name": "QLS: FullChrome",
"configurations": ["Server", "Chrome"]
},
{
"name": "QLS: FullFirefox",
"configurations": ["Server", "Firefox"]
}
]
}
```

With the specified pathMappings I can set breakpoints in `index.tsx`

My demo repo: https://github.com/Naxos84/nextjs-firefox-debug-demo

node version: 12.16.0
npm version: 6.13.4
vscode: 1.45.1
OS: windows 10

If you need any additional info please let me know.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされている nextjs-firefox-debug-demo リポジトリから始め、launch.json の Firefox 設定を使用してブレークポイントの失敗を再現します。Firefox と Chrome で、pages/index.tsx およびネストされたコンポーネントのブレークポイントとソースファイルの解決を比較し、その後、Firefox が大規模な pathMappings なしで関連ファイルを解決できることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
next.js, typescript, vscode
領域
devtools, frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。