最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
用Webstorm和Chrome来调试Vue项目代码示例
时间：2022-06-29 02:27:51 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下用Webstorm和Chrome来调试Vue项目代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
一、新建Vue项目
为了演示一个完整的示例,所以从创建项目开始，这里通过 vue脚手架命令 开始创建一个项目
vue init webpack debug-vue
如果运行成功就会创建一个名称为 debug-vue 的vue项目,我们通过 WebStorm 打开这个项目并运行,启动命令
npm run dev
启动成功后查看页面
这就代表这个项目运行成功,这里我们在代码添加一个按钮,等下我们通过点击这个按钮来查看Debug模式是否能够成功到打的断点处。
{{ msg }}
首页
改好之后，再来查看页面 就变成这样了
很明显可以看出，当点击这个按钮会弹出一个框，说明绑定点击事件成功。
二、WebStorm配置
1、设置调试器端口
2、 添加调试配置
这样Webstorm就配置好了。
三、测试
第一步
先在指定代码中添加一个断点,然后启动项目
第二步
启动项目，命令
npm run dev
启动成功后
第三步
启动上面配置的调试按钮
第四步
测试
相关文章
- 原神仆人阿蕾奇诺突破材料收集攻略 原神虹彩蔷薇怎么收集 04-25
- 原神西尼阿斯成就怎么达成 原神西尼阿斯成就攻略 04-25
- 原神古老的自鸣音乐盒乐章全收集攻略 原神古老的自鸣音乐盒6个乐章在哪 04-25
- 原神龙蜥特急斯库拉号成就怎么达成 原神龙蜥特急斯库拉号成就攻略 04-25
- 逆水寒手游橙戒流火幻荧什么时候上线 逆水寒手游橙戒流火幻荧上线时间介绍 04-25
- 恶意不息堕落余烬怎么获得 04-25