作者：L、218
发布平台：CSDN
关键词：鸿蒙开发、Electron、DevTools、调试工具、ArkTS、日志查看器、分布式调试、前端工程化
原创声明：本文为 CSDN 独家原创，转载请注明出处。

一、引言：为什么需要一个“鸿蒙调试助手”？

作为一名鸿蒙开发者，你是否遇到过这些问题？

  • hdc 命令行太难记，每次都要查文档？
  • 多设备连接时分不清哪个是手机、哪个是手表？
  • 分布式任务无法可视化监控？
  • 日志太多，关键信息被淹没？

而 DevEco Studio 虽然功能强大，但启动慢、资源占用高。有没有一种轻量、快速、可定制的调试工具？

答案是：用 Electron 自己做一个！

本文将带你从零开始，使用 Electron + Node.js 构建一款 “鸿蒙开发者调试助手”，支持：

✅ 设备列表可视化
✅ 实时日志抓取
✅ 快捷命令执行（安装/卸载/重启）
✅ 自定义脚本扩展

🎯 适用人群：鸿蒙初学者 & 进阶开发者

二、技术选型与架构设计

技术 作用
Electron 构建桌面 GUI 应用
Node.js 子进程（child_process） 调用 hdc 命令行工具
Tail & Grep 模拟 实时监听日志输出
React/Vanilla JS 渲染界面（本文使用原生 JS 简化）
JSON 配置文件 存储常用命令和设备别名

📁 项目结构如下：

harmony-debug-assistant/
├── main.js            # Electron 主进程
├── preload.js         # 安全预加载
├── renderer.js        # 页面逻辑
├── index.html         # UI 界面
├── assets/            # 图标等资源
├── config.json        # 自定义命令配置
└── package.json

三、准备工作：确保 hdc 已安装并加入环境变量

鸿蒙设备调试依赖华为提供的 HDC（HarmonyOS Device Connector），类似于 Android 的 ADB。

步骤：

  1. 安装 DevEco Studio
  2. 找到 hdc 路径（通常位于 DevEco Studio\tools\hdc.exe）
  3. 将路径添加到系统 PATH 环境变量
  4. 终端输入 hdc version 测试是否成功

✅ 输出示例：

HDC Version: 8.0.1.301

四、核心功能实现

功能1：获取已连接设备列表

main.js 中调用 hdc 命令

const { app, BrowserWindow, ipcMain } = require('electron')
const { exec } = require('child_process')

function getDevices(callback) {
  exec('hdc list targets', (error, stdout, stderr) => {
    if (error) {
      callback([], error.message)
      return
    }
    const lines = stdout.trim().split('\n').slice(1) // 跳过标题行
    const devices = lines.map(line => {
      const [id, type] = line.trim().split(/\s+/)
      return { id, type: type || 'unknown' }
    }).filter(d => d.id)
    callback(devices)
  })
}

ipcMain.handle('get-devices', (event) => {
  return new Promise((resolve) => {
    getDevices((devices, err) => {
      resolve({ devices, error: err })
    })
  })
})

功能2：实时获取设备日志（logcat 类似）

let logProcess = null

ipcMain.on('start-logs', (event, deviceId) => {
  if (logProcess) logProcess.kill()

  logProcess = exec(`hdc -t ${deviceId} shell hilog`)

  logProcess.stdout.on('data', (data) => {
    event.sender.send('log-update', data.toString())
  })

  logProcess.stderr.on('data', (data) => {
    event.sender.send('log-update', `[ERROR] ${data.toString()}`)
  })
})

ipcMain.on('stop-logs', () => {
  if (logProcess) {
    logProcess.kill()
    logProcess = null
  }
})

功能3：执行快捷命令（安装 HAP 包）

ipcMain.handle('run-command', async (event, cmd, targetId) => {
  const fullCmd = cmd.replace('{device}', targetId)
  return new Promise((resolve) => {
    exec(fullCmd, (err, stdout) => {
      resolve({
        success: !err,
        output: stdout || err?.message,
        command: fullCmd
      })
    })
  })
})

五、前端界面搭建（index.html + renderer.js）

index.html 简化版 UI

renderer.js：前端交互逻辑

const deviceList = document.getElementById('deviceList')
const logArea = document.getElementById('logArea')
let selectedDevice = null

// 刷新设备列表
async function reconnect() {
  const result = await window.electronAPI.getDevices()
  deviceList.innerHTML = ''
  if (result.error) {
    deviceList.innerHTML = `<li style="color:red">${result.error}</li>`
    return
  }
  result.devices.forEach(dev => {
    const li = document.createElement('li')
    li.textContent = `${dev.id} (${dev.type})`
    li.onclick = () => {
      document.querySelectorAll('.device-list li').forEach(el => el.classList.remove('selected'))
      li.classList.add('selected')
      selectedDevice = dev.id
    }
    deviceList.appendChild(li)
  })
}

// 实时日志
function startLogs() {
  if (!selectedDevice) {
    alert('请先选择一个设备！')
    return
  }
  logArea.textContent = '[正在监听日志...]'
  window.electronAPI.startLogs(selectedDevice)
}

function stopLogs() {
  window.electronAPI.stopLogs()
  logArea.textContent += '\n[已停止监听]'
}

// 快捷命令
async function installApp() {
  if (!selectedDevice) return
  const res = await window.electronAPI.runCommand(`hdc -t {device} install -r ./app.hap`, selectedDevice)
  alert(res.success ? '✅ 安装成功！' : '❌ 安装失败：' + res.output)
}

async function restartDevice() {
  if (!selectedDevice) return
  const res = await window.electronAPI.runCommand(`hdc -t {device} reboot`, selectedDevice)
  alert(res.success ? '🔄 设备正在重启...' : '❌ 重启失败')
}

// 监听日志更新
window.electronAPI.onLogUpdate((log) => {
  logArea.textContent += log
  logArea.scrollTop = logArea.scrollHeight
})

// 初始化
reconnect()
setInterval(reconnect, 10000) // 每10秒自动刷新

🖼️ 效果截图建议

https://images.pexels.com/photos/3975548/pexels-photo-3975548.jpeg?auto=compress&cs=tinysrgb&w=600
（说明：此处替换为实际运行截图，展示设备列表与日志滚动效果）

🔔 提示：你可以打包成 .exe 放在桌面，一键启动，比打开 DevEco Studio 快得多！

六、进阶功能建议（可拓展方向）

功能 实现思路
📁 HAP 文件拖拽安装 监听 dragover / drop 事件，获取文件路径后调用 hdc 安装
📊 分布式任务监控 解析 hdc shell "bm dump --bundle" 获取跨设备服务状态
💾 日志导出为文件 将日志内容保存为 .log 文件
🎨 主题切换 支持深色/浅色模式
🧩 插件系统 加载 plugins/*.js 实现自定义功能扩展

七、安全与权限提醒

⚠️ 使用注意：

  • hdc 需要设备开启 **USB 调试模式**
  • 多设备连接时建议使用 -t <device-id> 明确指定目标
  • 不要在生产环境中暴露此工具给非开发者
  • 建议对敏感命令进行二次确认

八、结语：做自己的开发者工具

“最好的工具，是你为自己写的那个。”

我们不必等待官方提供所有功能。通过 Electron，我们可以：

  • 把繁琐的命令图形化
  • 把重复的操作自动化
  • 把复杂的流程可视化

这不仅提升了开发效率，也锻炼了全栈能力。

未来，或许你可以基于这个小工具，开发出一款 “鸿蒙生态一体化开发平台”！

九、源码获取

GitHub 仓库地址：
👉 https://github.com/l218/harmony-debug-assistant

包含：

  • 完整项目代码
  • 打包脚本（electron-builder）
  • 示例 HAP 安装命令
  • 配置模板

欢迎 Star ⭐ | Fork 🔁 | 提交 PR 🙌

十、参考资料

  1. HDC 官方文档
  2. Electron 官网
  3. Node.js child_process 文档
  4. DevEco Studio 下载页

💬 互动时间：

  • 你最希望调试工具增加什么功能？
  • 你会自己写开发工具吗？
    欢迎在评论区留言，一起打造国产开发者的极客生态！

✍️ 作者简介：L、218，前端工程师 & 鸿蒙爱好者，专注跨平台工具开发，致力于降低国产系统开发门槛。

✅ 原创声明：本文由 L、218 原创撰写，首发于 CSDN，未经授权不得转载。

#鸿蒙开发 #Electron #调试工具 #hdc #DevEco #前端 #TypeScript #Nodejs #开发者工具 #CSDN博客 #L218 #鸿蒙调试助手

 

# electron # harmonyos # javascript
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

大模型要上边缘？先问一嘴：你的电池、内存和热设计答应了吗？

avatar HarmonyOS开发者社区
cover

鸿蒙应用为什么会卡？一次 DevEco Profiler 的真实性能分析实战

avatar HarmonyOS开发者社区
cover

鸿蒙6.0应用开发——仿微博文本折叠

avatar HarmonyOS开发者社区