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

189 阅读 0 评论 125 点赞

我是靠谱客的博主爱撒娇烤鸡，最近开发中收集的这篇文章主要介绍在IDEA中Debug调试VUE项目的详细步骤，觉得挺不错的，现在分享给大家，希望可以做个参考。

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

1.下载浏览器插件

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

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

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

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

idea中配置如下

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

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

以上就是爱撒娇烤鸡为你收集整理的在IDEA中Debug调试VUE项目的详细步骤的全部内容，希望文章能够帮你解决在IDEA中Debug调试VUE项目的详细步骤所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。