WebStorm用Debug模式调试Vue等前端项目

问题说明

开发前端时,一直很苦恼调试前端代码的麻烦。

简单的内容可以通过console.log()在控制台打印变量值,来验证预期结果。

涉及到稍复杂的逻辑,就需要在代码中侵入增加debugger,或者在浏览器中找到js文件,再手动添加断点。

非常的麻烦,而且浏览器中对变量的追踪功能也有限,同时我也一直好奇WebStorm中Debug启动方式的作用,今天研究了一下,果然WebStorm提供了更简单的调试方法,记录一下

WebStorm调试步骤

  1. 启动前端项目,我这里是Vue项目,执行npm run serve正常启动即可,启动成功控制台会打印前端服务地址和端口
  2. 新建JavaScriptDebug
  3. 配置调试脚本URL,设置URL为上面控制台打印的前端项目访问地址
  4. 启动调试脚本
  5. 开始愉快的调试

其他问题

跳转页面url为about:blank问题解决

按下图步骤操作

选择默认浏览器
--remote-allow-origins=*命令的作用是关闭浏览器的跨域限制

相关推荐
an86950011 小时前
vue新建项目
前端·javascript·vue.js
努力成为大牛吧4 小时前
Pycharm 接入 Deepseek API完整版教程
ide·python·pycharm
JIngJaneIL4 小时前
汽车租赁|汽车管理|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁
QQ__17646198246 小时前
Vscode安装步骤(详细版)
ide·vscode·编辑器
柒昀6 小时前
Vue.js
前端·javascript·vue.js
花花鱼6 小时前
android studio引用三方库的方法,比如SmartRefreshLayout
android·ide·android studio
薛定e的猫咪7 小时前
【调试技巧】vscode 四种断点调试,快速定位 bug
ide·vscode·python·bug
likuolei8 小时前
Eclipse 代码模板
java·ide·eclipse
sanggou8 小时前
Windsurf AI IDE 完全使用指南
ide·人工智能
摇滚侠8 小时前
Vue 项目实战《尚医通》,完成确定挂号业务,笔记46
java·开发语言·javascript·vue.js·笔记