Chrome Inspector 中的 Javascript 调试：变量在手表和控制台中显示为未定义，但可以在悬停时检查

Posted 2023-03-07

【中文标题】Chrome Inspector 中的 Javascript 调试：变量在手表和控制台中显示为未定义，但可以在悬停时检查

【英文标题】：Javascript debugging in Chrome Inspector: variables are shown undefined in watches and console but can be inspected when hovered

【发布时间】：2017-06-03 09:50:45

【问题描述】：

在 Chrome 检查器中调试 AngularJS 时，当我知道一些变量已定义时，我经常会遇到这种情况，我可以通过在 Chrome 检查器中将鼠标悬停在它们上来检查它们。它们也出现在“本地人”选项卡中。但是，当我尝试通过键入变量名称将它们添加到监视选项卡或在控制台中评估它们时，我得到“未定义”。见图片（注意变量'xhr'）。

谁能解释为什么有时变量在监视选项卡和控制台中显示为未定义，而实际上它们在当前范围内并未未定义？而且，如果可能的话，如何使监视窗口和控制台始终正确显示变量的值？ 见图片（注意变量'xhr'）。 谢谢

【参考方案1】：

源映射变量不会在调试器中显示解析的名称，因为此功能尚未实现。有趣的是地图文件确实包含一个names 数组，其中包含原始名称。但是，浏览器尚未使用此功能。 Canary 中有一个实验性功能，但似乎不再存在。

您可以关注display source map variable names in Developer Tools 线程。

同时，我建议切换到库的未缩小版本来调试您的特定问题，但在生产环境中将其关闭。我知道不理想。