React.jsで書いたコードをブラウザでデバッグするとき、ビルド前のコードで確認する方法です。
バンドル化にはwebpack、ブラウザはChromeを使用しています。
まず、webpack.config.jsに次の1行を加えます。
devtool: 'inline-source-map',
これにより、データURLがjavascriptに追加されます。
ブラウザでの確認は、ChromeのJavascriptコンソールのSourcesタブの左のペイにあるwebpack://ディレクトリ内に元ファイル開きます。
また、webpackのdevtool:の設定は他にもでき、webpackのgithubページを引用すると、
http://webpack.github.io/docs/configuration.html
devtool
Choose a developer tool to enhance debugging.
eval - Each module is executed with eval and //@ sourceURL.
source-map - A SourceMap is emitted. See also output.sourceMapFilename.
hidden-source-map - Same as source-map, but doesn’t add a reference comment to the bundle.
inline-source-map - A SourceMap is added as DataUrl to the JavaScript file.
eval-source-map - Each module is executed with eval and a SourceMap is added as DataUrl to the eval.
cheap-source-map - A SourceMap without column-mappings. SourceMaps from loaders are not used.
cheap-module-source-map - A SourceMap without column-mappings. SourceMaps from loaders are simplified to a single mapping per line.Prefixing @, # or #@ will enforce a pragma style. (Defaults to #, recommended)
Combinations are possible. hidden, inline, eval and pragma style are exclusive.
i. e. cheap-module-inline-source-map, cheap-eval-source-map, #@source-map
Hint: If your modules already contain SourceMaps you’ll need to use the source-map-loader to merge it with the emitted SourceMap.
とあります。
メモリの使用に大きく影響があるので、環境にあわせ使用するのがいいかと思いますが、Chromeでのデバッグではinline-source-mapが便利でいいですね。