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

相关推荐
lpd_lt1 小时前
服务端类vue等页面AI测试方向
前端·vue.js·人工智能
橘子味的冰淇淋~1 小时前
优化前端性能之从“全局引入”改为“按需引入”
前端·javascript·vue.js
Vennn2 小时前
Android自动化:使用 Web 方式实现某音未读消息检查与采集
前端·javascript·vue.js
皮皮大人2 小时前
Vue 3 响应式内核完全解密:reactive & effect 与 Vue 2 Watcher 史诗对决
前端·vue.js
有梦想的程序星空2 小时前
【环境配置】IDEA+Scala 项目 JAR 打包异常完整排查指南
java·ide·intellij-idea
执念、坚持3 小时前
解决 vscode 中导入 android aosp 源码卡顿问题
android·ide·vscode
暗中讨饭xdm3 小时前
立体echarts柱状图咋做
前端·vue.js·echarts
w_t_y_y3 小时前
vue父子组件通信(一)父子调用和通信(2)VUE3
前端·javascript·vue.js
Cheney95013 小时前
Vue 项目字体文件打包后 fonts 文件夹“消失”?原因分析与解决方案
前端·javascript·vue.js
daols884 小时前
vxe-table 实现数据分组统计与表尾合计
前端·javascript·vue.js·vxe-table