【Angularデバック】ビルドオプション「–source-map」指定時の動作確認

どうもこんにちはコウヘイです。

以下のような疑問を持ちました。

今回はこういった疑問に答えます。

著者情報

この記事を書いている僕ですが、Javaをメインにバックサイド開発を7年ほど経験しています。
最近フロントサイドにAngular、バックサイドにSpringBootを使用したSPA（シングルページアプリケーション）を作成する案件で働き始めたので、Angular学習を開始しました。

こんな僕が解説していきます。

ビルドオプション「–source-map」指定時の動作確認

公式ドキュメントを見るとビルドオプション「–source-map」の説明は以下のように書かれています。

Output source maps for scripts and styles
（翻訳：スクリプトとスタイルの出力ソースマップ）

ぶっちゃけ、よくわからないですよね（笑）
私自身も同じことをおもいました（笑）

わかりやすく言い換えると以下になります。

ということで、具体的に以下のパターンでデバック時の動作を確認したいと思います。

順に説明していきます。

その①：開発時のデバック

まずはじめに、開発時に以下のコマンドでアプリを起動したときのデバックの確認をします。

以下デバック時の画面になります。

開発時はデバックができるようになってます。（webpack://にソースが表示される）

その②：開発環境デプロイ時のデバック

次は以下のコマンドでビルドしたソース群を開発環境にデプロイしたときのデバックの確認をします。

以下デバック時の画面になります。

開発環境デプロイ時はデバックができるようになってます。（webpack://にソースが表示される）

その③：本番環境デプロイ時のデバック

次は以下のコマンドでビルドしたソース群を本番環境にデプロイしたときのデバックの確認をします。

以下デバック時の画面になります。

本番環境デプロイ時はデバックができないようになってます。（webpack://が表示されない）

その④：本番環境デプロイ時のデバック（–source-mapオプションあり）

次は以下のコマンドでビルドしたソース群を本番環境にデプロイしたときのデバックの確認をします。
１つ前で確認した内容と違うのは、sourceMapを指定している点です。

以下デバック時の画面になります。

本番環境デプロイ時（–source-mapオプションあり）はデバックができるようになってます。（webpack://にソースが表示される）

余談

以下のツイートをしました。

Angularのビルド時のsouceMapオプションって実際の現場で使われているのか疑問。

ぱっと思いついたのは、本番環境でデバックしてもいいような仕様の場合にsouceMapオプションを指定するみたいな感じかな？

まあ、そういうことができることだけ覚えておきます😅

— こうへい@3日毎にブログ更新中 (@kohe1chan) February 5, 2021

ツイートにもあるように、–source-mapオプションを使う場面は本番でもデバックできるようにしたい場合ですが、実際の現場の本番環境でデバックできる状態にするのか疑問に思いました。

ひとまずは、こういうこともできるぐらいにトドめておこうと思います。

まとめ

最後にアプリの起動の仕方でデバックできるかを以下にまとめたいと思います。

というわけで今回は以上です。

Angularについて、少しでも詳しくなれたなら幸いです。
私自身も発展途上なので一緒に学んでいきましょう！

おすすめ記事：無料あり：Angular学習におすすめの本【AngularJSとの違いに注意】