vue + webstorm + chrome 断点调试

时间:2024-04-02 07:05:38

背景:首先我们写程序不能保证不出错,如果写程序不会调试那也就废了。VUE官网已经给出了VUE+VSCode的调试教程,这里就不说了,如果想看请各位客官前往官网查看。因为本人比较习惯使用JetBrains全家桶,这里我将vue、webstorm、chrome三者联合起来断点调试的方法记录在这,好了不说了直接上菜。


1.webstorm 的配置

vue + webstorm + chrome 断点调试

vue + webstorm + chrome 断点调试

2.在vue项目中设置Source map

vue + webstorm + chrome 断点调试

修改前: devtool: 'cheap-module-eval-source-map'

修改后: devtool: 'source-map'

3.chrome浏览器中添加IDEA插件

vue + webstorm + chrome 断点调试

4.在webstorm中打上断点,在webstorm中运行npm run start 命令。然后点击WebStorm顶部导航栏Debug按钮。

vue + webstorm + chrome 断点调试

5.OVER