您的位置：首页 > 编程技术 > js  >  在IDEA中Debug调试VUE项目的详细步骤

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

 更新时间：2021年10月15日 16:00  点击：2272

调试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项目内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • IntelliJ IDEA2021.1 配置大全(超详细教程)

    这篇文章主要介绍了IntelliJ IDEA2021.1 配置大全(超详细教程),需要的朋友可以参考下...2021-04-18

  • 解决IDEA 左侧Project中没有out文件夹的问题

    这篇文章主要介绍了解决IDEA 左侧Project中没有out文件夹的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-08

  • idea 修改项目名和module名称的操作

    这篇文章主要介绍了idea 修改项目名和module名称的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-13

  • 关于idea一直卡在build不动的解决方案

    这篇文章主要介绍了idea一直卡在build不动的解决方案,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-21

  • Intellij IDEA连接Navicat数据库的方法

    这篇文章主要介绍了Intellij IDEA连接Navicat数据库的方法,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借价值，需要的朋友可以参考下...2021-03-25

  • idea 访问html页面端口号显示的是63342而不是8080

    这篇文章主要介绍了idea 访问html页面端口号显示的是63342而不是8080，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-08-11

  • 解决IDEA占用C盘空间过大的问题

    这篇文章主要介绍了解决IDEA占用C盘空间过大的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-22

  • intelliJ IDEA 多行选中相同内容的快捷键分享

    这篇文章主要介绍了intelliJ IDEA 多行选中相同内容的快捷键分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-06

  • 在ASP.NET 2.0中操作数据之七十二：调试存储过程

    在开发过程中，使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误，同样Visual Studio也支持对SQL Server里面的存储过程进行调试，下面就让我们看看具体的调试方法。...2021-09-22

  • 解决idea2020 maven无法自动导包的问题

    这篇文章主要介绍了解决idea2020 maven无法自动导包的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-13

  • intellij idea快速查看当前类中的所有方法(推荐)

    这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-02

  • 解决IDEA maven 项目修改代码不生效,mvn clean、install后才生效

    这篇文章主要介绍了解决IDEA maven 项目修改代码不生效,mvn clean、install后才生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25

  • IDEA中的clean,清除项目缓存图文教程

    这篇文章主要介绍了IDEA中的clean,清除项目缓存图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25

  • idea 打包maven项目忽略test文件的操作

    这篇文章主要介绍了idea 打包maven项目忽略test文件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05

  • 解决IDEA插件市场Plugins无法加载的问题

    这篇文章主要介绍了解决IDEA插件市场Plugins无法加载的问题,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-21

  • IDEA 2021.2 激活教程及启动报错问题解决方法

    这篇文章主要介绍了IDEA 2021.2 启动报错及激活教程,文章开头给大家介绍了idea2021最新激活方法，关于idea2021启动报错的问题小编也给大家介绍的非常详细，需要的朋友可以参考下...2021-10-15

  • IDEA如何添加配置文件到classpath中

    这篇文章主要介绍了IDEA如何添加配置文件到classpath中,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19

  • Node调试工具JSHint的安装及配置教程

    现在我们介绍一种在Node下检查简单错误的JS代码验证工具JSHint。　　JSHint的具体介绍参考http://www.jshint.com/about/，说直白点儿，JSHint就是一个检查JS代码规范与否的工具，它可以用来检查任何（包括server端和client端...2014-05-31

  • 解决idea check out 切换分支时找不到需要的分支问题

    这篇文章主要介绍了解决idea check out 切换分支时找不到需要的分支问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-09

  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-11