VueJS 堆栈跟踪不显示错误发生的位置

Posted 2023-02-22

【中文标题】VueJS 堆栈跟踪不显示错误发生的位置

【英文标题】：VueJS Stack Traces Do Not Show Where Errors Occur

【发布时间】：2019-05-02 01:11:54

【问题描述】：

上下文

Source Code

我在一个项目中使用 VueJS 和 webpack。

我没有使用vue-loader 插件或.vue 文件。

我的项目的结构类似于一个标准的 javascript webpack 项目，它导入了vue。

我的 webpack 配置有以下相关选项：

dev-tool: "source-map" resolve.alias["vue$"] = "vue/dist/vue.js"

正在生成我的 webpack Javascript 包文件的源映射。

问题

编程时控制台中出现错误。不幸的是，堆栈跟踪显示错误位于 vue.js 文件中，后来 webpack 生成了 Javascript 包文件 (main.js)。

看起来 webpack 为我的 Javascript 包生成的源映射无法正常工作。

我找到了severalrelatedissues，但是这些问题似乎与我不使用的vue-loader webpack 插件有关。

查看 Firefox 中的应用程序源，我可以确认源映射无法正常运行：

Chrome 中也会发生同样的行为。

什么可能导致源映射无法正常工作？

注意：截图中显示的错误不是重点，我能够弄清楚。问题的主要焦点是源映射无法正常工作。让问题出现时更难调试。

【问题讨论】：

你试过developers.google.com/web/tools/chrome-devtools/javascript/imgs/…

@StarkButtowski 不是我的问题，但我确实遵循了它。是的，启用了 JS 源映射。我确实得到了一些解释，但它被埋没了，而且真的不是那么解释。

【参考方案1】：

如果您在 Chrome 中进行调试并且源映射无法正常工作，您有几个替代选项。这可能不如让源地图正常工作那么有用，但是您的问题已经有一年半没有得到解答了，所以也许这会很有用。

我最喜欢的一个是使用“源”选项卡中的“异常暂停”切换。在上图中，它是带有暂停图标的八角形。单击它并刷新您的页面。当错误发生时，您的应用程序将暂停并在完整堆栈跟踪中显示错误，如下所示：

调用堆栈是可点击的。您可以通过调用函数向后移动，直到您从自己的源中看到可识别的内容。如果源映射没有正确加载，我建议寻找字符串文字。这些不会在输出中被缩小，并且可以将您指向触发错误的位置。

---

另外，您可能需要考虑使用像 Vue.js DevTools 这样的 Vue 插件。我发现这种以数据为中心的应用程序视图非常有用。您可以查看状态和突变，甚至可以重播或修改应用中发生的操作以查明错误。

【讨论】：

非常感谢。这些是在没有源映射的情况下跟踪错误的好方法。