使用IDEA DEBUG调试vue前端js代码,不需要安装谷歌插件

已于 2022-11-07 17:14:05 修改
阅读量6.2k 收藏 13
点赞数 2
分类专栏： 前端 文章标签： 前端 javascript intellij-idea vue.js
于 2022-11-07 17:12:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DAI_Zeekin/article/details/127735110
版权

项目属于vue2+element-ui，首先推荐安装vue.js和element插件
在这里插入图片描述
在这里插入图片描述

如果要debug调试js代码，不需要安装任何插件，使用IDEA自带的插件，点击Edit Configuration，弹出对话框后，点击+号，再选择JavaScript Debug，URL输入项目调试地址，浏览器建议选择默认的Chrome，配置完成，然后启动会弹出Chrome页面，点击添加断点。就可以愉快地调试了，单步调试等快捷键操作还是IDEA的快捷键，不用再与浏览器控制台的快捷键搞混了。

在这里插入图片描述

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

daizuojian
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
intellij-idea+vue前端调试配置
joyloveit的博客
04-22 788
2、添加一个JavaScript Debug 类型的配置，用于调试；其中http://localhost:9527 指向页面启动的地址。默认使用Chrome浏览器。1、如图，添加类型为npm的配置；执行脚本内容为dev；这一步等同于用控制台终端手动执行 npm run dev；用于启动node服务器。三、先启动npm-service，再启动JavaScriptDebug，就可以调试了。二、idea->Edit Configuration。
IDEA vuejs 插件
08-16
为了方便大家下载而上传，只需要1积分，我如果能赚10分，就免费共享了。
前端 Vue 调试工具Vue.js Devtools，浏览器调试Vue项目
03-22
用于在开发Vue项目时在浏览器进行调试，方便开发，清晰开发。ue.js Devtools 是专为 Vue.js 开发者 设计的浏览器插件，它提供了丰富的功能，帮助开发者更轻松地调试、分析和优化 Vue.js 应用。
idea vuejs插件vue.js-2021.1.21更新的
01-25
idea vuejs插件，做前端开发必备插件vue.js-2021.1.21最新更新的，来源 https://plugins.jetbrains.com/plugin/9442-vue-js/versions
10 大IDEA 插件集合，解放双手！！【送源码】
最新发布
java_121388的博客
05-14 1063
希望大佬们继续为开发者社区带来更多优秀的工具和创新，让编程变得更加愉快和高效。—— EOF ——给大家分享一套。
在IDEA中Debug调试VUE前端项目的方法
热门推荐
就是不掉头发
08-09 42万+
调试js代码，每次都在要在代码中写debugger，或者在chrome中打断点，而且chrome的断点信息不人性化。偶然发现idea竟然有这个功能，简直神器啊。研究了半天终于搞定了，哈哈，开心。下面是详细步骤： 1.下载浏览器插件 在chrome应用商店搜索"jetbrains ide support"插件，可能需要FQ（不会百度，老D google host），如下图，这里是我安装好的。这里我试过找下载好的插件，安装但是没有连接成功，总是提示错误，下文会提到。所以别偷懒，老老实实下载。 安装成功后如右上
使用WebStorm/IDEA开发调试Vue/Webpack工程项目
s_156的博客
10-27 1343
前言之前尝试的各种前端编辑器H5Builder,SublimeText,VSCode,NotePad++等等；作为一名后端开发，自己是从Eclipse系列的IDE转向使用JetBrain系列，深受InteliJ IDEA的毒害近期公司的项目使用VSCode开发。然而作为大集成的IDEA，更能解决开发过程中的问题，无论是代码提示、跳转、插件、提示等等，还是IDEA更加符合自己的使用习惯。环境准备1. nodejs v8.x.x以上2. npm v5.x.x以上3. WebStorm 2017.3 以上 / I
IDEA怎样调试运行 vue 项目
anguang1973的专栏
05-11 764
在 IntelliJ IDEA 中调试运行 Vue 项目涉及几个步骤，从设置项目到配置调试环境。
IDEA打开vue项目并运行
一起coding，一起嗨。
11-25 1万+
一、安装vue插件，重启IDEA 二、配置npm 打开你的vue项目根目录 红色框内为你的安装目录，绿色框内保持一致即可！ 配置install命令 配置run命令 三、Terminal中输入npm run serve 打开对应网址看看效果吧 ......
使用idea运行VUE项目
Rockandrollman的博客
08-25 1万+
package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。将项目里的“node_modules”文件夹删除，这是vue项目的依赖包。不过由于“node_modules”文件夹太大，一般不会打包上传到svn、git上的，所以没有这个文件夹就不用删。，不会装的去百度一下，不再细说，这里需要注意要装适合自己项目的版本。，可以查一下如何装，很简单。...
idea开发vue安装及基础配置
qq_28288835的博客
10-24 2624
https://www.jianshu.com/p/dc087bf01475 上面是参考网址，下面是我自己的操作 1）idea安装vue.js File -> Settings -> Plugins -> Browse respositoties… 搜索vue.js，右侧提示Install（截图时已安装，未安装会提示Install）。安装成功后需要重启IDEA。 2）File Types: HTML 添加 *.vue类型 File -> Settings -> Editor
IntelliJ IDEA 安装vue开发插件的方法
08-28
"IntelliJ IDEA 安装vue开发插件的方法" 本文主要介绍了IntelliJ IDEA 安装vue开发插件的方法，并对相关的知识点进行了详细的解释和介绍。 一、IDEA 的安装 要安装 IDEA，需要从官方网站下载安装包，解压缩后直接...
webstrom Debug 调试vue项目的方法步骤
10-18
主要介绍了webstrom Debug 调试vue项目的方法步骤，详细的介绍了两种调试vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
IDEA下载vue.js插件-IDEA搜索不到vue.js该怎么安装
09-20
IDEA下载vue.js插件-IDEA搜索不到vue.js该怎么安装
IDEA安装vue插件图文详解
01-19
非常详细的IDEA安装vue插件的方法，供大家参考，具体内容如下 1.idea上面安装vue插件 （到这里idea安装vue插件就好了，接下来我们开始搭建我们后台管理系统） 2.利用vue搭建后台管理系统，这边我们直接用半成品...
IDEA中写Vue
qq_44116526的博客
11-30 3263
使用IDEA写Vue，首先，在Setting——》Plugins中添加插件添加Vue.js, 重启IDEA，在Setting——》editor 在3中添加 <template> #[[$END$]]# </template> <script> export default { name: "${COMPONENT_NAME}" } </script> <style scoped> </style> ` 新建项目可见VueCo
idea vue 调试_带你快速搭建Vue前端项目前置篇
weixin_39737764的博客
11-29 1059
点击上方java项目学习，选择星标公众号重磅资讯、干货，第一时间送达前言：在过去的十年里，我们的网页变得更加动态化和强大了，通过JavaScript，我们已经把很多传统的服务器端代码放入到浏览器中。这就导致浏览器中产生了成千上万行的JavaScript代码，它们连接了各式各样的HTML和CSS文件，但缺乏正规的组织形式。这也是为什么越来越多的开发者使用JavaScript框架，诸...
IDEA调试总结（设置断点进行调试）
十八折中青年
07-20 1万+
黑背景版：   先编译好要调试的程序。1.设置断点 选定要设置断点的代码行，在行号的区域后面单击鼠标左键即可。 2.开启调试会话 点击红色箭头指向的小虫子，开始进入调试。 IDE下方出现Debug视图，红色的箭头指向的是现在调试程序停留的代码行，方法f1()中，程序的第9行。红色箭头悬停的区域是程序的方法调用栈区。在这个区域中显示了程序执行到断点处所调用过的所用方法，越下面的方法被调用的...
IntelliJ IDEA debug调试小结
努力是为了让自己更加有方向
09-13 2387
注：本文以 IntelliJ IDEA build: #IC-162.2032.8 为例准备调试代码 1.设置断点：选择代码行，点击行号后面的区域或者Ctrl+F8 2.开启调试：点击小虫子或者用快捷键Shift+F9（编译：shift+F10） **3.单步调试** =====step over(shift+F8)=====
idea安装vue.js插件
09-06
要在Idea中安装Vue.js插件，可以按照以下步骤进行操作： 1. 打开Idea，并确保已经安装了Vue.js插件的依赖项，例如Node.js和npm。 2. 在Idea的顶部菜单栏中，选择 "File"（文件）> "Settings"（设置）。 3. 在设置面板中，选择 "Plugins"（插件）。 4. 在插件页面的搜索框中，输入 "Vue.js"，然后点击搜索按钮。 5. 在搜索结果中，找到 "Vue.js" 插件，并点击右侧的 "Install"（安装）按钮。 6. 安装完成后，重启Idea以使插件生效。 现在，你应该能够在Idea中使用Vue.js插件来开发Vue.js应用程序了。你可以享受到一些提供代码补全、语法高亮和其他有用功能的好处。希望这对你有所帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值