IDEA中Debug调试VUE前端项目调试JS只需两步
前言
有一个礼拜没发quarku+graalvm相关的内容了，因为博主在忙一个新的前端项目去了，从element-ui切换到antdv,也有很多新的东西需要一边啃文档一边输出，程序出现bug自是在所难免的，所以需要开发工具可以非常方便的debug程序。
在java开发中，debug就是一个debug启动按钮解决的事情，而在前端开发中，IDEA这个开发工具也提供了非常好用的jsdebug工具，博主的这个用法不是网上介绍的那种需要安装插件才能用的方式，免安装浏览器插件可以直接用，只需两步。
第一步，找到jsdebug运行时
在Run/Debug Configurations中，找到JavaScript Debug运行时，新建一个JavaScript Debug运行项，界面如下图所示：
序号1、输入jsdebug启动项目的名称
序号2、复制前端项目浏览地址到这里
这里需要说明下，jsdebug并不是帮你启动了一个前端项目，前端项目该怎么启动还怎么启动
序号3、选择一个你本地安装好的浏览器，我这里选择的就是360极速浏览器
第二步、打断点、运行jsdubg项
给需要的代码打上断点，运行刚刚第一步创建好的jsdebg项，IDEA会帮你在新的浏览器窗口里打开刚刚设置的URL地址，现在你可以在这个新打开的窗口里操作，当遇到你打断点的代码，IDEA的断点就会激活，这个时候就可以愉快的Debug起来了，效果如下图：
结语
IDEA的这个前端调试工具非常好用，却没有得到很好的普及，网上搜到的那种方式大多是安装一个IDEA的浏览器插件配合使用，相比来说，博主发现的这个调试工具简直太好用了，而且注意哦，此法不仅可以调试VUE的项目，而是适合所有的前端项目
以上就是IDEA中Debug调试VUE前端项目调试JS只需两步的详细内容，更多关于Debug前端VUE项目调试JS的资料请关注脚本之家其它相关文章！
相关文章
本文主要介绍了vue-cli5关于yarn的一个小坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
随着构建现代前端应用的需要,样式的管理和隔离变得越来越重要,为了解决样式冲突和管理困难的问题,CSS Modules 应运而生,本文我们将讨论如何在 Vue3 中使用 CSS Modules 实现样式隔离,需要的朋友可以参考下2024-09-09
本篇文章主要介绍了vue-cli开发环境实现跨域请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
vue子组件中使用window.onresize()只执行一次问题
这篇文章主要介绍了vue子组件中使用window.onresize()只执行一次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vuex的官方解释是一个专为vue.js应用程序开发的状态管理模式，这篇文章主要为大家介绍了Vuex的具体用法，希望对大家深入了解Vuex有一定的帮助2023-06-06
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件，这篇文章主要介绍了vue中@click绑定事件点击不生效的解决方案,需要的朋友可以参考下2022-12-12
目前前端三大框架(vue、react、angular)中vue是前端工程师经常使用的,在使用之前需要搭建vue开发环境,这篇文章主要给大家介绍了关于Win11&Win10配置vue开发环境的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue3（vite）设置代理封装axios api解耦,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue调取电脑摄像头实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue3 使用v-model实现父子组件通信的方法(常用在组件封装规范中)
这篇文章主要介绍了Vue3 使用v-model实现父子组件通信(常用在组件封装规范中)的方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-06-06
最新评论