当我们构建 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学习。
