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

Question

语境

源代码

我在项目中将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捆绑包生成的源映射无法正常工作。

我发现了几个 相关 问题，但是这些问题似乎与vue-loader我不使用的webpack插件有关。

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

在Chrome中也会发生相同的行为。

是什么导致源地图无法正常工作？

注意：屏幕截图中显示的错误不是焦点，我能够弄清楚。问题的主要焦点是源映射无法正常工作。当问题确实出现时，使调试变得更加困难。

Answer 1

如果您在 Chrome 中进行调试并且源映射不起作用，您还有一些替代选项。这可能不如让源映射正常工作那么有帮助，但是您的问题一年半以来一直没有得到解答，所以也许这会很有用。

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

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

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