不需要安装谷歌插件，使用使用IDEA自带的插件debug调试vue前端代码

点击启动下拉框，点击Edit Configuration弹出对话框后，点击+号，再选择JavaScript Debug，URL输入项目调试地址，浏览器建议选择默认的Chrome配置完成，然后启动会弹出Chrome页面，点击添加断点，就可以愉快地调试了。

sunzixiao

1590人浏览 · 2024-09-11 10:16:44

sunzixiao · 2024-09-11 10:16:44 发布

文章目录

前言
一、IDEA设置Edit Configuration
二、IDEA调试快捷键

前言

一、IDEA设置Edit Configuration

点击启动下拉框，点击Edit Configuration
在这里插入图片描述
弹出对话框后，点击+号，再选择JavaScript Debug，URL输入项目调试地址，浏览器建议选择默认的Chrome

配置完成，然后启动会弹出Chrome页面，点击添加断点，就可以愉快地调试了
在这里插入图片描述

二、IDEA调试快捷键

单步调试等快捷键操作还是IDEA的快捷键：
1、F8 单步调试，不进入函数内部
2、F7 单步调试，进入函数内部
3、Shift+F7 选择要进入的函数
4、Shift+F8 跳出函数
5、Alt+F9 运行到断点
6、Alt+F8 执行表达式查看结果
7、F9 继续执行，进入下一个断点或执行完程序
8、Ctrl+F8 设置/取消当前行断点
9、Ctrl+Shift+F8 查看断点