IT码农库

您当前所在位置:首页 > 网络编程 > JavaScript

JavaScript

在IDEA中Debug调试VUE项目的详细步骤

互联网 就是不掉头发2021-10-15JavaScript4181
idea竟然有一个神功能很多朋友都不是特别清楚,下面小编给大家带来了在IDEA中Debug调试VUE项目的详细步骤,感兴趣的朋友一起看看吧

调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化。偶然发现idea竟然有这个功能,简直神器啊。研究了半天终于搞定了,哈哈,开心。下面是详细步骤:

1.下载浏览器插件

在chrome应用商店搜索"jetbrains ide support"插件,可能需要FQ(不会百度,老D google host),如下图,这里是我安装好的。这里我试过找下载好的插件,安装但是没有连接成功,总是提示错误,下文会提到。所以别偷懒,老老实实下载。

在这里插入图片描述

安装成功后如右上角会出现此图标

在这里插入图片描述

需要注意的是,不要找下载好的插件安装,一是安装后不起作用,二是chrome不信任未知来源的插件,重启后会自动停用插件。如果不能在线安装的话,还有一个办法:将下载后的插件后缀名改为rar,解压缩到文件夹里,使用浏览器的插件开发者模式,将文件夹加载为插件,也可安装。

还有在插件图标上右键,选项,如下图,可以配置端口,这里要和idea里的一致才行;

在这里插入图片描述
在这里插入图片描述

2.配置IDEA

idea中配置如下

在这里插入图片描述
在这里插入图片描述

这两步配置好以后,运行刚创建的JavaScript Debug 就可以debug启动,打断点访问了

在这里插入图片描述

到此这篇关于在IDEA中Debug调试VUE前端项目的方法的文章就介绍到这了,更多相关idea调试vue项目内容请搜索 以前的文章或继续浏览下面的相关文章希望大家以后多多支持 !

大图广告(830*140)