Sourcemaps d'une ligne dans Chrome, avec Ruby on Rails, Webpack et React JS

96

J'ai un problème où les sourcemaps générés par Webpack à l'aide du inline-source-mapparamètre de configuration sont désactivés d'une ligne lorsque j'utilise le débogueur Chrome devtools. Webpack est configuré dans une application Ruby on Rails pour générer un fichier JavaScript concaténé et non réduit composé de quelques dizaines de modules. La plupart de ces modules sont des composants ReactJS et sont analysés par le jsxchargeur. La sortie de Webpack est ensuite incluse dans le application.jsfichier avec d'autres bibliothèques JavaScript générées par gems.

Quand je l'utilise eval-source-map, il n'y a pas de problème. Quelque chose à propos de l'utilisation de inline-source-mapfait que les numéros de ligne sont rejetés par un.

L'inspection de JavaScript qui n'est pas un composant React pose toujours ce problème, donc je ne pense pas que cela soit lié à l'utilisation de jsx.

javascript ruby-on-rails google-chrome webpack source-maps paradasie
la source
4
Il semble qu'un côté considère la première ligne comme une ligne 0et l'autre la considère comme une ligne 1. Vous devrez peut-être choisir une définition et ajuster la valeur de tout ce qui fonctionne dans l'autre sens.
Carl Smith
3
S'il existe un moyen d'ajuster la valeur que le navigateur utilise pour les numéros de ligne dans les sourcemaps, cela pourrait potentiellement résoudre le problème. Depuis, j'ai également fait un peu d'expérimentation, et il semble que lors de l'utilisation de Rails sans Sprockets traitant le JS généré par webpack, le problème disparaît. Le numéro de ligne n'est désactivé que lors de l'utilisation à la fois du Webpack et des pignons.
paradasia
1
Je n'en ai aucune idée. J'utilisais les sourcemaps de CoffeeScript avec la bibliothèque JS source-map de Mozilla. Tout allait bien , sauf que le columnarg dans le code suivant est passé en 1 trop élevé: window.onerror = function(message, url, line, column){}. La décrémentation a corrigé cela. Remarque: c'est spécifique à Chrome, je ne connais pas les autres navigateurs.
Carl Smith
2
Cela semble lié: github.com/plumberjs/plumber-requirejs/commit/… en ce que cela a corrigé le problème pour require.js
justingord le
1
Se pourrait-il que vous ajoutiez une ligne d'en-tête quelque part dans le processus, par exemple une déclaration de droit d'auteur?
rogierschouten

Réponses:

3

Il y avait un bogue dans Chrome, essayez la dernière version, également sur la configuration de votre pack Web, essayez d'utiliser différents sourcemaps sur devtool, essayez tout cela pour voir si l'un d'eux fonctionne pour la carte source en ligne:

  • carte-source-en-ligne

  • carte-source-en-ligne-bon marché

pour d'autres configurations différentes:

  • carte-source-bon marché

  • carte-source-module-bon marché

  • bon-module-eval-source-map

sur la configuration du webpack:

{

...

devtool:'source-map'

...

}
Agamennon
la source