WebStorm + Vite + Vue 断点调试（新手版）

前言

这段时间在使用Vite + Vue 项目的时候，因为很多场景下在浏览器中断点调试比较麻烦，比如：方法点击不能跳转、不能随心所欲查看上下文、一些没有打开过的文件没法用快捷键快速打开等，总而言之，并没有服务端开发那么流畅。因此想在WebStorm中断点，简单研究（baidu）了一下，稍微总结了下方法，作为记录。

使用工具版本

WebStorm 2023.2.2、NodeJs v16.15.1、Vue 3.3.4、Vite 4.4.9 、TypeScript 5.2.2

1.添加调试配置

右上角选择编辑配置（不同WebStorm版本可能不太一样）

新建Nodejs断点，取名，工作目录为当前目录，JavaScript文件选node_modules下的对应vite路径 node_modules\vite\bin\vite.js

一定要勾选 使用JavaScript 调试器，Url的端口号，跟自己项目启动的端口号一致就行了，后面想改也可以

注意：第一个启动后默认打开勾选会好一点，会自动打开浏览器，不然用自己网页打开的是不行的

2.启动调试

配置完是这样：

点击右上角小虫子启动

会自动打开浏览器，只有在这个浏览器下的操作，才能进入断点

3.断点测试

简单写个方法，就用Vite默认创建的项目吧~

在tempClick方法里面断一下点

前端页面点击，成功进入断点

上下文都可以拿得到

多点几下，alt+F8 调出神器

完成！

4.调试配置保存

团队协作中，成员A弄了个很牛x的断点配置，成员B也想要怎么办。 共享即可

可以自定义存储路径

A提交代码，B拉一下，WebStorm右上角自动会出现当前A配置的调试了