はじめに
最近のフロントエンド開発ではgulpなどでビルドしたjavascript、cssを使うのが当たり前になりつつあります。ビルドされたコードをデバッグするのに便利なsourceMapですが、ブラウザごとに使い方が違います。なので、今回は備忘録も兼ねて、ブラウザごとのsourceMapの使い方についてまとめてみました。
各ブラウザでのsourceMap確認方法
Chrome
- 開発者ツールの「Source」タブを開きます。
- webpack://配下にオリジナルソースが表示されます。
Safari
- 開発者ツールのS「リソース」タブを開きます。
- 左側のウインドウから、ビルドされたコードを選択します。
- 上記コードの下にオリジナルコードが表示されます。
下図はビルドしたコード名がindex.jsの場合
FireFox
- 開発者ツールのソースタブを開く
- 左側のウインドウでwebpack:://からはじまるのがオリジナルのコード
各ブラウザ共通でオリジナルコードを見る方法
現状では各ブラウザともに、開発者ツールのデバッグタブでファイル名検索でオリジナルコードを表示することができます。上で色々書きましたが、この方法でいいと思いました。
終わりに
これで普段とは違うブラウザでも、sourceMapの使いかたで迷うことはなくなったと思います。