环境说明：
系统环境：Mac mini M2 14.5 (23F79)
开发IDE：DevEco Studio 5.0.1 Release
配置步骤：
按着官方的指引来慢慢一步一步来，但前提是要配置好SDK的路径（没有配置的话，可能先看下面的配置说明）
》》》 使用DevTools工具调试前端页面
SDK配置：
第一步：找到sdk的安装目录
PS：我是从旧版本看升级到新的DevEco，打开的时候Location是没有值的，即对应的目录下没有安装sdk，不断点击下一步安装即可
第二步：配置环境变量
在.zshrc文件添加下面的代码（具体目录根据自己的环境做调整）
# 鸿蒙sdk
HMOS_HOME="/Users/ericluo/Library/OpenHarmony/Sdk"
export HMOS_HOME
export PATH="${PATH}:${HMOS_HOME}/13/toolchains"
配好后，记得在当前shell，source一下
然后接下来按官网指引操作即可， 一路正常下来，再打开 chrome://inspect/#devices
看到对应的H5页面，点击inspect就可以调试页面了
重要
当一步一步走通后，后面就有官网的脚本来一键运行调试了（预计后续sdk升级，该脚本会整合到sdk的工具当中）
Linux或Mac平台
#!/bin/bash
# Get current fport rule list
CURRENT_FPORT_LIST=$(hdc fport ls)
# Delete the existing fport rule one by one
while IFS= read -r line; do
# Extract the taskline
IFS=' ' read -ra parts <<< "$line"
taskline="${parts[1]} ${parts[2]}"
# Delete the corresponding fport rule
echo "Removing forward rule for $taskline"
hdc fport rm $taskline
result=$?
if [ $result -eq 0 ]; then
echo "Remove forward rule success, taskline:$taskline"
else
echo "Failed to remove forward rule, taskline:$taskline"
fi
done <<< "$CURRENT_FPORT_LIST"
# Initial port number
INITIAL_PORT=9222
# Get the current port number, use initial port number if not set previously
CURRENT_PORT=${PORT:-$INITIAL_PORT}
# Get the list of all PIDs that match the condition
PID_LIST=$(hdc shell cat /proc/net/unix | grep webview_devtools_remote_ | awk -F '_' '{print $NF}')
if [ -z "$PID_LIST" ]; then
echo "Failed to retrieve PID from the device"
exit 1
fi
# Increment the port number
PORT=$CURRENT_PORT
# Forward ports for each application one by one
for PID in $PID_LIST; do
# Increment the port number
PORT=$((PORT + 1))
# Execute the hdc fport command
hdc fport tcp:$PORT localabstract:webview_devtools_remote_$PID
# Check if the command executed successfully
if [ $? -ne 0 ]; then
echo "Failed to execute hdc fport command"
exit 1
fi
done
# List all forwarded ports
hdc fport ls
