如何在使用 Android emulator Debug mobile website
・2min
#大方向
- 安裝 emulator
- 建立虛擬機
- 設定虛擬機:類似開發設定,讓 emulator 內部也可以連線到本地機 & 開發機
- 設定 certificate
- 設定 hosts:主要是要連到 localhost
- 透過 chrome 和 emulator 的 chrome 連線 debug
#步驟
#安裝 emultaor
brew install --cask android-studio
ref: android-studio — Homebrew Formulae
#建立虛擬機
- 打開 device manager

- 新增 virtual device

- select hardware 要注意要選沒有 playstore 的 hardware 才能透過 adb 設定 hosts(後續步驟設定)

- 選擇 image 第一次選擇會需要下載,要點擊名稱旁邊的下載 icon

- 設定名稱還有其他參數

#開啟虛擬機
- 不要用 android-studio,而使用 cli 直接開 emulator
- 找到安裝位置的 exe 檔並開啟:如果用 brew 下載的話,path 應該會是
~/Library/Android/sdk/emulator/emulator
參考文件文件:Start the emulator from the command line | Android Studio | Android Developers
指令
emultaor -list-avds //列出所有 emultaor
emulator -avd {{device name}} // 開啟目標的虛擬機
#設定憑證
如果有使用憑證進行客戶端 ssl 驗證的,需要進行此步驟,沒有的可以跳過
- 直接把 cert 檔案拖曳進 emulator
- 到 android 的 file explorer 裡面可以看到剛剛拉進去的 cert 檔案
- 有密碼的話輸入密碼
- 點擊 vpn … 第一個選項



#設定 host
目標:設定 emulator OS 裡面的 HOST 檔案,讓 domain 可以指向到 localhost
參考文件:How to edit /etc/hosts file in Android Studio emulator running in nougat? - Stack Overflow
Steps
- 打開虛擬機,
emulator -avd Pixel_6_Pro_-_for_web -writable-system
- 要注意設定的虛擬機不能有 applestore 功能
- 要注意必須要
-writable-system
的參數,後續才能進行 root
- 下載 adb android - Installing ADB on macOS - Stack Overflow
brew install android-platform-tools
然後執行
./adb root
./adb remount
./adb shell // 用 cli 控制 emulator
如果遇到以下 error
adb: unable to connect for root: device offline
可以重跑 adb
adb kill-server
adb start-server
- 編輯 OS 的 host 設定,步驟可以上網自己找
- 但是在 emulator 裡面,localhost 的 ip 是
10.0.2.2
127.0.0.1 localhost
::1 ip6-localhost
10.0.2.2 local.dev.com
~
-
透過 chrome 和 emulator 裡面的 chrome 連線 debug,參考文件: css - Using Google Chrome Dev tools on Android (emulator) - Stack Overflow
-
url:
chrome://inspect/#devices
-
看到目標裝置之後點擊 inspect
# Comments