web-dev-qa-db-fra.com

DevTools n'a pas réussi à analyser SourceMap

J'essaie d'obtenir un projet de carte source dans mon projet Webpack.

J'ai finalement eu les bons paramètres pour qu'il puisse le faire, mais maintenant je reçois cette erreur: 

DevTools n'a pas réussi à analyser SourceMap: http: //MyServer/MyApp/bundle.js.map

Je vais à l'URL qu'il indique et je trouve un fichier json avec ces propriétés:

  • version - Défini à 3
  • sources - très long tableau de chaînes qui semblent être des chemins Webpack vers mes fichiers.
  • noms - très long tableau de chaînes qui semblent être des variables et des fonctions aléatoires.
  • mappings - très longue chaîne de lettres et de virgules apparemment aléatoires.
  • fichier - défini sur bundle.js
  • sourcesContent - Très très long tableau de chaînes (plus de 10 millions de caractères). Tout mon code source.
  • sourceRoot - défini sur chaîne vide

Tout cela semble être valide json. Malheureusement, Chrome ne donne aucune raison pour laquelle il n'a pas réussi à analyser la carte source.

Existe-t-il un moyen de faire dire à Chrome pourquoi il n'a pas pu analyser la carte source?

Ou, à défaut, quelqu'un sait-il pourquoi ma carte source échoue? (Mon code est trop volumineux pour être posté, mais voici mon webpack.config.js et mon package.json fichiers.)

REMARQUES: 

  • J'ai essayé cela avec webpack 2.2.1, webpack 2.3.2 et webpack 2.6.1.
  • Les cartes source fonctionnent bien dans IE 11 et Firefox.
  • Si je mappe mes cartes source, elles fonctionnent correctement dans Chrome DevTools, mais mon bundle.js passe de 3 Mo (déjà trop grand) à 16 Mo (WAY trop grand).
  • J'ai défini l'option "Activer les cartes source JavaScript" dans les paramètres (et CSS également).
  • J'ai essayé d'utiliser Chrome Canary, mais le problème était le même.
  • Je suis hébergé dans IIS.
javascriptwebpackgoogle-chrome-devtoolswebpack-2
15
Vaccano

Par expérience, je ne m'attendrais pas à ce qu'un client vous dise pourquoi il ne pourrait pas analyser une SourceMap (bien que ce soit Nice). Certains outils sont incapables d'analyser des cartes source volumineuses (probablement des contraintes de mémoire) et, compte tenu de la taille de votre actif, j'examinerais cela en premier. 

Webpack prend en charge plusieurs valeurs différentes pour le champ de configuration devtool et certaines d'entre elles sont moins fidèles que la valeur par défaut. Avez-vous essayé, par exemple, 'cheap-module-source-map'? Obtenir uniquement les numéros de ligne (pas de colonnes) est un bon compromis pour une carte source utilisable IMO.

Mais il sera probablement plus utile de réduire la taille de l’actif. Le fractionnement du code de Webpack et les options de gestion de «morceaux» facilitent la scission de votre code en plusieurs fichiers chargés async au moment de l'exécution. Dans ce cas, vous auriez deux fichiers JS ou plus, et chacun aurait sa propre carte source, de sorte que le navigateur n'étouffera plus d'essayer de traiter un gros fichier.

1
Brendan Gannon