web-dev-qa-db-ja.com

React bundle.jsを使用する場合のブラウザのデバッグ

ツール：Chrome開発者ツール、ReactJs、およびWebpack

多分、webpackのバンドルに切り替えたときだったかもしれませんが、最初にプロジェクトを始めたとき、jsをbundle.jsファイルにバンドルできましたが、ブラウザデバッグツールのファイルにアクセスできました。これで、ブラウザーのjsフォルダーに表示されるのはbundle.jsです

Webpackを使用して、ブレークポイントを挿入するようなことをできるように、ブラウザデバッガですべてのJavascriptファイルを表示できるようにするにはどうすればよいですか？

javascriptdebuggingreactjsgoogle-chrome-devtoolswebpack
18
Nick Pineda

大量の印刷ステートメントを無意味に使用して久しぶりに、ようやく戻ってこれを行う方法を見つけました。

これは、バンドル後にブレークポイントを再び使用できるようにする方法です：

1）

Webpack.config.jsファイルに移動し、devtoolsを「true」から「source-map」または@MichelleTilleyが回答で説明した他のオプションのいずれかに設定します。

webpack.config.js（ここに例があります）

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）

また、@ MichelleTilleyが答えで説明したように、Chromeでdevtoolsオプションを有効にする必要があるかもしれません。

3）

この後、デバッグに行くときは、「。」という名前の新しいフォルダを探す必要があります。それは気づきにくいです！

下のStackoverflowの回答のおかげで、そのフォルダーがどこにあるかがついにわかりました。

ブラウザのデバッグを許可するようにwebpackを設定

19
Nick Pineda

devtoolオプション を使用して、webpackにソースマップを生成させることができます（ Chrome devtoolsオプションで有効にした場合 ）は、Chromeがbundle.jsのコード（縮小される場合もあります）を元のソースコードに変換することを許可します。

開発では、このオプションをeval-source-mapまたはcheap-eval-source-mapに設定し、本番環境ではこれをオフにするか、source-mapを使用して個別のソースマップファイルを生成します。

13
Michelle Tilley

更新されたため、module.exportsの上部にmode： "development"を追加し、.jsファイル内で動作する任意の場所にデバッガーを設定して、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: {}
}

チェック

4
badar