彻底解决了WebStorm调试vue项目的问题

WebStorm是一款优秀的前端开发IDE，之前一直可以调试Vue项目，但最近发现出现使用调试后弹出的chrome浏览器无法定位到项目地址，百思不得其解，而网上的绝大部分的文章都是千篇一律，无法解决我的问题。

由于我之前的一直能使用webStorm进行调试，而在整个环境的变化里webstorm的版本依然是2019.3，唯一变的是chrome的版本，变成了113.XXX，于是尝试删除浏览器，安装低版本的chrome。我这里安装的是83号版本。。。。结果如我所愿。

下面也把webstorm调试vue的些设置简单列出来，按图索骥了：

一、第一步是配置本地环境运行，实际上可以不配置，可以在webstorm终端窗口中直接敲入命令行npm run serve来运行vue项目。

 2、第二步是配置javascript debugger环境，该环境是进入调试的关键

 注意：第四步的port要和npm run serve的端口一致，下图是我运行npm run serve出现的端口

 所以我调试的端口也是8082

如何调试：

第一步：运行vue项目，可以在命令行里执行npm run serve，如果已经配置本地运行则可以通过下图运行

 第二步：选择已配置好的调试项目，调试执行

当然你要在你的源码中设置断点。。。。享受集成调试吧