Angular 11 系列（十四）生产环境进行 Debug 调试

小渣渣

Angular 9 系列（一）动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列（二）动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列（三）订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列（四）自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列（五）格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 系列（六）调用原生JS变量和方法
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 系列（七）css样式作用域
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 系列（八）更新子组件的值通过set触发事件
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 系列（九）#id 选择器在页面应用
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 系列（十）嵌入vconsole、eruda开发者调试面板
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 系列（十一）定义样式的5种方法
https://www.itsvse.com/thread-9305-1-1.html

Angular 9 系列（十二）基于OTP生成动态令牌
https://www.itsvse.com/thread-9325-1-1.html

Angular 10 系列（十三）引入百度 echarts 图表
https://www.itsvse.com/thread-9347-1-1.html

我们将 angular 项目通过 build 命令打包成部署到生产环境中，预期效果可能和我们开发环境显示的效果有所差异。

ts 代码：

登录可见。

AppComponent 是当前的组件。

开发环境和生产环境，效果图如下：



生产环境效果完全不符合我们的预期。

关于 build 命令资料：

Angular build 性能优化
https://www.itsvse.com/thread-9203-1-1.html

这时候，我们需要进行 debug 调试。
SourceMap 一个存储源代码与编译代码对应位置映射的信息文件

在前端的工作中主要是用来解决以下三个方面出现的 debug 问题：

a. 代码压缩混淆后
b. 利用 sass 、typeScript 等其他语言编译成 css 或 JS 后
c. 利用 webpack 等打包工具进行多文件合并后

上面三种情况，我们在调试时都是没办法像调试源码般轻松，这就需要 SourceMap 帮助我们在控制台中转换成源码，从而进行 debug 。


我们需要修改 build 的命令，修改后如下：

登录可见。

（未加参数前）



（加了参数以后）

可以看到生成了很多 *.map 文件。





如上图，使用谷歌浏览器，按 F12 进入开发者模式，选择 source ，选择 main.js ，然后右击选择“Add Source map”选项，把生成的map文件地址添加即可。

例如：

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

（完）