环境说明：

系统环境：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 tasklineIFS=' ' read -ra parts <<< "$line"taskline="${parts[1]} ${parts[2]}"# Delete the corresponding fport ruleecho "Removing forward rule for $taskline"hdc fport rm $tasklineresult=$?if [ $result -eq 0 ]; thenecho "Remove forward rule success, taskline:$taskline"elseecho "Failed to remove forward rule, taskline:$taskline"fidone <<< "$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" ]; thenecho "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 numberPORT=$((PORT + 1))# Execute the hdc fport commandhdc fport tcp:$PORT localabstract:webview_devtools_remote_$PID# Check if the command executed successfullyif [ $? -ne 0 ]; thenecho "Failed to execute hdc fport command"exit 1fi
done# List all forwarded ports
hdc fport ls