vue代码中使用debugger不生效或无法跳转源码终极解决方案

一、 debugger不生效问题

代码中使用debugger，浏览器控制台也打开了，但无法进入调试模式。

解决这个问题，需要检查下，配置文件中是否将devtool设置为source-map

1.如果你直接使用的是webpack，请检查webpack.config.dev.js（名字可能不一样），但对应的一定是开发环境的配置。

devtool: "source-map"

2.如果使用的是VUE CLI，请检查vue.config.js

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

二、debugger生效，但进入的不是源码

代码中使用debugger，打开控制台浏览器可以进入断点，但进入的不是源码，而是打包后的代码。

定位到浏览器Sources（源码）栏位：

说明： 你的Sources有可能和我的不一样，如果你装了插件，会有一些插件的代码，为了方便演示，我把插件卸载掉了。这里我们只需关注两个目录：localhost:8888（运行代码目录，即打包后的目录）和webpack（源码目录）。

这里我们会发现，debugger虽然进去了，但进入的是打包后的代码，而并非我们实际编写的源码。

要解决这个问题，要修改浏览器配置（chrome为例，其他类似）：

步骤：打开控制台—>点击左上角设置⚙️—> Preference（首选项）—> Sources（源码）—> JavaScript source maps（JavaScript源码映射）

一定要勾选上JavaScript source maps，浏览器才能定位到源码位置。

勾选上之后，刷新浏览器，再次进入断点位置，就可以定位到webpack里面的源码了。

三、 结言

如果通过上面的配置，还没能解决您的问题，可以留言，让我们一起解决。