Debug del server di sviluppo webpack in vs codice?

Question

È possibile configurare launch.json per il debug del server di sviluppo webpack? Nel mio caso, sto lavorando su un'applicazione React universale (server-rendered tramite express) e sarebbe davvero bello poter eseguire il debug del lato server direttamente in VS Code.

Answer 1

Ho lavorato a un'applicazione VueJS utilizzando Webpack e sono riuscito a eseguire il debugging con successo utilizzando il debugger di chrome VSCode dopo aver scavato per qualche ora. So che la tua applicazione è di tipo React, ma proverò a spiegare i passaggi che ho seguito per ottenere il debugging. Speriamo che questo ti aiuti a configurare il tuo launch.json per eseguire il debug di un'app react/webpack in VSCode. Qui è stata la mia launch.json finale:

{ 
     // Using the chrome debugger to debug a Vue application 
     "type": "chrome", 
     "request": "launch", 
     "name": "Chrome launch", 
     // Set the URL to match the root URL of your application 
     "url":"http://localhost:8000/#/", 
     "webRoot": "${workspaceRoot}", 
     /** Configure source map paths using the instructions below */ 
     "sourceMapPathOverrides": { 
      "webpack:///./src/*.js": "${workspaceRoot}/src/*.js", 
      "webpack:///src/*.vue": "${workspaceRoot}/src/*.vue", 
      "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*" 
     } 
    } 

La chiave per me è stato correttamente Progettazione dell'opzione soureMapPathOverrides in launch.json. Innanzitutto, assicurati che l'opzione "devtool" nella configurazione del webpack sia stata impostata su "source-map" o "cheap-eval-source-map" (ho usato "source-map", altre impostazioni potrebbero anche funzionare, ma Non li ho testati).

--Setting il sourceMapPathOverrides--

Che cosa si vuole fare è mappare i file di origine mappa (che sembrano essere in modo non corretto mappati per impostazione predefinita, almeno per me) per la loro posizione corrispondente sul computer locale. Per fare ciò, esegui normalmente il programma usando webpack-dev-server o webpack. Quindi aprilo in Chrome e apri la scheda "fonti" di devtools. Nella scheda "fonti", all'interno del navigatore (a sinistra per impostazione predefinita), apri la scheda di rete e osserva la struttura delle cartelle.

Si dovrebbe vedere una struttura di cartelle che è qualcosa di simile:

top 
    localhost:8000 
     assets 
     src 
     ... 
    (no domain) 
     ... 
    webpack:// 
     (webpack) 
      ... 
     (webpack)-dev-server 
      ... 
     . 
      ... 
     src 
      ... 

Ora, si dovrebbe essere in grado di trovare sia i file transpiled ei tuoi file di origine da qualche parte qui (In caso contrario, fare doppio controllare il vostro "DevTool "è stato impostato su" source-map "o" cheap-eval-source-map ". Ora, è necessario mappare ogni file sorgente nella loro posizione sul disco rigido. Preferibilmente, si desidera mapparli per estensione di file, piuttosto che Nel caso di Vue, ho dovuto mappare i file .js e .vue nelle posizioni corrispondenti, con la cartella node-modules mappata separatamente (come potete vedere nel mio launch.json). Probabilmente sarà un altro mappatura per reazione

Imposta l'URL di launch.json in modo che corrisponda all'URL dell'applicazione di webpack e il tuo launch.json deve essere impostato!

Ora, dovresti essere in grado di eseguire il file utilizzando webpack-dev-server (o webpack) e quindi avviare il debugger. Dovresti essere in grado di impostare i breakpoint in VSCode ed eseguire il debug normalmente. Spero che questo aiuti qualcuno.