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

相关推荐
还是大剑师兰特7 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
xkxnq8 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A9 小时前
vue css中 :global的使用
前端·javascript·vue.js
非鱼䲆鱻䲜9 小时前
vscode开发stm32添加新的头文件路径和包含源文件
ide·vscode·stm32·cmake·包含头文件·包含源文件
终端鹿12 小时前
Vue2 迁移 Vue3 避坑指南
前端·javascript·vue.js
SuperEugene13 小时前
TypeScript+Vue 实战:告别 any 滥用,统一接口 / Props / 表单类型,实现类型安全|编码语法规范篇
开发语言·前端·javascript·vue.js·安全·typescript
chushiyunen13 小时前
pycharm注意力残差示例
ide·python·pycharm
还是大剑师兰特14 小时前
Vue3 报错:computed value is readonly 解决方案
前端·vue.js
北寻北爱15 小时前
前端加密解密- base64、md5、sha256、AES
前端·vue.js
spencer_tseng17 小时前
Vue node_modules
javascript·vue.js