32
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

オープンストリームAdvent Calendar 2015

Day 5

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

Posted at

はじめに

最近のフロントエンド開発では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の使いかたで迷うことはなくなったと思います。

32
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?