辛宝Otto

辛宝Otto 的玄酒清谈

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

前瞻 - シミュレーターでUTSコードをデバッグする方法

前瞻 - 如何在模拟器上调试 UTS 代码

最近研究跨端了,记录一些使用方案,先记录,后续进一步整理

前端和客户端共同协作完成功能的开发,为了真机测试,还是需要在模拟器和真机上进行测试。

比如我们去实现 Event,事件在不同设备上实际返回值可能不同,真机实际跑一跑才能确认对不对。

下面需要完成几件事:

  • x-ios プロジェクトを dev に切り替える
  • uni-app を dev に切り替える
  • 2 つのフォルダーが同じ階層にあることを確認する
  • 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

これはすべてインストールされたアプリで、1 つだけがアプリです。最終更新日時でソートすることもできますし、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 フォルダーをシミュレーターアプリのパッケージに頻繁に移動する必要があります。ここではいくつかのショートカットコマンドを提供します。シンボリックリンクを使用することで、ディレクトリやファイルのマッピングを実現できます。

これは 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

最新のフレームワークをテストする方法#

uvue-jsframeworkbuild:framework を実行して dist/uni-app-x-framework-dev.js を得ます。

このファイルを上記の uni-app-x ディレクトリにコピーし、apps と同じ階層にします。

シミュレーター上のアプリを終了し、再起動すると最新バージョンになります。

今後はブレークポイントを設定し、実際の実行状況を観察する方法です。Safari ブラウザの開発者ツールを開き、ここで整理します。

選択 開発-シミュレーター- jscontext

image.png

開いたらソースを選択し、スクリーンショットを見て、ブレークポイントを設定します。例えば、タッチイベントをトリガーできます。

image.png

自分のページとデモをテストする方法#

前提として、Apple 開発者証明書、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 シミュレーターを起動する方法#

まず Android Studio を起動し、Tools - Device Manager を開いて、準備されたシミュレーターを見つけ、右側の編集をクリックしてこのシミュレーターの名前を見つけます。

image.png

開くとこのようになります。AVD 名をコピーします。

image.png

emulator をグローバル変数に登録し、Android の下に置くと良いでしょう。

# android
export ANDROID_HOME="/Users/otto/Library/Android/sdk"
## android studio シミュレーター
export PATH="/Users/otto/Library/Android/sdk/emulator:$PATH"

今後、コマンドを使用してリストを表示することができ、今後はこの方法が比較的簡単です。

# 戻り値は avd 名です
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

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。