2014-05-22 11 views
94

Ich habe ein Problem ab, wo die von Webpack erzeugt sourcemaps mit der inline-source-map Konfigurationseinstellung deaktiviert um eine Zeile ist, wenn ich die Chrome-Debugger DevTools . Webpack wird in einer Ruby-on-Rails-Anwendung eingerichtet, um eine verkettete, nicht reduzierte JavaScript-Datei zu generieren, die aus einigen Dutzend Modulen besteht. Die meisten dieser Module sind ReactJS-Komponenten und werden vom Loader jsx analysiert. Die Ausgabe von Webpack wird dann in die Datei application.js zusammen mit einigen anderen von Edelsteinen generierten JavaScript-Bibliotheken aufgenommen.Sourcemaps um eine Zeile in Chrome, mit Ruby on Rails, Webpack und Reagieren JS

Wenn ich eval-source-map verwende, gibt es kein Problem. Bei der Verwendung von inline-source-map werden die Zeilennummern um eins verworfen.

Bei der Überprüfung von JavaScript, das keine React-Komponente ist, tritt dieses Problem immer noch auf. Daher glaube ich nicht, dass es sich um die Verwendung von jsx handelt.

+4

Es klingt, als ob eine Seite die erste Zeile als Linie "0" betrachtet und die andere berücksichtigt es Linie "1". Sie müssen möglicherweise nur eine Definition auswählen und den Wert für alles anpassen, das anders funktioniert. –

+3

Wenn es eine Möglichkeit gibt, den Wert anzupassen, den der Browser für Zeilennummern in den Quellkarten verwendet, könnte das möglicherweise das Problem lösen. Auch seitdem habe ich ein bisschen experimentiert, und es scheint, dass bei Verwendung von Rails ohne Sprockets Verarbeitung der JS von Webpack, das Problem verschwindet. Die Zeilennummer ist nur bei Verwendung von Webpack und Kettenrädern deaktiviert. – paradasia

+1

Ich habe keine Ahnung. Ich benutzte CoffeeScript's Quellkarten mit Mozillas Source-Map JS-Bibliothek. Alles war in Ordnung, außer dass der 'column' arg im folgenden Code in 1 zu hoch übergeben wird:' window.onerror = function (message, url, line, column) {} '. Dekrementieren hat das behoben. Hinweis: Das ist Chrome-spezifisch, ich weiß nichts über andere Browser. –

Antwort

3

Es gibt einen Fehler in Chrom, versuchen die neueste Version, die auch auf Ihrem webpack Config mit verschiedenen sourcemaps auf DevTool versuchen, alle diese versuchen zu sehen, ob man für die Inline-Source-Karte funktioniert:

  • Inline- Quelle-Karte

  • billig-Inline-source-Karte

für verschiedene andere configs:

  • billig-Source-Karte

  • billig-Modul-Source-Karte

  • billig-Modul-eval-Source-Karte

auf webpack config:

{ 

... 

devtool:'source-map' 

... 

}