【问题标题】：How do I display actual line numbers where errors occur in chrome developer console?如何在 chrome 开发人员控制台中显示发生错误的实际行号？
【发布时间】：2022-01-09 20:28:45
【问题描述】：

在 chrome 开发者控制台中，行号通常显示程序中发生错误的位置。但通常它会切换到难以识别的代码，如下所示，我无法辨别程序中实际发生错误的位置。例如：

main.19a9909fcffaac58.js:1 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'
at e.find (main.19a9909fcffaac58.js:1)
at D.ngDoCheck (main.19a9909fcffaac58.js:1)
at la (main.19a9909fcffaac58.js:1)
at ko (main.19a9909fcffaac58.js:1)

我可以做些什么来让 Chrome 显示发生错误的程序的实际行号吗？

【问题讨论】：

在您的构建配置中启用源映射。

标签： angular google-chrome-devtools

【解决方案1】：

您的项目不包含源映射，因此 Chrome 开发者控制台会按原样打印它们。

配置源映射

Source maps 配置指南：https://angular.io/guide/workspace-config#source-map-configuration.

私有源地图

请注意，当您启用 source maps 时，人们可以轻松查看您的代码、格式化等。为防止其他人看到您的 source map 文件已格式化，您需要私下处理您的源代码，而不是与您的其他 dist 文件一起上传.

如何使用私有源图查看回溯？

好吧，您不应该尝试从浏览器中查看错误，您必须为此使用特殊服务，例如 https://sentry.io/（它会报告错误、收集信息，并且您可以在错误发生时查看回溯和面包屑）。

【讨论】：