背景:首先我们写程序不能保证不出错,如果写程序不会调试那也就废了。VUE官网已经给出了VUE+VSCode的调试教程,这里就不说了,如果想看请各位客官前往官网查看。因为本人比较习惯使用JetBrains全家桶,这里我将vue、webstorm、chrome三者联合起来断点调试的方法记录在这,好了不说了直接上菜。
1.webstorm 的配置
2.在vue项目中设置Source map
修改前: devtool: 'cheap-module-eval-source-map'
修改后: devtool: 'source-map'
3.chrome浏览器中添加IDEA插件
4.在webstorm中打上断点,在webstorm中运行npm run start 命令。然后点击WebStorm顶部导航栏Debug按钮。
5.OVER