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,如果已经配置本地运行则可以通过下图运行
第二步:选择已配置好的调试项目,调试执行
当然你要在你的源码中设置断点。。。。享受集成调试吧