Sourcemaps werden in Chrome mit Ruby on Rails, Webpack und React JS um eine Zeile entfernt

96

Ich habe ein Problem, bei dem die von Webpack mithilfe der inline-source-mapKonfigurationseinstellung generierten Quellenzuordnungen um eine Zeile verschoben sind, wenn ich den Chrome devtools-Debugger verwende. Webpack wird in einer Ruby on Rails-Anwendung eingerichtet, um eine verkettete, nicht minimierte JavaScript-Datei zu generieren, die aus ein paar Dutzend Modulen besteht. Die meisten dieser Module sind ReactJS-Komponenten und werden vom jsxLoader analysiert . Die Ausgabe von Webpack wird dann application.jszusammen mit einigen anderen von Gems generierten JavaScript-Bibliotheken in die Datei aufgenommen.

Wenn ich benutze eval-source-map, gibt es kein Problem. Etwas über die Verwendung von inline-source-mapbewirkt, dass die Zeilennummern um eins weggeworfen werden.

Bei der Überprüfung von JavaScript, das keine React-Komponente ist, tritt dieses Problem immer noch auf. Daher glaube ich nicht, dass es mit der Verwendung von jsx zusammenhängt.

javascript ruby-on-rails google-chrome webpack source-maps Paradasie
quelle
4
Es klingt so, als würde eine Seite die erste Zeile als Zeile 0und die andere als Zeile betrachten 1. Möglicherweise müssen Sie nur eine Definition auswählen und den Wert für alles anpassen, was anders funktioniert.
Carl Smith
3
Wenn es eine Möglichkeit gibt, den Wert anzupassen, den der Browser für Zeilennummern in den Quellkarten verwendet, kann dies möglicherweise das Problem lösen. Außerdem habe ich seitdem ein wenig experimentiert, und es scheint, dass bei Verwendung von Rails without Sprockets, die das von Webpack generierte JS verarbeiten, das Problem behoben ist. Die Zeilennummer ist nur deaktiviert, wenn sowohl das Webpack als auch die Kettenräder verwendet werden.
Paradasia
1
Ich habe keine Ahnung. Ich habe die Quellkarten von CoffeeScript mit der Quellkarten-JS-Bibliothek von Mozilla verwendet. Alles war in Ordnung, außer dass das columnArgument im folgenden Code in 1 zu hoch übergeben wird : window.onerror = function(message, url, line, column){}. Durch Dekrementieren wurde das behoben. Hinweis: Das ist Chrome-spezifisch. Ich kenne keine anderen Browser.
Carl Smith
2
Dies scheint verwandt zu sein: github.com/plumberjs/plumber-requirejs/commit/… , da dies das Prolblem für require.js behoben hat
justingordon
1
Könnte es sein, dass Sie irgendwo im Prozess eine Kopfzeile hinzufügen, z. B. eine Copyright-Erklärung?
Rogierschouten

Antworten:

3

Es gab einen Fehler in Chrome. Probieren Sie die neueste Version aus. Versuchen Sie auch in Ihrer Webpack-Konfiguration, verschiedene Quellkarten auf devtool zu verwenden. Versuchen Sie all dies, um festzustellen, ob eine für die Inline-Quellkarte funktioniert:

  • Inline-Quellkarte

  • billige-inline-quellkarte

für andere verschiedene Konfigurationen:

  • billige Quellkarte

  • billige-Modul-Quellkarte

  • billige-Modul-Bewertung-Quell-Karte

in der Webpack-Konfiguration:

{

...

devtool:'source-map'

...

}
Agamennon
quelle