vue项目debug调试

背景

首先我是一名辣鸡后端工程师：

1. 来看vue项目的时候，内心一直在纠结到底为何没法debug好麻烦哦
2. 用习惯了jetbrain的idea开发java，vscode实在用的不顺手，所以本文章将采用jetbrain的webstorm

流程

首先去官网下载安装包或者某些渠道找《特别版》，安装完毕即可开始流程（前端需要的nodejs之类的我就不讲了，我一辣鸡后端也讲不明白所以还请缺啥百度啥）。

1

在熟悉的位置这里会有一个edit configurations，点击后下一步↓↓↓↓↓↓↓

2

通过加号可以找到一个npm选项，点击后下一步↓↓↓↓↓↓↓

3

需要设置的有四个位置，分别是：别名、package.json路径、命令、脚本后缀。设置完成下一步↓↓↓↓↓↓↓

4

前三步结束后，即可点击运行按钮
，webstorm需要先运行再debug，运行后进行下一步↓↓↓↓↓↓↓

5

再次点击edit configurations，加号，可以看到javascript debug选项，点击后下一步↓↓↓↓↓↓↓

6

需要设置的有4个，分别是：别名、网站url、调试浏览器、src路径（在src文件夹后添加webpack:///src），设置后进行下一步↓↓↓↓↓↓↓

7

选中设置好的debug配置，进行debug，在有上个运行配置已经运行的基础上，会另外打开一个浏览器，进行调试，就是我们熟悉的javadebug了，快去试试吧。