一、 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里面的源码了。
三、 结言
如果通过上面的配置，还没能解决您的问题，可以留言，让我们一起解决。
