1、HDC安装(zsh)

### HarmonyOS hdc for Studio

HDC_SERVER_PORT=7035
launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT
export HDC_SERVER_PORT
HDC_SDK_PATH=/Applications/DevEco-Studio.app/Contents/sdk/HarmonyOS-NEXT-DB5/openharmony/toolchains #有安装Studio的前提下用这个
export PATH=$PATH:$HDC_SDK_PATH

### HarmonyOS hdc for Command Line Tools

HDC_SERVER_PORT=7035 
launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT 
export HDC_SERVER_PORT
export PATH=~/Desktop/command-line-tools/bin:$PATH 

在/Users/用户名 下边 command+shift+. 显示隐藏文件，
.zshrc,贴进去，把HDC_SDK_PATH后边的路径更改成自己DevEco-Studio的路径
保存完事(拒绝vim)
最后，source ～/.zsh,重启DevEco，hdc -v验证

参考链接

2、设备连接调试

官方文档入口

web调试教程
hdc说明文档

// xxx.ets 官方例子
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

正常流程(官方例子)

//查找 devtools 远程调试所需的 domain socket 名称，该名称与进程号有关，重启调试应用后，需要重复此步骤，以完成端口转发
cat /proc/net/unix | grep devtools
// 添加映射 [pid] 替换成实际的进程id
hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]
// 查看映射 
hdc fport ls
示例：
hdc shell
cat /proc/net/unix | grep devtools
//显示 webview_devtools_remote_3458
exit
hdc fport tcp:9222 localabstract:webview_devtools_remote_3458
hdc fport ls

实际情况(蛋疼问题汇总)

1.查询设备id(在编译器的终端中)
xxx@xxx entry % hdc list targets
127.0.0.1:5555
123xxxxxxxxxxx

2.查询pid(很奇怪，需要hdc -t 指定设备，然后再shell才行，不然就是)
[Fail]ExecuteCommand need connect-key? please confirm a device by help info

xxx@xxx entry %hdc -t 123xxxxxxxxxxx shell
$ cat /proc/net/unix | grep devtools
0: 00000002 0 10000 1 1 111113 @webview_devtools_remote_66666
$ exit

3.绑定端口和pid(这里要在chrome://inspect/#devices，鸿蒙设备会识别不出来，需要手动添加端口)
hdc -t 123xxxxxxxxxxx fport tcp:9222 localabstract:webview_devtools_remote_66666
成功了会提示
Forwardport result:OK

结果查询：
xxx@xxx entry % hdc fport ls
123xxxxxxxxxxx    tcp:15037 ark:44460@com.example.lwk_web_test    [Forward]
123xxxxxxxxxxx    tcp:15039 ark:44460@Debugger    [Forward]
123xxxxxxxxxxx    tcp:9222 localabstract:webview_devtools_remote_66666    [Forward]

谷歌调试页 chrome://inspect/#devices

image.png

image.png