debug4j-console

一款高效、便捷的 Java 调试利器前端控制台，基于 Vue 3 + TypeScript + Vite 构建。通过代理穿透、源码热更新、进程管理、日志监测、组件增强等核心能力，为 Java 应用提供远程诊断与运行时调试支持。

---

✨ 特性

• 🚀 现代化技术栈：Vue 3 + TypeScript + Vite
• 🎨 优雅的 UI 设计：自定义组件库，流畅的交互体验
• 🚇 代理穿透：支持 TCP/HTTP 协议，一键配置常用服务代理
• 🔥 源码热更新：在线编辑 Java 源码，实时生效
• 🛠️ 进程管理：系统参数、进程重载、对象增强、JVM 监控
• 📜 日志管理：动态修改日志等级、实时查看、关键词检索
• 📦 组件增强：SFTP 文件管理、OpenSSH/Arthas 组件管理

---

🛠️ 技术栈

核心框架

技术	版本	说明
Vue	3.4+	渐进式 JavaScript 框架，使用 Composition API
TypeScript	5.3+	类型安全的 JavaScript 超集
Vite	5.0+	新一代前端构建工具
Vue Router	4.2+	Vue.js 官方路由
Pinia	2.1+	Vue 3 官方状态管理

核心依赖

• CodeMirror 6：强大的代码编辑器，支持 Java 语法高亮
• Axios：基于 Promise 的 HTTP 客户端
• One Dark Theme：美观的暗色主题

开发工具

• ESLint + eslint-plugin-vue：代码质量检查
• vue-tsc：TypeScript 类型检查

---

📦 自定义组件库

项目包含完整的自定义 UI 组件库，所有组件均使用 Vue 3 + TypeScript 开发：

组件	位置	功能特性
Badge	src/components/Badge.vue	多状态标签（success/warning/danger/info）
Button	src/components/Button.vue	多类型按钮（primary/secondary/link）
Card	src/components/Card.vue	卡片容器，支持自定义头部和内容
Header	src/components/Header.vue	页面头部导航组件
Modal	src/components/Modal.vue	弹窗组件，支持多种操作模式
Notification	src/components/Notification.vue	通知提示组件
Sidebar	src/components/Sidebar.vue	侧边栏导航组件
Table	src/components/Table.vue	数据表格组件，支持自定义插槽

---

🎯 核心功能

1. 🏠 首页 - 节点管理

• 三层结构展示：Server → Node → Client 层级展示
• 实时节点状态：在线/离线状态监控
• 节点详情查看：应用名称、包名、进程ID、调试端口等
• 过滤包名配置：支持本地配置过滤包名
• 重载模式显示：查看当前应用重载模式

2. 🚇 代理穿透

• 端口映射管理：创建、编辑、删除代理规则
• 多协议支持：TCP/HTTP 代理协议
• 快捷配置：JDWP、SSH、SFTP、JMX 一键配置
• 状态监控：实时显示代理连接状态

3. 🔥 源码管理

• 在线编辑器：基于 CodeMirror 6，支持 Java 语法高亮
• 源码查看：浏览应用类文件
• 字节码查看：查看原始字节码和增强后字节码
• 热更新：在线修改源码，无需重启应用

4. 🛠️ 进程管理

系统参数

• 查看 JVM 参数、环境变量、Spring 配置
• 参数来源分类展示
• RefreshScope 动态刷新

进程重载

• 修改 JVM 参数、环境变量、启动参数
• 一键重启进程
• 重载模式切换

对象增强

• 获取和修改对象属性
• 执行对象方法
• 静态方法调用

JVM 监控

• 生成内存快照（Heap Dump）
• 生成 JFR 飞行记录
• 监控文件列表管理

5. 📜 日志管理

日志等级

• 查看 Logger 配置
• 动态修改日志等级（TRACE/DEBUG/INFO/WARN/ERROR/OFF）
• 实时生效

日志监测

• 实时查看日志文件内容
• 关键词过滤
• 自动滚动更新

日志检索

• 在日志文件中搜索关键词
• 支持递归搜索
• 结果高亮显示

6. 📦 组件增强

文件管理

• SFTP 文件浏览器
• 文件上传/下载/删除
• 目录树导航

组件管理

• OpenSSH、Arthas 组件安装
• 组件状态监控
• 一键安装和升级

---

🚀 快速开始

环境要求

• Node.js >= 18.0.0
• npm >= 9.0.0

安装依赖

npm install

启动开发服务器

npm run dev

访问地址：http://localhost:3000

构建生产版本

npm run build

构建产物将输出到 dist 目录。

预览生产构建

npm run preview

代码检查

npm run lint

---

📁 项目结构

debug4j-console/
├── public/
│   ├── favicon.ico
│   └── setting.js
├── src/
│   ├── api/
│   │   └── index.ts              # API 接口封装
│   ├── assets/
│   │   └── logo.png              # 静态资源
│   ├── components/               # 公共组件库
│   │   ├── Badge.vue
│   │   ├── Button.vue
│   │   ├── Card.vue
│   │   ├── Header.vue
│   │   ├── Modal.vue
│   │   ├── Notification.vue
│   │   ├── Sidebar.vue
│   │   └── Table.vue
│   ├── layouts/
│   │   └── MainLayout.vue        # 主布局
│   ├── router/
│   │   └── index.ts              # 路由配置
│   ├── stores/                   # Pinia 状态管理
│   │   ├── node.ts
│   │   ├── notification.ts
│   │   ├── proxy.ts
│   │   ├── source.ts
│   │   └── user.ts
│   ├── types/
│   │   └── index.ts              # TypeScript 类型定义
│   ├── utils/
│   │   ├── clipboard.ts
│   │   ├── device.ts
│   │   └── request.ts
│   ├── views/                    # 页面组件
│   │   ├── component/
│   │   │   ├── FileView.vue
│   │   │   └── ServiceView.vue
│   │   ├── log/
│   │   │   ├── LevelView.vue
│   │   │   ├── SearchView.vue
│   │   │   └── ViewView.vue
│   │   ├── process/
│   │   │   ├── JvmView.vue
│   │   │   ├── ObjectView.vue
│   │   │   ├── ParamsView.vue
│   │   │   └── ReloadView.vue
│   │   ├── HomeView.vue
│   │   ├── LoginView.vue
│   │   ├── ProxyView.vue
│   │   └── SourceView.vue
│   ├── App.vue
│   ├── main.ts
│   └── style.css
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

---

🌐 浏览器支持

浏览器	最低版本
Chrome	88+
Firefox	85+
Safari	14+
Edge	88+

---

💡 使用场景

1. 线上问题排查：通过代理穿透远程连接生产环境，实时查看日志和调试代码
2. 热更新调试：在不重启应用的情况下修改源码，快速验证修复方案
3. 性能分析：通过 JVM 监控功能分析内存使用和性能瓶颈
4. 配置管理：动态修改系统参数，无需重启应用即可生效
5. 组件管理：一键安装和管理调试工具组件（如 Arthas）

---

📜 License

MIT License

---

🙏 鸣谢

本项目由 Trae 全程开发完成。

感谢 Trae 提供的强大 AI 辅助开发能力，让项目开发变得更加高效和愉悦！

---

> 💡 提示：如果您在使用过程中有任何问题或建议，欢迎提出 Issue！