webStorm debug vue项目的两种方案图文详解
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
一、前言
本文将介绍通过webstorm对vue项目进行debugger调试的两种方案。
但是,不管通过那种方案,都无法达到类似后端idea调试的体验,感觉十分难受,不过,比起用console.log还是好一些。如果各位有更好的方案,还望赐教。
二、debug的两种方案
方案1:在浏览器的控制台进行调试
1.1 只需要在你的vue.config.js文件中添加如下代码即可,然后启动项目
1 2 3 4 5 6 | module.exports = { configureWebpack: { // 指定 Webpack 在构建过程中生成 source map 文件,以便于调试代码 devtool: "source-map" , }, } |
1.2 启动项目,打开浏览器控制台
1.3 搜索(Ctrl+P)你想要打断点的vue文件,例如:我这里是login.vue
1.4 找到需打断点的行,点击行号即可打断点,然后进行触发即可。
方案2:直接在webstorm中进行调试(debug启动server)
2.1 修改webstorm的调试器配置
2.2 配置一下webstorm浏览器信息
--remote-allow-origins=* --remote-debugging-port
2.3 先启动项目,拿到项目的访问地址,如 http://localhost:8082/
2.4 配置启动信息
2.5 直接以debug方式启动npm的server服务,webstorm会打开新的浏览器页面,直接在webstorm断点调试。
三、总结说明
总的来说,方案2的操作,实际上会让webstorm打开两个端口,一个是服务端口(对应我这里的serve服务),另外一个就是debug端口(对应我这里的serve JavaScript),通过debug端口浏览器和webstorm之间交互用户debugger动作,以便知道用户干了什么。
所以,如果你的操作失败了或者遇到了其他情况,你可以检查一下,你的项目服务(serve)和debug服务(serve JavaScript)是否都正确启动了。
到此这篇关于webStorm debug vue项目两种方案的文章就介绍到这了,更多相关webStorm debug vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Vue 3 + Element Plus 封装单列控制编辑的可编辑表格
在Web应用开发中实现表格数据编辑功能至关重要,本文将详细介绍如何使用Vue3和ElementPlus库来构建一个支持单列编辑的表格组件,本教程详细阐述了组件创建过程和数据绑定机制,帮助你快速掌握Vue3中表格编辑功能的实现,感兴趣的朋友一起看看吧2024-09-09vue.js添加一些触摸事件以及安装fastclick的实例
今天小编就为大家分享一篇vue.js添加一些触摸事件以及安装fastclick的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08第一次在Vue中完整使用AJAX请求和axios.js的实战记录
AJAX是现代Web开发的一个关键部分,尽管它一开始看起来令人生畏,但在你的武库中拥有它是必须的,下面这篇文章主要给大家介绍了关于第一次在Vue中完整使用AJAX请求和axios.js的相关资料,需要的朋友可以参考下2022-11-11
最新评论