AngularJS迁移Vue.js 2.4后调试求助：无效堆栈追踪问题

我刚从AngularJS 1.x转到Vue 2.x的时候也踩过一模一样的坑——Webpack打包后的错误堆栈全是webpack-internal://这种毫无意义的路径，根本找不到自己写的代码在哪。结合Firefox和你已经安装的Vue Devtools 2.5.9，我整理了一套能快速定位问题的调试流程，帮你解决这个困扰：

一、先搞定Source Map，让堆栈追踪回到你的源码 #

Webpack打包后的代码经过转译和合并，默认的堆栈信息根本对应不上你的源码，必须靠Source Map来映射回去：

• 检查你的webpack.config.js，确保开发环境的devtool设置成**eval-cheap-module-source-map**（开发模式下兼顾速度和准确性）：

  module.exports = {
    mode: 'development',
    devtool: 'eval-cheap-module-source-map',
    // ...其他Webpack配置
  };
  

• 重启Webpack dev server后，打开Firefox开发者工具的设置（右上角齿轮图标），找到「调试器」板块，确认勾选了启用源映射和忽略列表中的源映射（默认是勾选状态，但最好再核对一遍）。

完成这步后，你再看错误日志，就能看到对应的.vue文件和具体行号，而不是那些模糊的webpack-internal路径了。

二、用Firefox调试器直接断点到Vue组件代码 #

Firefox的调试器对Vue的适配性很好，配合Source Map，你可以直接调试自己写的源码：

• 打开Firefox开发者工具的调试器面板，在左侧「源」列表里找到webpack://下的src文件夹，这里就是你的源码目录。.vue文件会被拆分成template、script、style三个部分，调试逻辑就找script部分。
• 在代码行号上点击就能设置断点，代码执行到这里会自动暂停，你可以查看变量值、调用栈，甚至直接修改代码实时调试（Firefox的实时编辑功能特别顺手）。
• 如果想快速定位异常，可以点击调试器面板右上角的「暂停在异常处」图标（暂停按钮旁边的小闪电），代码抛出错误时会自动暂停在出错的那一行，直接锁定问题代码。

三、把Vue Devtools用透，精准定位组件问题 #

你已经装了Vue Devtools，这可是调试Vue的神器，别只用来看看组件树：

• 组件树快速定位：在Vue Devtools的「组件」面板里，找到报错的QueryBuilder组件（就像你错误日志里显示的层级），点击它就能查看组件的data、props、computed等状态，先确认这些值是不是符合预期——很多错误都是状态异常导致的。
• 生命周期钩子断点：在组件详情页的「生命周期钩子」区域（比如你出错的created钩子），点击钩子旁边的小暂停图标，就能在这个钩子执行时自动断点，直接进入组件的代码逻辑，完美匹配你当前的报错场景。
• 事件追踪：如果错误是用户操作触发的，在Vue Devtools的「事件」面板里能看到组件触发的所有事件，点击事件就能直接定位到对应的处理函数。

四、针对你当前错误的快速排查技巧 #

你现在遇到的是TypeError: not a function，且触发点在_rights函数里，结合上面的工具可以这么排查：

1. 先在Vue Devtools里查看QueryBuilder组件的created钩子调用的rights方法，确认这个方法有没有正确绑定this（比如是不是用了箭头函数，或者组件里有没有正确定义）。
2. 用Firefox调试器在_rights函数的位置设置断点，执行到这里时查看调用上下文，看看是不是某个变量被意外覆盖成了非函数类型。
3. 因为错误里涉及Promise，你可以在调试器里查看Promise的状态和返回值，确认异步操作的结果是不是符合预期。

最后几个实用小Tips #

• 开发模式下别开代码压缩：暂时关闭terser-webpack-plugin这类压缩插件，压缩后的代码会让调试难度翻倍。
• 用console.dir替代console.log打印Vue组件实例：能展开看到所有属性和方法，比直接打印清晰得多。
• 如果你需要调试模板渲染问题，可以在Vue Devtools的「组件」面板里开启「显示原始模板」，直接查看编译前的模板代码。

内容的提问来源于stack exchange，提问作者Kevin Gill