webstorm怎么调试,webstorm调试
本文主要介绍如何使用Webstorm和Chrome调试Vue项目。对Vue感兴趣的同学一定要看看。
目录
前言1、新建Vue项目2、WebStorm配置1、设置调试器端口2、添加调试配置3、测试步骤1、步骤2、步骤3、步骤4
前言
在项目开发中，调试模式是非常必要的。后端调试模式对于IDEA工具来说非常方便，但是前端的WebStorm如果启用的话需要单独配置一些东西。
所以下面就来整理一下，分享一下自己搭建成功的过程。可能不同版本的Webstorm会导致不同的效果，所以先说我的版本。
网络风暴版本：2018年3月4日
一、新建Vue项目
为了演示一个完整的例子，所以从创建项目开始，在这里，通过vue scaffold命令创建一个项目。
初始化webpack调试
如果运行成功，将会创建一个名为debug-vue的vue项目。我们将打开这个项目，通过WebStorm运行它，并启动命令。
npm运行开发
成功启动后检查页面。
这意味着项目正在成功运行。这里我们给代码添加一个按钮，然后点击这个按钮，看看调试模式是否能成功到达断点。
模板
你好
h1{{ msg }}/h1
H2主页/h2
Button @click=testMethods 测试错误断点/button
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data () {
返回{
消息：“欢迎使用你的Vue.js应用”
}
},
方法：{
testMethods:函数(){
Alert(你点我我就跳出来)
}
}
}
/脚本
改完之后再查看页面，会变成这样。
很明显，当你点击这个按钮时，会弹出一个框，表示绑定点击事件成功。
二、WebStorm配置
1、设置调试器端口
2、 添加调试配置
所以配置了Webstorm。
三、测试
第一步
在指定的代码中添加断点，然后启动项目。
第二步
启动项目，命令
npm运行开发
成功启动后
第三步
启动上面配置的调试按钮。
第四步
试验
这就是如何使用Webstorm和Chrome调试Vue项目。更多关于Vue的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。