sourcemapsdemystified(.js.map ) )。
生成angular APP应用程序时，将创建js文件和. js.map (源映射文件)文件。
实质上，源映射是一个JSON文件，其中包含将转换后的代码重新映射回原始源所需的所有信息。
在开发阶段调试TypeScript代码需要映射文件。 ngbuild----Prod--生产构建-无源映射ng build - dev build -存在源映射从技术上讲，源映射只是包含以下字段的JSON文件：
版本：表示源映射规范版本file。 此源文件映射所属的翻译文件的名称sourceRoot: basePath —源相对于此处的sources :原始源文件的路径(例如TypeScript文件) sourcesContent选项
如果源代码与此属性内联，则可以在不托管源代码的情况下检索它。 names :在代码中找到的方法或变量名称mappings :这是整个魔术发生的地方。 技术上，映射属性是一个非常大的字符串，包含Base64 VLQ可变长度数量的值。 这些值有助于找到源文件中的原始位置。
Dev Build vs Production Build众所周知，默认情况下，dev build遵循jit编译来创建映射文件，但在生产内部版本中遵循aot编译，而不创建映射文件。
sourcemapsduringdevelopmentsourcemaps有助于在开发工具的webpack://下显示原始源代码。 现在可以打开app.component.ts并将断点放置在app.component.ts文件中。
尝试在没有sourcemap文件的情况下运行项目。 这类似于生产构建。 这是因为生产生成中没有映射文件。
ng serve --sourceMap=false
在哪里设置断点？ 必须在转换的JavaScript文件中手动找到函数。 这很麻烦。
sourcemapexplorertoinstallforproject :
npminstallsource-map-explorer-- save-dev
to安装全局：
NPM安装源映射资源管理器
thesourcemapexplorerdetermineswhichfileeachbyteinyourminifiedcodecamefrom.itshowsyouatreeemapvisualizationtohelpyoudebudebugwhere
你可以通过这个视频学习。
更多大气紫菜原创文章来自《汪子熙》: