前言

有一个礼拜没发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的资料请关注Devmax其它相关文章!

IDEA中Debug调试VUE前端项目调试JS只需两步的更多相关文章

  1. 适用于Xcode,IntelliJ Idea和Phonegap(又名Cordova)的gitignore模板

    有没有人有一个很好的预先推出的gitignore文件用于使用Xcode和PhoneGap的iPhone开发?

  2. 第四章 :构建你的应用程序原型

    在应用程序开发的环境下,原型可以是一个app的早期样品,这个样品没有什么功能只有一些用户界面甚至只有草图。原型可以允许你在不构建应用程序的情况下测试你的idea。下图展示原型的好处将应用程序的草图画在纸上现在你有一个idea,怎么构建原型呢?使用POP构建你的应用程序prototype你可以把你的app话在纸上。如前所述,应用程序原型有很多形式。

  3. android-studio – IDEA中Gradle自动完成的位置在哪里?

    解决方法对于Groovy插件,它可能是Cucumber.我知道Gradle使用Groovy的一些技术和语法,所以我尝试在第一次尝试时安装一些Groovy插件并取得成功.安装此插件的步骤:>在MacOS上:首选项…

  4. android-studio – 在Android Studio中放置gitIgnore文件的位置?

    我将此文件复制到AndroidStudio中的gitIgnore文件中,但是当我在gitHub上推送该项目时,我的gitnigore文件如下所示:所以,我复制到AndroidStudio的文件不在这里.问题是什么?解决方法通常在创建新项目时会为您生成gitignore文件.这是正确的.gitignore文件.这是你必须把它.

  5. Tools-> Android->启用ADB服务的目的是什么?

    为了将IDEA和DDMS连接到同一个仿真器,我不得不禁用此功能.它有什么作用?这个行动有不利之处吗?

  6. android – IntelliJ IDEA认为我的项目的一部分是subversion而不是git,如何解决这个问题?

    解决方法在“设置”中检查项目配置>版本控制.这是配置目录/vcs映射的位置.删除可能存在的任何SVN映射,并确保整个项目映射到Git.顺便说一句,我不知道这怎么可能发生.

  7. Android Studio在启动时修改./idea/vcs.xml

    因为不建议忽略AndroidStudio中的整个.idea文件夹,所以大多数文件都由git跟踪.然而奇怪的是,每次启动后,即使已经存在数十个,也会向vcs.xml添加相同的行.这很快变老了.这种行为是有目的还是仅仅是一个错误?AndroidStudio还可以在启动时阻止它进行此类修改吗?

  8. android – 强制Idea生成R.Java文件的最简单的方法是什么?

    我试图使用intellij想法运行Android示例应用程序,而R.Java文件缺少表单记事本样本源目录.解决方法确保您的项目根目录中有gen文件夹.如果没有,请自己做一个.

  9. iOS开发中如何优雅的调试数据库详解

    这篇文章主要给大家介绍了关于iOS开发中如何优雅的调试数据库的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

  10. JavaScript逆向调试技巧总结分享

    当我们抓取网页端数据时,经常被加密参数、加密数据所困扰,如何快速定位这些加解密函数,尤为重要,下面这篇文章主要给大家介绍了关于JavaScript逆向调试技巧的相关资料,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部