使用Webstorm调试Vue代码详细图文教程
更新时间：2024年05月03日 09:30:48 作者：riyue666
WebStorm是一款优秀的前端开发IDE,之前一直可以调试Vue项目,下面这篇文章主要给大家介绍了关于使用Webstorm调试Vue代码的详细图文教程,文中通过图文介绍的非常详细,需要的朋友可以参考下
在我们前端开发过程中相信很多人都是通过console.log来调试我们的代码的，但是当代码复杂度比较高的时候这个方法就比较鸡肋了。
这里我来教大家在Webstorm中如何来调试自己的代码,当然Webstom只是我常用的开发工具，用Vs code也是可以的。
1、点击编辑创建配置项
2、名称：怎么取都可以，这里我自己命名为PC；URL：填写需要测试的项目运行起来的地址，我这里是本地的8080，可根据自己的情况修改，浏览器：选择自己常用的即可。确保在加载脚本时检测到断点可开可不开。
3、运行需要调试的项目 一般是通过：npm run dev 或者npm run serve；成功运行后，会提示项目访问URL，这个要和前文提到的配置项里面URL保持一致。
4、运行调试按住快捷键ALT+F5或者点击这里开启
5、调试项目，可以在自己需要调试的代码之前 加上 debugger开启断点，但是测试完毕后记得移除
或者在webstorm点击右边代码行数可开启断点
6、加上这些后可以ctrl+f5重新开启调试或者继续点击这里
7、进入你需要调试的代码后页面显示如下
比较重要的就这三项，熟练使用后你的调试效率会快的飞起
附：解决 WebStorm 调试 Vue 定位不到源代码
vue.config.js 中配置
configureWebpack: (config) => {
if (process.env.NODE_ENV === "development") {
config.devtool = "source-map";
}
},
总结
到此这篇关于使用Webstorm调试Vue代码的文章就介绍到这了,更多相关Webstorm调试Vue代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue+vue-router转场动画的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
postcss-pxtorem设置不转换UI框架的CSS单位问题
这篇文章主要介绍了postcss-pxtorem设置不转换UI框架的CSS单位问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
Vue的transition-group与Virtual Dom Diff算法的使用
这篇文章主要介绍了Vue的transition-group与Virtual Dom Diff算法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
在vue3中父组件访问子组件中的属性和方法是需要借助于ref,苏哦一本文小编给大家介绍了vue3父组件如何使用ref获取获取子组件的属性和方法,文中详细的代码讲解,需要的朋友可以参考下2023-11-11
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
这篇文章主要介绍了vue 使用插槽分发内容操作,结合实例形式总结分析了vue.js使用单个插槽、具名插槽、作用域插槽相关操作技巧与注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要为大家详细介绍了基于Vue.js的表格分页组件使用方法，了解了Vue.js的特点，感兴趣的朋友可以参考一下2016-05-05
本篇文章给大家分享了关于vue的diff算法的相关知识点总结，有兴趣的朋友参考学习下。2018-03-03
这篇文章主要介绍了Vue项目实现简单的权限控制功能，文中给大家介绍了两种方式进行权限限制，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vuejs如何清空表单数据、删除对象中的空属性公共方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
最近在做一个vue的项目,碰到一点关于Map键值对传参的问题,下面这篇文章主要给大家介绍了关于Vue中如何使用Map键值对传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
最新评论