如何使用Webstorm和Chrome来调试Vue项目
更新时间：2021年05月11日 14:24:27 作者：雨点的名字
这篇文章主要介绍了如何使用Webstorm和Chrome来调试Vue项目，对Vue感兴趣的同学，一定要看一下
前言
在项目开发中,Debug模式是非常有必要的，后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要单独去配置一些东西,
所以这里整理自己搭建成功的过程分享出来。可能不同的Webstorm版本会导致效果不一样，所以这里先列出我的版本。
Webstorm版本: 2018.3.4
一、新建Vue项目
为了演示一个完整的示例,所以从创建项目开始，这里通过 vue脚手架命令 开始创建一个项目
vue init webpack debug-vue
如果运行成功就会创建一个名称为 debug-vue 的vue项目,我们通过 WebStorm 打开这个项目并运行,启动命令
npm run dev
启动成功后查看页面
这就代表这个项目运行成功,这里我们在代码添加一个按钮,等下我们通过点击这个按钮来查看Debug模式是否能够成功到打的断点处。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>首页</h2>
<button @click="testMethods">测试bug断点</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
testMethods: function () {
alert("你点我我就跳出来")
}
}
}
</script>
改好之后，再来查看页面 就变成这样了
很明显可以看出，当点击这个按钮会弹出一个框，说明绑定点击事件成功。
二、WebStorm配置
1、设置调试器端口
2、 添加调试配置
这样Webstorm就配置好了。
三、测试
第一步
先在指定代码中添加一个断点,然后启动项目
第二步
启动项目，命令
npm run dev
启动成功后
第三步
启动上面配置的调试按钮
第四步
测试
以上就是如何使用Webstorm和Chrome来调试Vue项目的详细内容，更多关于Vue的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了基于vue 实现token验证的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-12-12
在vue中当我们管理数据的时候比较乱，我们要用到下面的这个库，本文主要介绍了如何使用 Vuex的入门教程，具有一定的参考价值，感兴趣的可以了解一下2022-02-02
这篇文章主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建，本文给大家分享实例代码，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了分享9个Vue的巧妙冷技巧，文章首先通过巧用$attrs和$listeners的技巧展开，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
本篇文章主要介绍了VUE 全局变量的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
今天小编就为大家分享一篇Vue条件循环判断+计算属性+绑定样式v-bind的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue如何使用笛卡尔积算法构建sku表格问题，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue3项目中如何实现el-table分批渲染表格,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再重复。这篇文章将给大家深入的介绍vue.js双向绑定的实现原理，有需要的朋友们可以参考借鉴，下面跟着小编一起来看看吧。2016-12-12
这篇文章主要为大家介绍了Vue3进阶主题Composition API使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论