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

Question

上下文

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 中也会发生同样的行为。

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

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

Answer 1

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

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

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

---

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