web-dev-qa-db-fra.com

React debug dans le navigateur lors de l'utilisation de bundle.js

Outils: Chrome Outils de développement, ReactJs et Webpack

C'était peut-être lorsque je suis passé au bundling avec webpack, mais au début, lorsque j'ai commencé mon projet, j'ai pu regrouper mes js dans un fichier bundle.js mais j'ai toujours accès aux fichiers dans l'outil de débogage du navigateur. Maintenant, tout ce que je vois dans le navigateur dans mon dossier js est bundle.js

À l'aide de webpack, comment puis-je revenir pour voir tous mes fichiers Javascript dans le débogueur du navigateur afin de pouvoir faire des choses comme insérer des points d'arrêt?

javascriptdebuggingreactjsgoogle-chrome-devtoolswebpack
18
Nick Pineda

Après avoir longtemps utilisé inutilement un tas d'instructions imprimées, je suis finalement revenu en arrière et j'ai compris comment faire cela.

Voici comment vous pouvez utiliser à nouveau les points d'arrêt après avoir groupé:

1)

Accédez à votre fichier webpack.config.js et définissez devtools de "true" à "source-map" ou l'une des autres options expliquées par @MichelleTilley dans sa réponse.

webpack.config.js (voici un exemple)

module.exports = {
  entry: "./js/app.js",
  output: {
    filename: "js/bundle.js"
  },
  debug: true,
  devtool: "#eval-source-map",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel'
      }
    ]
  }
};

2)

Comme @MichelleTilley a également expliqué dans sa réponse, vous devrez peut-être activer les options devtools dans Chrome.

3)

Après cela, lorsque vous allez déboguer, vous devrez rechercher un nouveau dossier nommé "." c'est super difficile à remarquer!

Grâce à la réponse Stackoverflow ci-dessous avec les images publiées, j'ai finalement trouvé où se trouvait ce dossier.

Configurer le webpack pour autoriser le débogage du navigateur

19
Nick Pineda

Vous pouvez utiliser l'option devtool pour que le webpack génère des cartes sources, qui ( lorsqu'il est activé dans les options Chrome devtools ) permettra à Chrome de traduire le code en bundle.js (qui peut même être minifié) dans le code source d'origine.

Pour le développement, j'ai défini cette option sur eval-source-map ou cheap-eval-source-map, et pour la production, je laisse cette option désactivée ou je génère des fichiers de carte source séparés avec source-map.

13
Michelle Tilley

Sa mise à jour maintenant, vous devez simplement inclure le mode: "développement" en haut de module.exports et définir un débogueur à n'importe quel endroit dans votre fichier .js, cela fonctionnera et ouvrira chrome devtools
webpack.config.js:

const path = require('path')
module.exports = {
    mode: 'development',
entry: path.join(__dirname,'src/js','index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
      filename: 'build.js'
   },
  module: {}
}

cocher

4
badar