如何在生产服务器上调试Angular？

Question

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

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

- David

---

实际上是--sourceMap。它区分大小写。 - Alex. A

Answer 1

更新： 您可以尝试ng build --prod --sourcemap

对于旧版本的 Angular 2，这将起作用：ng build --prod --sourcemap

对于 Angular 12：

ng build --source-map

对于 Angular 8

如评论中所述

ng build --prod --sourceMap

- DeborahK

---

我猜你的意思是使用 --prod 而不是 --product。是的，这样可以工作。谢谢。 - David

是的。谢谢你发现了这个。 - DeborahK

这不等同于开发构建吗？ - himanshupareek66

当前关于 --dev 和 --prod 构建的默认设置在此处定义：https://github.com/angular/angular-cli/wiki/build - DeborahK

在Angular CLI 6.0.5中，--source-map用于生成源代码映射文件。要使用该选项，在ng build命令中加入--prod和--source-map参数。 - Ventzy Kunev

Answer 2

在Angular CLI 6中，选项似乎已经发生了变化

ng build --prod --source-map

或者你可以在 angular.json 中通过设置 production configurations 的 sourceMap:true 来启用源代码映射

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

- nandithakw

Answer 3

可以轻松地在不暴露源映射的情况下对生产构建进行调试。

您只需要将来自本地或远程服务器的源映射附加到您的生产构建即可。

方法和概念：

1. 为生产部署而构建应用程序，不包含sourcemaps

   ng build YOURAPP --prod

2. 将生产构建部署到您的Web服务器

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

   ng build YOURAPP --prod --sourceMap

4. 在您的浏览器F12开发工具中，将本地开发环境中的源映射附加到您的生产构建中

然后像以往一样进行调试。 这种方法甚至可以引用远程设备上的源映射。例如，如果您正在检查移动设备上的Web应用程序（例如Chrome Android） 对于检测应用程序特定于平台的行为非常有用。

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

提示: 要进入sourcemaps url的输入， 右键单击如下所示的.js源文件

- Karl

---

我在哪里可以找到输入源代码映射URL的选项？我在我的Chrome浏览器中没有看到它。 - vinayakshukre

在源代码面板中，单击 js（例如 main.js）。然后，在源代码中右键单击，在弹出菜单中选择“添加源映射”选项。 - Karl

本地的sourcemap url是什么？ - Leif Jones

@LeifSegen 这是 file:/// 你的文件名。你也可以将文件拖放到地址栏中。 - XRaycat

您可以右键单击浏览器上的页面元素并选择“检查”来打开Chrome开发者工具。在这里，切换到“Sources”选项卡，然后查看左侧面板中的文件树。找到您想为其指定源映射的文件，然后右键单击它并选择“Add source map”。现在，您可以手动加载源映射文件或使用配置文件将其与加载的脚本自动关联。确保文件路径对Chrome可访问。 - Fenrir

Answer 4

如果您正在部署在测试服务器上，请不要使用 --prod，这样如果出现错误，它将显示完整的错误详细信息，但您的应用程序将在开发模式下运行

- Ali