VSCode non assocerà i punti di interruzione lato client per nextjs (9.5.2)

Aug 21 2020

In uno dei recenti aggiornamenti a nextjs, il debugging di Chrome lato client in vscode sembra essersi interrotto. Quando lancio la seguente configurazione, nessuno dei miei punti di interruzione è mai associato:

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

Nota che sto utilizzando l' Debugger for Chrome (v4.12.10)estensione VSCode (v1.48.1)e sto eseguendo il debug del javascript lato client servito nextjs (v9.5.2)eseguendo in Chrome, non il processo del nodo nextjs.

Qualcuno sa cosa è cambiato e come convincere il debugger a associare nuovamente i punti di interruzione?

Risposte

3 SebastianNemeth Aug 21 2020 at 20:05

In precedenza, vscode utilizzava (per impostazione predefinita) i seguenti percorsi della mappa di origine per interpretare le mappe di origine servite dal webpack:

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

Se guardi in sourcesChrome devtools, tuttavia, puoi trovare le mappe di origine sotto il _N_Epercorso misterioso (le cartelle arancioni si riferiscono a fonti con mappe di origine).

Sembra che in un recente aggiornamento, in preparazione per il webpack 5, il team di nextjs abbia cambiato il percorso in cui vengono servite le mappe di origine:https://github.com/vercel/next.js/pull/15955

Ciò significa che nessuna delle sostituzioni predefinite del percorso della mappa di origine viene risolta correttamente.

L'aggiunta "webpack://_N_E/*": "${webRoot}/*"come override ha risolto questo problema!

Inoltre, nota la //doppia barra invece delle precedenti ///triple barre.

Ecco la mia configurazione di avvio funzionante (inseriscila configurationsin .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}/*"
            }
        },

Non dimenticare di modificare /pathto/myapp nel percorso della radice dell'app nel tuo repository. Questo potrebbe anche finire /srcse lo stai usando. Oppure rimuovilo completamente se lo stai usando nextjsfuori dalla scatola!

Spero che questo aiuti qualcuno! Sicuramente mi ha lasciato grattarmi la testa per la confusione...

Modificare:

In realtà ho aperto un problema nextjssottolineando alcuni problemi con la loro documentazione. Se molte altre persone hanno questo problema, suggerisco di prendere nota lì in modo che il team di nextjs ne venga a conoscenza!

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