如何在prod服务器上调试Angular？

Question

在开发环境中,我可以使用Chrome源选项卡进行调试,但在prod服务器中,我在运行后使用dist文件夹内容ng build --prod.此文件夹包含已编译的代码,因此如果生产中存在问题,我不知道如何调试以找到问题.

是否可以通过生产编译代码进行调试？

Answer 1

你可以试试ng build --prod --sourcemap

Answer 2

在Angualr CLI 6中，选项似乎已更改为

ng build --prod --source-map

否则，您可以通过在生产配置中设置sourceMap：true来启用angular.json中的源地图

"configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              **"sourceMap": false,**
                 --------

Answer 3

可以轻松地在不显示源映射的情况下调试生产构建。

您只需要将您的源映射从本地或远程服务器附加到您的生产版本。

方法和概念：

1. 为生产部署构建没有源映射的应用程序

   ng build YOURAPP --prod

2. 将生产版本部署到您的网络服务器

3. 再次构建应用程序，这次使用 sourcemaps 选项

   ng build YOURAPP --prod --sourceMap

4. 在浏览器的 F12-Development Tools 中将本地开发环境中的 sourcemap 附加到您的生产版本

然后按照习惯进行调试。这样你甚至可以从远程设备引用源映射。例如，如果您正在检查移动设备上的网络应用程序（例如 chrome android），这对于检测应用程序的平台特定行为非常有用。

最好的是，您的源地图永远不必在公共服务器上显示。它们在您的开发环境中始终保持安全。