辛宝Otto

辛宝Otto 的玄酒清谈

北漂前端程序员儿 / 探索新事物 / Web Worker 主播之一/内向话痨
xiaoyuzhou
email

前瞻-如何在模擬器上調試 UTS 代碼

前瞻 - 如何在模擬器上調試 UTS 代碼

最近研究跨端了,記錄一些使用方案,先記錄,後續進一步整理

前端和客戶端共同協作完成功能的開發,為了真機測試,還是需要在模擬器和真機上進行測試。

比如我們去實現 Event,事件在不同設備上實際返回值可能不同,真機實際跑一跑才能確認對不對。

下面需要完成幾件事:

  • x-ios 項目切換到 dev
  • uni-app 切換到 dev
  • 保證兩個文件夾在同級目錄
  • 在 xcode 上編譯運行 x-ios 最終能跑起來一個項目
  • 找到這個模擬器裡應用的資源文件,見下方

找到這個模擬器裡應用的資源文件#

找到當前模擬器的設備 id#

選擇 xcode - window - 設備和模擬器 - 你的設備

Pasted image 20240126171917

找到 Identifier

image.png

比如我的模擬器的 id 是
79FEB78D-E6F7-44E3-9741-44F6DAD53BC0

進入模擬器資源管理器#

拼一下地址

使用 finder 打開 cmd+shift +g 輸入下面的地址,後面一串是你的 ID

open ~/Library/Developer/CoreSimulator/Devices/複製你的設備 ID

# open ~/Library/Developer/CoreSimulator/Devices/79FEB78D-E6F7-44E3-9741-44F6DAD53BC0

一般長這樣

image.png

使用 cmd+shift+g 或者命令進入隱藏目錄:

# 相對目錄
cd data/Containers/Data/Application

# 絕對目錄,僅供參考
cd /Users/otto/Library/Developer/CoreSimulator/Devices/79FEB78D-E6F7-44E3-9741-44F6DAD53BC0/data/Containers/Data/Application

這是所有安裝的 app,只有其中一個是 app,可以按照修改時間最新排序,也可以直接搜索 uni-app-x 文件夾,一般是最後一個,或者倒數第二個。

Pasted image 20240126172311

找到 uni-app-x/apps,僅供參考,實際會變。建議存 finder 書籤,後面一鍵直達。

Pasted image 20240126172452

cd /Users/otto/Library/Developer/CoreSimulator/Devices/79FEB78D-E6F7-44E3-9741-44F6DAD53BC0/data/Containers/Data/Application/2222EA54-73C7-4F89-ABCA-E1D35D80CFD7/Documents/uni-app-x

一般如下圖內容:

image.png

補充:這個 -dev.js 也需要拿過來

這裡的 www 目錄就是實際需要運行的資源,可以把 hx 的資源進行替換。

下面介紹如何替換。

hx 的編譯產物

Pasted image 20240126172711

快速代碼#

後續調試代碼時候,需要頻繁把 ide 的 build dist 文件夾移動到模擬器 app 的包裡,這裡提供幾個快捷命令,使用軟連接可以實現目錄、文件的映射。

這是把 buiderx 的編譯產物放到手機上,進行調試,日常可以使用模擬器來做。

Pasted image 20240126173433

注意模擬器這裡多一個 native-app-service.js 後續看看什麼東西

關聯

  • [uni-app-x-framework-dev.js 是什麼?]
  • app-service 是什麼

下面是替換文件的邏輯

#!/bin/bash

source_dir="/Users/otto/mycode/dcloud/basic-hx-vue2/basic-uts-0117/unpackage/dist/dev/app"

target_dir="/Users/otto/Library/Developer/CoreSimulator/Devices/79FEB78D-E6F7-44E3-9741-44F6DAD53BC0/data/Containers/Data/Application/2222EA54-73C7-4F89-ABCA-E1D35D80CFD7/Documents/uni-app-x"

www_dir="$target_dir/apps/HBuilder/www"


# app-config.js

ln -sf "$source_dir/app-config.js" "$www_dir"
ln -sf "$source_dir/app-service.js" "$www_dir"
ln -sf "$source_dir/manifest.json" "$www_dir"
# 這裡需要先刪除原來的 static 再執行
ln -sf "$source_dir/static" "$www_dir"

ln -sf /Users/otto/mycode/dcloud/about-ios/uvue-jsframework/packages/uni-framework/dist/uni-app-x-framework-dev.js "$target_dir"

# 下面的 jsframework

如何測試最新的 framework#

uvue-jsframework 進行 build:framework 得到 dist/uni-app-x-framework-dev.js

把這個文件複製到上圖 uni-app-x 目錄下,和 apps 同級。

殺死模擬器上的應用,重啟就是最新版本。

後續就是如何打斷點,觀察實際運行情況。打開 safari 瀏覽器的開發者,這裡待整理。

選擇 開發-模擬器- jscontext

image.png

打開之後選擇來源,看截圖,打上斷點,比如 touch 事件就可以觸發了。

image.png

如何測試自己的頁面和 demo#

前置需要蘋果開發者證書、hbuiderx dev 版本和更新的 hosts 文件。

在 hbuiderx Dev 中,新建默認空白項目,選擇 uts,運行會多一個運行到 ios,如果提前準備好了證書,這時候鏈接 ios 設備就可以啟動。

image.png

以上是編譯自定義頁面,得到產物。下面介紹如何把自定義的產物替換到正在測試的模擬器中。

找到 unpackage/dist/dev/app 這裡是產物

打開剛才模擬器應用中的 uni-app-x/apps/www 做一個替換

比如我的是

cd /Users/otto/Library/Developer/CoreSimulator/Devices/B2B64986-2B82-4194-8CFE-1A8D0CD8A4C3/data/Containers/Data/Application/29CA23C3-A092-4959-9837-9DADE92874EB/Documents/uni-app-x/apps/HBuilder/www

重啟應用。這樣就實現了替換內容。

後續實現了功能或者需要測試,通過 hx 進行編譯。把產物放到剛才模擬器的 www 目錄,相當於把 hx 作為編譯流程,進行測試產物。

如何替換手機裡的應用資源#

安裝到手機真機裡的資源,需要使用手機助手,比如愛思助手實現文件夾訪問和資源替換。

image.png

經過這樣的操作,可以實現資源文件替換。

如何啟動一個安卓模擬器#

首先啟動 android studio ,打開 Tools - Device Manager 找到一個準備好的模擬器,點擊右側編輯,找到這個模擬器的名字

image.png

打開是這樣的,複製 AVD Name

image.png

emulator 註冊到全局變量,放到 android 下面比較好

# android
export ANDROID_HOME="/Users/otto/Library/Android/sdk"
## android studio simlator
export PATH="/Users/otto/Library/Android/sdk/emulator:$PATH"


後續發現有命令列出清單,後續使用這種方式比較簡單

# 返回值就是 avd name
emulator -list-avds
# 後續直接使用下面快速啟動
emulator -avd Pixel_3a_API_34_extension_level_7_arm64-v8a

附錄相關命令行

選項描述
-list-avds列出可用的 AVD。
-sysdir <dir>在指定目錄中搜索系統磁碟映像。
-system <file>從指定文件中讀取初始系統映像。
-vendor <file>從指定文件中讀取初始供應商映像。
-writable-system使系統和供應商映像在 “adb remount” 之後可寫。
-delay-adb延遲 ADB 通信,直到引導完成。
-datadir <dir>將用戶數據寫入指定目錄。
-kernel <file>使用特定的模擬內核。
-ramdisk <file>使用指定的 ramdisk 映像(默認值為 system/ramdisk.img)。
-image <file>已過時;改用  -system <file>
-initdata <file>與  -init-data <file>  相同。
-data <file>使用指定的數據映像(默認值為 datadir/userdata-qemu.img)。
-encryption-key <file>從指定文件中讀取初始加密密鑰映像。
-logcat-output <file>將 logcat 輸出到指定文件(默認值為無)。
-partition-size <size>設置 system/data 分區大小,單位為 MB。
-cache <file>使用指定的快取分區映像(默認值為臨時文件)。
-cache-size <size>設置快取分區大小,單位為 MB。
-no-cache禁用快取分區。
-nocache與  -no-cache  相同。
-sdcard <file>使用指定的 SD 卡映像(默認值為 datadir/sdcard.img)。
-quit-after-boot <timeout>在客機完全啟動後或在指定的超時(單位為秒)後退出仿真器。
-qemu-top-dir <dir>使用指定的目錄中的仿真器(相對或絕對路徑)。
-monitor-adb <verbose_level>監控客機和主機之間的 ADB 消息,默認不啟用。
-snapstorage <file>在指定文件中存儲所有狀態快照(默認值為 datadir/snapshots.img)。
-no-snapstorage禁用所有快照功能。
-snapshot <name>使用存儲文件中的指定快照進行自動啟動和自動保存(默認值為 “default-boot”)。
-no-snapshot進行完整引導,不進行自動保存,但 qemu vmload 和 vmsave 在 snapstorage 上操作。
-no-snapshot-save在退出時不自動保存到快照:放棄已更改的狀態。
-no-snapshot-load不自動從快照啟動:進行完整引導。
-snapshot-list顯示可用快照的列表。
-no-snapshot-update-time在恢復時不嘗試修正快照時間。
-wipe-data重置用戶數據映像(將其從 initdata 複製)。
-avd <name>使用特定的 Android 虛擬設備。
-avd-arch <target>使用特定的目標架構。
-skindir <dir>在指定目錄中搜索皮膚(默認值為 system/skins)。
-skin <name>選擇給定的皮膚。
-no-skin已過時:改為創建沒有皮膚的 AVD。
-noskin與  -no-skin  相同。

如何啟動一個 ios 模擬器#

安裝好 xcode 之後直接 simulator 就可以啟動。

image.png

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。