Configurer Webpack pour permettre le débogage du navigateur

130

Je suis nouveau sur Webpack et je convertis une application Web existante pour l'utiliser.

J'utilise webpack pour regrouper et réduire mon JS, ce qui est excellent lorsqu'il est déployé, mais cela rend le débogage très difficile pendant le développement.

En règle générale, j'utilise le débogueur intégré de Chrome pour déboguer les problèmes JS. (Ou Firebug sur Firefox). Cependant, avec webpack, tout est stocké dans un seul fichier et il devient difficile de déboguer en utilisant ce mécanisme.

Existe-t-il un moyen d'activer et de désactiver rapidement le regroupement? ou activer et désactiver la minification?

J'ai regardé pour voir s'il y avait une configuration de chargeur de script ou un autre paramètre, mais cela ne semble pas ovoïde.

Je n'ai pas encore eu le temps de tout convertir pour agir comme un module et l'utilisation oblige. J'utilise donc simplement le modèle require ("script! ./ file.js") pour mon chargement.

javascript webpack Jim
la source
3
Avez-vous fini par trouver une solution à ce problème? Je préfère également utiliser la console JS pour examiner les variables disponibles. Mon principal problème est que webpack cache toutes ces variables à l'intérieur du module, de sorte qu'elles deviennent inaccessibles
user1496984
2
Jamais vraiment trouvé de solution, nous avons malheureusement abandonné en utilisant webpack.
Jim
Qu'est-ce que vous utilisez maintenant? Au moment d'écrire ces lignes, webpack semble toujours être l'outil de construction le plus populaire que je puisse trouver.
Richard

Réponses:

100

Vous pouvez utiliser des cartes source pour préserver le mappage entre votre code source et celui fourni / réduit.

Webpack fournit l' option devtool pour améliorer le débogage dans l'outil de développement en créant simplement une carte source du fichier fourni pour vous. Cette option peut être utilisée à partir de la ligne de commande ou utilisée dans votre fichier de configuration webpack.config.js .

Vous trouverez ci-dessous un exemple artificiel utilisant la ligne de commande pour générer le fichier fourni ( bundle.js ) avec le fichier de carte source généré ( bundle.js.map ).

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

bonjour.js

module.exports = function () {
  return 'Hello world!';
};

Si vous ouvrez index.html dans votre navigateur (j'utilise Chrome mais je pense qu'il est également pris en charge dans d'autres navigateurs), vous verrez dans l'onglet Sources que vous avez le fichier groupé sous le fichier: // schéma et les fichiers source sous le webpack spécial : // schéma.

déboguer avec les cartes sources

Et oui, vous pouvez commencer le débogage comme si vous aviez le code source d'origine! Essayez de mettre un point d'arrêt sur une ligne et actualisez la page.

point d'arrêt avec les cartes sources

Dreyescat
la source
2
bundle.map pointe vers le fichier js mais que se passe-t-il si le fichier js réel a également une carte pour disons tsx ou ts?
Andrej Kovacik
4

Je pense qu'il est préférable de configurer votre projet en utilisant le mode de production et de développement https://webpack.js.org/guides/production/ Il comprend également comment mapper votre code pour déboguer

devtool: 'inline-source-map'

m-farhan
la source
3

Les cartes sources sont très utiles comme déjà souligné.
Mais parfois, sélectionner la carte source à utiliser peut être pénible.

Ce commentaire sur l'un des problèmes de carte source Webpack peut être utile pour sélectionner la carte source à utiliser en fonction des exigences.

Abhinav Singi
la source
1

Jetez un oeil ici

c'est un embellisseur qui déminifie javascript. en bas, il contient une liste de divers plugins et extensions pour les navigateurs, consultez-les.

vous pourriez être intéressé par FireFox Deminifier , il est censé déminifier et styliser votre javascript lorsqu'il est récupéré sur le serveur.

entrez la description de l'image ici

banane
la source
10
la désinfection n'est pas la même chose que la désactivation de la minification car les commentaires sont toujours supprimés, les numéros de ligne ne correspondent plus et les noms de variables ne sont pas les mêmes. Cela étant dit, c'est mieux que rien.
Jim
1

Chrome a également une option de format dans le débogueur. Il n'a pas toutes les informations qu'un fichier source normal aurait, mais c'est un bon début, vous pouvez également définir des points d'arrêt. Le bouton sur lequel vous cliquez se trouve en bas à gauche de la première capture d'écran, il ressemble à {}.

Avant le formatage: entrez la description de l'image ici

Après le formatage.

entrez la description de l'image ici

Jolly1234
la source