SourceMaps Demystified (.js.map)
當我們建構 Angular 應用程式時，會建立 js 檔案和 .js.map（源映射檔案）檔案。
從本質上講，源映射是一個 JSON 檔案，其中包含将轉譯後的代碼映射回原始源所需的所有資訊。
在開發階段調試 TypeScript 代碼需要映射檔案。
ng build --prod - 生産建構 - 沒有源映射
ng build - dev build - 存在源映射
從技術上講，源映射隻是一個包含以下字段的 JSON 檔案：
version：表示源映射規範版本
file：此源映射所屬的轉譯檔案的名稱
sourceRoot: basePath — 源相對于這裡定位
sources：原始源檔案的路徑（例如 TypeScript 檔案）
sourcesContent：可選屬性，可以包含您的整個源代碼。
當源代碼在此屬性中内聯時，無需托管源即可檢索。
names：在代碼中找到的方法或變量名稱
mappings：這是整個魔術發生的地方。從技術上講，映射屬性是一個非常大的字元串，其中包含 Base64 VLQ（可變長度數量）值。這些值有助于找到源檔案中的原始位置。
Dev Build vs Production Build
正如我們所知，dev build 預設遵循 jit 編譯，它建立映射檔案，但在生産建構中遵循 aot 編譯，不會建立映射檔案。
Source Maps during Development
Source maps 幫助我們在開發工具中的 webpack:// 下顯示我們的原始源代碼。我們現在可以打開 app.component.ts 并在 app.component.ts 檔案中放置一個斷點。
讓我們嘗試在沒有 sourcemap 檔案的情況下運作項目，這類似于生産建構，因為在生産建構中我們将沒有映射檔案。
ng serve --sourceMap=false
我們在哪裡設定斷點？ 我們需要手動在轉換後的 JavaScript 檔案中找到我們的函數，這很麻煩。
SourceMapExplorer
To install for project:
npm install source-map-explorer --save-dev
To Install Globally:
npm install -g source-map-explorer
The source map explorer determines which file each byte in your minified code came from. It shows you a treemap visualization to help you debug where all the code is coming from.
可以通過這個video學習。
