Configurare il webpack per consentire il debug del browser

130

Sono nuovo di Webpack e sto convertendo un'applicazione Web esistente per usarlo.

Sto usando il webpack per raggruppare e minimizzare il mio JS che è fantastico quando distribuito, tuttavia questo rende molto difficile il debug durante lo sviluppo.

In genere utilizzo il debugger integrato di Chrome per eseguire il debug di problemi JS. (O Firebug su Firefox). Tuttavia con il webpack tutto è contenuto in un unico file e diventa difficile eseguire il debug usando quel meccanismo.

C'è un modo per attivare e disattivare rapidamente il raggruppamento? o attivare e disattivare la minimizzazione?

Ho cercato di vedere se c'è qualche configurazione del caricatore di script o altre impostazioni, ma non sembra invadente.

Non ho ancora avuto il tempo di convertire tutto per agire come un modulo e l'uso richiede. Quindi uso semplicemente il modello request ("script! ./ file.js") per il mio caricamento.

javascript webpack

— Jim
fonte

3

Hai trovato una soluzione a questo problema? Preferisco anche usare la console JS per esaminare le variabili disponibili. Il mio problema principale è che il webpack nasconde tutte queste variabili all'interno del modulo, quindi diventano inaccessibili

— user1496984

2

Non ho mai trovato una soluzione, quindi purtroppo abbiamo interrotto l'utilizzo del webpack.

— Jim,

Cosa usi adesso? Al momento in cui scrivo il webpack sembra ancora lo strumento di costruzione più popolare che riesco a trovare.

— Richard,

100

È possibile utilizzare le mappe di origine per preservare la mappatura tra il codice sorgente e quello raggruppato / minimizzato.

Webpack fornisce l' opzione devtool per migliorare il debug nello strumento sviluppatore semplicemente creando una mappa di origine del file in bundle per te. Questa opzione può essere utilizzata dalla riga di comando o utilizzata nel file di configurazione webpack.config.js .

Di seguito puoi trovare un esempio inventato usando la riga di comando per generare il file in bundle ( bundle.js ) insieme al file della mappa di origine generato ( bundle.js.map ).

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

Se apri index.html nel tuo browser (utilizzo Chrome ma penso che sia supportato anche in altri browser), vedrai nella scheda Sorgenti che hai il file in bundle nel file: // schema e i file di origine in lo speciale webpack: // schema.

E sì, puoi iniziare il debug come se avessi il codice sorgente originale! Prova a mettere un punto di interruzione in una riga e aggiorna la pagina.

— dreyescat
fonte

2

bundle.map punta al file js ma cosa succede se il file js attuale ha anche una mappa per dire tsx o ts?

— Andrej Kovacik,

4

Penso che sia meglio impostare il tuo progetto usando la modalità di produzione e sviluppo https://webpack.js.org/guides/production/ Include anche come mappare il tuo codice per il debug

devtool: 'inline-source-map'

— m-Farhan
fonte

3

Le mappe di origine sono molto utili come già sottolineato.
Ma a volte selezionare quale mappa sorgente utilizzare potrebbe essere una seccatura.

Questo commento su uno dei problemi della mappa di origine di Webpack potrebbe essere utile per selezionare quale mappa di origine utilizzare in base ai requisiti.

— Abhinav Singi
fonte

1

Dai un'occhiata qui

è un beautifier che deminifica javascript. in fondo, ha un elenco di vari plugin ed estensioni per i browser, dai un'occhiata.

potresti essere interessato a Deminificatore FireFox , si suppone che deminifichi e modifichi il tuo javascript quando viene recuperato dal server.

inserisci qui la descrizione dell'immagine

— Banana
fonte

10

la deminificazione non equivale alla disabilitazione della minimizzazione poiché i commenti sono ancora eliminati, i numeri di riga non corrispondono più ei nomi delle variabili non sono gli stessi. Detto questo, è meglio di niente.

— Jim,

1

Chrome ha anche un'opzione di formato nel debugger. Non ha tutte le informazioni di un normale file sorgente ma è un ottimo inizio, inoltre è possibile impostare punti di interruzione. Il pulsante su cui fai clic si trova in basso a sinistra nella prima schermata, sembra {}.

Prima della formattazione:

Dopo la formattazione.

— Jolly1234
fonte