Help us understand the problem. What is going on with this article?

各ブラウザでソースマップを確認する方法

More than 3 years have passed since last update.

はじめに

最近のフロントエンド開発ではgulpなどでビルドしたjavascript、cssを使うのが当たり前になりつつあります。ビルドされたコードをデバッグするのに便利なsourceMapですが、ブラウザごとに使い方が違います。なので、今回は備忘録も兼ねて、ブラウザごとのsourceMapの使い方についてまとめてみました。

各ブラウザでのsourceMap確認方法

Chrome

  • 開発者ツールの「Source」タブを開きます。
  • webpack://配下にオリジナルソースが表示されます。 スクリーンショット 2015-12-05 17.08.02.png

Safari

  • 開発者ツールのS「リソース」タブを開きます。
  • 左側のウインドウから、ビルドされたコードを選択します。
  • 上記コードの下にオリジナルコードが表示されます。

下図はビルドしたコード名がindex.jsの場合
スクリーンショット 2015-12-05 17.15.24.png

FireFox

  • 開発者ツールのソースタブを開く
  • 左側のウインドウでwebpack:://からはじまるのがオリジナルのコード スクリーンショット 2015-12-05 17.29.04.png

各ブラウザ共通でオリジナルコードを見る方法

現状では各ブラウザともに、開発者ツールのデバッグタブでファイル名検索でオリジナルコードを表示することができます。上で色々書きましたが、この方法でいいと思いました。

終わりに

これで普段とは違うブラウザでも、sourceMapの使いかたで迷うことはなくなったと思います。

pegass85
opst
情報技術と社員力でお客様を成功に導く Make IT Your Success
https://www.opst.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away