截图、UI布局、hilog日志一站搞定：arkTS的HDC Manager面板使用指南

截图、UI布局、hilog日志一站搞定arkTS的HDC Manager面板使用指南【免费下载链接】arkTSVSCode鸿蒙ArkTS插件✨✍️支持各种补全/跳转⛺️支持codelinter检测代码错误VSCode HarmonyOS ArkTS plugin for personal use ✨ ✍️supports source code navigation and completion ⛺️supports codelinter to detect errors项目地址: https://gitcode.com/ohosvscode/arkTS如果你正在用 VSCode 开发 HarmonyOS ArkTS 项目那么 arkTS 插件内置的HDC Manager 面板一定能大幅提升调试效率。它通过 hdcHarmonyOS Device Connector直接连接真机或模拟器一个面板搞定四件事设备截图、UI 布局树查看、hilog 日志实时过滤、进程与资源监控再也不用在终端里反复敲hdc shell命令了。本文是面向新手的使用指南带你 3 步连上设备玩转面板四大功能。一、HDC Manager 面板能做什么打开面板后底部有 4 个标签页顶部还有 Hilog 日志工具栏功能一览功能位置说明 设备截图布局 Tab抓取设备当前画面并打开快照预览 UI 布局树布局 Tab以树形结构展示当前界面的组件层级支持一键展开/收起 hilog 日志顶部工具栏按 Debug/Info/Warn/Error/Fatal 五级过滤支持按包名、进程 ID 过滤 应用管理应用 Tab查看已安装应用列表与详情一键启动应用start ability 进程监控进程 Tab实时显示 CPU、内存、交换区利用率及全部进程表面板入口源码在 packages/vscode/src/frontend/pages/hdc-manager/index.vue与后端的通信协议定义在 packages/vscode/src/frontend/interfaces/hdc-connection-protocol.ts。二、快速上手3 步连上设备 ⚡第 1 步准备 hdc 工具链HDC Manager 依赖 OpenHarmony SDK 中的hdc可执行文件。插件会按以下顺序自动查找ets.sdkPath设置指向的 SDK 下的toolchains/hdcWindows 为hdc.exe系统PATH中的hdc命令如果尚未安装 SDK可以从官方开发者网站下载 SDK 或 Command Line Tools内含 hdc、codelinter、hvigor 等完整工具链安装后在 VSCode 设置中配置好 SDK 路径ets.sdkPath面板即可自动定位 hdc。你也可以执行命令ETS: 复制 HDC 路径验证插件是否找到了正确的 hdc。第 2 步打开 HDC Manager 面板点击 VSCode 左侧活动栏的 HDC Manager 图标或打开命令面板Ctrl/Cmd Shift P搜索ETS: 打开设备管理器。第 3 步连接设备USB 连接插上手机/启动模拟器后面板会自动轮询检测设备设备出现在左上角下拉框中无线连接点击「连接设备」按钮选择「通过 IP 连接」输入设备 IP插件会自动执行hdc tconn完成配对连接逻辑见 packages/vscode/src/frontend/commands/connect-device-command.ts未连接设备时面板会显示「未连接设备」提示并给出连接入口多设备场景可在顶部下拉框随时切换。三、hilog 日志五级过滤 包名定位 概览页顶部的 Hilog 工具栏是排查问题的利器实现见 packages/vscode/src/frontend/components/hilog.vue 与 packages/vscode/src/hilog.ts选择日志级别可多选 Debug / Info / Warn / Error / Fatal面板会重启 hilog 进程并应用-L级别过滤过滤包名输入如com.example.myapp只看自家应用的日志过滤进程 ID配合「进程」Tab 查到的 PID 精准定位打开日志窗口点击「打开」日志实时输出到 VSCode 的 Hilog 输出通道小技巧日志级别选空时 hilog 不会启动想安静排查就先选上 Error 级别减少刷屏。四、布局 TabUI 布局树 设备截图 「布局」标签是 UI 调试的核心组件源码packages/vscode/src/frontend/components/layouts.vue点击面板会自动抓取设备当前屏幕并生成UI 布局树每个节点展示组件的属性信息支持全部展开 / 全部收起快速浏览整个界面层级同时唤起快照预览窗口Snapshot Previewer见 packages/vscode/src/views/snapshot-previewer.ts直接查看设备截图修改代码后点「刷新」即可重新捕获所见即所得做 UI 适配时先截图确认效果再对照布局树找组件比截图 手敲命令快得多。五、应用与进程一键启动 实时监控 应用 Tabpackages/vscode/src/frontend/components/application.vue网格 / 列表两种视图展示设备上所有应用包名、版本、安装时间、主 Ability、API 目标版本等点击应用查看图标、描述、开发者等详细信息选中后一键启动应用底层执行 start ability免编译安装即可快速拉起测试进程 Tabpackages/vscode/src/frontend/components/processes.vue顶部统计卡实时显示CPU / 内存 / 交换区利用率与总任务数下方进程表包含 PID、用户、优先级、CPU 占用、内存占用、命令等字段相当于设备上的top卡片数据随面板的 Loop 循环自动刷新排查内存泄漏、卡顿一目了然六、刷新循环Loop 控件怎么用 面板右下角有一个带倒计时的圆形进度环源码packages/vscode/src/frontend/components/hdc-loop.vue点击进度环立即刷新一次点击暂停/开始按钮控制自动刷新悬停调整刷新间隔最小 100ms进程越多建议调大以减小设备压力七、常见问题速查 ❓Q1面板一直显示「未连接设备」确认设备已开启 USB 调试或模拟器已启动并检查hdc list targets是否有输出无线连接需设备与电脑在同一网络。Q2提示找不到 HDC 路径在设置中正确配置ets.sdkPath指向 DevEco Studio 安装目录下的sdk/default/openharmony或安装 Command Line Tools 并将toolchains加入系统 PATH。Q3hilog 没有任何输出检查是否选择了日志级别、包名/进程 ID 过滤条件是否过于严格点击「打开」确认输出通道已展开。八、写在最后 arkTS 插件的 HDC Manager 面板把设备截图、UI 布局树、hilog 日志、应用/进程监控整合进了 VSCode让 HarmonyOS 调试从「终端敲命令」变成「面板点点点」。更多插件能力语法补全、跳转、codelinter 检测等可参考 packages/vscode/README.md动手试试吧【免费下载链接】arkTSVSCode鸿蒙ArkTS插件✨✍️支持各种补全/跳转⛺️支持codelinter检测代码错误VSCode HarmonyOS ArkTS plugin for personal use ✨ ✍️supports source code navigation and completion ⛺️supports codelinter to detect errors项目地址: https://gitcode.com/ohosvscode/arkTS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考