webpackで出力されたソースマップファイル(.map)を後からブラウザ(Chrome)に読み込ませる方法

webpackで出力されたソースマップファイル(.map)を後からブラウザ(Chrome)に読み込ませる方法
     

webpackで複数のJavaScriptファイルをバンドルすると、人間が解析しにくい形に整形されます(難読化ではなくminifyの意味合い)。
プロダクトとしてリリースする際は、解析されない方が良いので問題ないのですが、
バグが発生した際のデバッグの時には少々困っていました。

ソースマップをファイルに埋め込むオプションが用意されていますが、リリースする際にソースマップが含まれるのは避けたい、という気持ちでした。
何か良い方法を探してみた所、ソースマップファイルを別ファイルとして出力し、後からブラウザに読み込ませる方法があったのでシェアします。

環境

ライブラリ

確認したライブラリは以下の通りです。

  • webpack: 4.43.0
  • webpack-cli: 3.3.1

コードなど

app.js

正直バンドルするソースはなんでも良いのですが、とりあえずログを出力するだけのコードを用意します。

const outputLog = function() {
    console.log("output log.");
};

outputLog();

webpack.config.js

webpackの設定ファイル。重要なのはdevtoolプロパティなので、それ以外はなんでも良いです。
devtoolプロパティに設定した hidden-source-map がソースマップを別ファイルに出力するオプションになります。

module.exports = {
    entry: "./src/app.js",
    devtool: "hidden-source-map"
}

ソースマップの読み込み手順

webpackコマンドを実行し、JSをバンドルする

上記のapp.jsとwebpack.config.jsを準備し、webpackコマンドを実行すると、以下の2ファイルが出力されます。

  • main.js
  • main.js.map

JSを読み込んでいる画面で、開発者ツールを開く

開発者ツールの[Source]タブで、対象のソースを開きます。
現在はwebpackにより生成された状態なので、minifyされたソースが表示されます。

ソースマップファイルを読み込む

ソース画面で右クリック → Add source map… を選択します。

ソースマップファイルのURLを入力するポップアップが表示されるので、ローカルファイルのパスを入力します。
入力例は以下の通りです。

すると、左側のソース一覧タブにwebpack://が追加されるので、対象のソースを開くと
バンドルされる前のソースの内容が確認できます。

IT系の雑記カテゴリの最新記事