Sourcemaps off di una riga in Chrome, con Ruby on Rails, Webpack e React JS


96

Ho un problema in cui le mappe di origine generate da Webpack utilizzando l' inline-source-mapimpostazione di configurazione sono disattivate di una riga quando utilizzo il debugger di Chrome devtools. Webpack è impostato all'interno di un'applicazione Ruby on Rails per generare un file JavaScript concatenato e non minimizzato composto da un paio di dozzine di moduli. La maggior parte di questi moduli sono componenti ReactJS e vengono analizzati dal jsxcaricatore. L'output di Webpack viene quindi incluso nel application.jsfile insieme ad altre librerie JavaScript generate da gems.

Quando lo uso eval-source-map, non ci sono problemi. Qualcosa sull'uso di inline-source-mapfa sì che i numeri di riga vengano eliminati di uno.

L'ispezione di JavaScript che non è un componente React presenta ancora questo problema, quindi non penso sia correlato all'uso di jsx.


4
Sembra che una parte consideri la prima linea come linea 0e l'altra la consideri linea 1. Potrebbe essere necessario scegliere una definizione e regolare il valore per tutto ciò che funziona nell'altro modo.
Carl Smith

3
Se esiste un modo per regolare il valore che il browser utilizza per i numeri di riga nelle mappe sorgente, questo potrebbe potenzialmente risolvere il problema. Inoltre da allora ho fatto un po 'di fatica, e sembra che quando si utilizza Rails senza Sprockets che elabora il JS generato da webpack, il problema scompare. Il numero di riga è disattivato solo quando si utilizzano sia webpack che sprockets.
paradasia

1
Non ne ho idea. Stavo usando le mappe dei sorgenti di CoffeeScript con la libreria JS delle mappe dei sorgenti di Mozilla. Tutto è andato bene tranne che columnl'arg nel seguente codice viene passato in 1 troppo alta: window.onerror = function(message, url, line, column){}. Diminuirlo lo ha risolto. Nota: è specifico di Chrome, non conosco altri browser.
Carl Smith

2
Questo sembra correlato: github.com/plumberjs/plumber-requirejs/commit/… in quanto questo ha risolto il problema per
require.js

1
Potrebbe essere che aggiungi una riga di intestazione da qualche parte nel processo, ad esempio una dichiarazione di copyright?
rogierschouten

Risposte:


3

C'era un bug in Chrome, prova l'ultima versione, anche sulla configurazione del tuo webpack prova a usare diverse mappe dei sorgenti su devtool prova tutte queste per vedere se una funziona per la mappa dei sorgenti inline:

  • inline-source-map

  • mappa-sorgente-inline-economica

per altre configurazioni differenti:

  • mappa-sorgente-economica

  • mappa-sorgente-modulo-economico

  • mappa-sorgente-di-valutazione-modulo-economico

sulla configurazione del webpack:

{

...

devtool:'source-map'

...

}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.