VSCode는 nextjs (9.5.2)에 대한 클라이언트 측 중단 점을 바인딩하지 않습니다.

Aug 21 2020

nextjs의 최근 업데이트 중 하나에서 vscode의 클라이언트 측 크롬 디버깅이 손상된 것 같습니다. 다음 구성을 시작할 때 내 중단 점이 바인딩되지 않습니다.

        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Chrome on localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/pathto/myapp"
        },

Debugger for Chrome (v4.12.10)확장 프로그램을 사용하고 있으며 nextjs 노드 프로세스가 아닌 Chrome에서 실행하여 VSCode (v1.48.1)제공되는 클라이언트 측 자바 스크립트를 디버깅하고 nextjs (v9.5.2)있습니다.

변경된 사항과 디버거가 중단 점을 다시 바인딩하는 방법을 아는 사람이 있습니까?

답변

3 SebastianNemeth Aug 21 2020 at 20:05

이전에는 vscode가 (기본적으로) 다음 소스 맵 경로를 사용하여 웹팩에서 제공하는 소스 맵을 해석했습니다.

            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*", "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*", "meteor://💻app/*": "${webRoot}/*"
            }

sources하지만 크롬 devtools 를 살펴보면 신비한 _N_E경로 아래에서 소스 맵을 찾을 수 있습니다 (오렌지색 폴더는 소스 맵이있는 소스를 나타냄).

최근 업데이트에서 webpack 5를 준비하면서 nextjs 팀이 소스 맵이 제공되는 경로를 변경 한 것 같습니다. https://github.com/vercel/next.js/pull/15955

따라서 이는 기본 소스 맵 경로 재정의가 올바르게 해결되지 않음을 의미합니다.

"webpack://_N_E/*": "${webRoot}/*"재정의로 추가하면 이 문제가 해결되었습니다!

또한 //이전의 ///삼중 슬래시 대신 이중 슬래시를 확인하십시오 .

내 작업 시작 구성은 다음 configurations.vscode/launch.json같습니다.

        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Chrome on localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/pathto/myapp",
            "sourceMapPathOverrides": {
                "webpack://_N_E/*": "${webRoot}/*"
            }
        },

/ pathto / myapp를 리포지토리의 앱 루트 경로로 변경하는 것을 잊지 마십시오. /src당신이 그것을 사용한다면 이것은 또한 끝날 수 있습니다 . 또는 nextjs즉시 사용 하는 경우 완전히 제거하십시오 !

이것이 누군가를 돕기를 바랍니다! 당연히 혼란스러워서 머리를 긁적입니다 ...

편집하다:

나는 실제로 nextjs그들의 문서에 대한 몇 가지 문제 를 지적하면서 문제를 열었습니다 . 다른 많은 사람들이이 문제를 가지고 있다면, nextjs 팀이 그것을 알 수 있도록 거기에 메모를하는 것이 좋습니다!

https://github.com/vercel/next.js/issues/16442