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=*命令的作用是关闭浏览器的跨域限制

相关推荐
小安同学iter3 分钟前
Vue3 进阶核心:高级响应式工具 + 特殊内置组件核心解析
前端·javascript·vue.js·vue3·api
i_am_a_div_日积月累_4 分钟前
vscode点击文件会覆盖上一个文件
ide·vscode·编辑器
Roc.Chang8 分钟前
Vue 3 setup 语法糖 computed 的深度使用
前端·javascript·vue.js
淡笑沐白18 分钟前
Vue3基础语法教程
前端·javascript·vue.js
一 乐23 分钟前
景区管理|基于springboot + vue景区管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·学习
Sylus_sui23 分钟前
企业级Axios封装实战指南
vue.js
幽络源小助理24 分钟前
SpringBoot+Vue大型商场应急预案管理系统源码 | Java安全类项目免费下载 – 幽络源
java·vue.js·spring boot
JIngJaneIL26 分钟前
基于java + vue连锁门店管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
drebander37 分钟前
Cursor IDE 中 Spring Boot 项目启动内存不足问题解决方案
ide·spring boot·cursor
毕设十刻1 小时前
基于Vue的养老服务平台85123(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js