作者:Pissa_lo | 来源:互联网 | 2023-05-18 22:25
如何使用Webstorm和Chrome来调试Vue项目是千自学中一篇关于Storm的文章简介:目录前言一、新建Vue项目二、WebStorm配置1、设置调试器端口2、添加调试配置三、测试第一步第二步第三步第四步前言在项目开发中,Debug模式是非常有必要的,后端对于IDEA工具而言Deb
目录 前言 一、新建Vue项目 二、WebStorm配置 三、测试
前言
在项目开发中,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模式是否能够成功到打的断点处。
{{ msg }}
首页
测试bug断点
改好之后,再来查看页面 就变成这样了
很明显可以看出,当点击这个按钮会弹出一个框,说明绑定点击事件成功。
二、WebStorm配置
1、设置调试器端口
2、 添加调试配置
这样Webstorm就配置好了。
三、测试
第一步
先在指定代码中添加一个断点,然后启动项目
第二步
启动项目,命令
npm run dev
启动成功后
第三步
启动上面配置的调试按钮
第四步
测试
以上就是如何使用Webstorm和Chrome来调试Vue项目的详细内容,更多关于Vue的资料请关注其它相关文章!
推荐阅读
本文深入探讨了 Vue.js 中异步组件的应用与优化策略。首先,文章介绍了异步组件的基本概念及其在现代前端开发中的重要性。为了确保最佳实践,建议使用 Webpack 作为模块打包工具,因为 Browserify 默认不支持异步组件的加载。接着,详细解释了异步组件的使用方法,并提供了官方文档的相关链接以供参考。此外,文章还讨论了多种优化技巧,包括代码分割、懒加载和性能调优,以提升应用的整体性能和用户体验。 ...
[详细]
蜡笔小新 2024-10-31 16:52:55
蜡笔小新 2024-11-11 14:58:09
在视频传输领域,MP4虽然常见,但在直播场景中直接使用MP4格式存在诸多问题。例如,MP4文件的头部信息(如ftyp、moov)较大,导致初始加载时间较长,影响用户体验。相比之下,HLS(HTTP Live Streaming)协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段,并生成一个M3U8播放列表文件,实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流,包括技术原理和具体操作步骤,帮助读者更好地理解和应用这一技术。 ...
[详细]
蜡笔小新 2024-11-11 12:12:04
本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ...
[详细]
蜡笔小新 2024-11-11 10:58:21
在最近的学习过程中,我对Vue.js中的Prop属性有了更深入的理解,并认为这一知识点至关重要,因此在此记录一些心得体会。Prop属性用于在组件之间传递数据。由于每个组件实例的作用域都是独立的,无法直接引用父组件的数据。通过使用Prop,可以将数据从父组件安全地传递到子组件,确保数据的隔离性和可维护性。 ...
[详细]
蜡笔小新 2024-11-07 17:28:30
在HTML5应用中,Accordion(手风琴,又称抽屉)效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果,通过层次结构优化信息展示和页面布局,提升用户体验。这些效果不仅增强了视觉效果,还提高了内容的可访问性和互动性。 ...
[详细]
蜡笔小新 2024-11-04 18:09:29
在近期的一个H5游戏开发项目中,需要将Excel数据转换为JSON格式。经过调研,市面上缺乏合适的工具满足需求。因此,决定利用Node.js、EJSExcel、Express和Vue.js自行构建这一工具。本文主要介绍项目的第一阶段,即Vue.js项目的初始化及开发环境的配置过程,详细阐述了如何搭建高效的前端开发环境,确保后续功能开发的顺利进行。 ...
[详细]
蜡笔小新 2024-10-26 07:41:45
使用vue.js实现checkbox的全选,和多个的删除欢迎大家来我的博客浏览更多的干货内容www.jaxqin.comtemplate代码:<template> ...
[详细]
蜡笔小新 2024-10-20 17:06:58
Vue 开发技巧:实现数据过滤与排序功能详解 ...
[详细]
蜡笔小新 2024-11-11 16:43:09
在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ...
[详细]
蜡笔小新 2024-11-10 13:16:43
本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ...
[详细]
蜡笔小新 2024-11-07 15:02:54
蜡笔小新 2024-11-07 13:12:35
Vue 实战基础教程第9讲:深入理解计算属性与侦听器的高效使用 ...
[详细]
蜡笔小新 2024-11-05 18:45:54
深入解析 Vue3 中的响应式 API:shallowReactive、shallowRef、triggerRef 和 customRef 的使用与原理 ...
[详细]
蜡笔小新 2024-11-05 13:47:31