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

Lesezeit: 2 Minuten

Benutzer-Avatar
paradasie

Ich habe ein Problem, bei dem die von Webpack generierten Sourcemaps mit der inline-source-map Die Konfigurationseinstellungen sind um eine Zeile verschoben, 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 von der analysiert jsx Lader. Die Ausgabe von Webpack ist dann in der enthalten application.js Datei zusammen mit einigen anderen JavaScript-Bibliotheken, die von Gems generiert wurden.

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

Das Überprüfen von JavaScript, das keine React-Komponente ist, hat immer noch dieses Problem, daher glaube ich nicht, dass es mit der Verwendung von jsx zusammenhängt.

  • Es klingt, als würde eine Seite die erste Linie als Linie betrachten 0 und der andere hält es für Linie 1. Möglicherweise müssen Sie nur eine Definition auswählen und den Wert für alles anpassen, was in die andere Richtung funktioniert.

    – Carl Smith

    7. Juni 2014 um 13:35 Uhr

  • Wenn es eine Möglichkeit gibt, den Wert anzupassen, den der Browser für Zeilennummern in den Sourcemaps verwendet, könnte dies das Problem möglicherweise lösen. Seitdem habe ich auch ein bisschen experimentiert, und es scheint, dass das Problem verschwindet, wenn Rails ohne Sprockets verwendet wird, das das von Webpack generierte JS verarbeitet. Die Zeilennummer ist nur ausgeschaltet, wenn sowohl Webpack als auch Sprockets verwendet werden.

    – Paradasie

    8. Juni 2014 um 15:56 Uhr


  • Ich habe keine Ahnung. Ich habe die Sourcemaps von CoffeeScript mit der Sourcemap-JS-Bibliothek von Mozilla verwendet. Alles war in Ordnung, außer dass die column arg im folgenden Code wird in 1 zu hoch übergeben: window.onerror = function(message, url, line, column){}. Dekrementieren hat das behoben. Hinweis: Das ist Chrome-spezifisch, ich weiß nichts über andere Browser.

    – Carl Smith

    8. Juni 2014 um 16:34 Uhr


  • Das scheint verwandt zu sein: github.com/plumberjs/plumber-requirejs/commit/… dadurch wurde das Problem für require.js behoben

    – justingordon

    13. September 2014 um 20:11 Uhr


  • Könnte es sein, dass Sie irgendwo im Prozess eine Kopfzeile hinzufügen, z. B. eine Copyright-Erklärung?

    – rogierschouten

    11. Mai 2015 um 21:06 Uhr

Es gab einen Fehler in Chrome. Probieren Sie die neueste Version aus. Versuchen Sie auch in Ihrer Webpack-Konfiguration, verschiedene Sourcemaps im Devtool zu verwenden. Probieren Sie alle diese aus, um zu sehen, ob eine für die Inline-Sourcemap funktioniert:

  • Inline-Source-Map

  • billige-inline-source-map

für andere verschiedene Konfigurationen:

  • billige-source-map

  • billige-modul-source-map

  • billiges-modul-eval-source-map

in der Webpack-Konfiguration:

{

...

devtool:'source-map'

...

}

Konfigurieren mit devtool: 'inline-module-source-map' in webpack meine Probleme behoben.

1186620cookie-checkSourcemaps um eine Zeile in Chrome, mit Ruby on Rails, Webpack und React JS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy