当前位置：首页 > article >正文

鸿蒙应用开发搬砖经验之—使用DevTools工具调试前端页面

article 2025/1/7 3:26:17

环境说明：

系统环境：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

查看全文

http://www.kler.cn/a/466643.html