目录前言一、新建Vue项目二、WEBStORM配置1、设置调试器端口2、 添加调试配置三、测试第一步第二步第三步第四步前言 在项目开发中,Debug模式是非常有必要的,后端对于ide
在项目开发中,Debug模式是非常有必要的,后端对于idea工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要单独去配置一些东西,
所以这里整理自己搭建成功的过程分享出来。可能不同的Webstorm版本会导致效果不一样,所以这里先列出我的版本。
Webstorm版本: 2018.3.4
为了演示一个完整的示例,所以从创建项目开始,这里通过 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就配置好了。
先在指定代码中添加一个断点,然后启动项目
启动项目,命令
npm run dev
启动成功后
启动上面配置的调试按钮
测试
以上就是如何使用Webstorm和Chrome来调试Vue项目的详细内容,更多关于Vue的资料请关注编程网其它相关文章!
--结束END--
本文标题: 如何使用Webstorm和Chrome来调试Vue项目
本文链接: https://www.lsjlt.com/news/125639.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0