# 모바일 브라우저 테스트 환경설정

# 안드로이드

homebrew를 이용하여 안드로이드 스튜디오를 설치합니다

brew install --cask android-studio
# https://formulae.brew.sh/cask/android-studio

커맨드가 완료되면 Application에 안드로이드 스튜디오가 설치되어있습니다.

실행하여 초기설정을 진행합니다.

실행하면 작은 팝업이 뜨는데, 하단의 톱니바퀴 Configure 버튼 => AVD Manager를 클릭합니다.

표에서 가장 오른쪽을 보면, Actions 란에 녹색 Play버튼을 눌러서 시뮬레이터를 실행합니다.

하단의 Create Virtual Device를 클릭하면 버전을 선택하여 설치하고 다양한 크기와 환경의 디바이스를 시뮬레이팅 할 수 있습니다.

에뮬레이터가 켜지면 모바일 브라우저를 실행하고 테스트합니다.

# 자바스크립트 콘솔

브라우저 창에 about:debug 를 입력하면 브라우저 상단에 '자바스크립트 콘솔 열기' 라고 뜬다.

설정 > 더보기 > 제일 하단에 자바스크립트 콘솔 관련 설정도 할 수 있다.

# Android 호스트 설정 (hosts 설정)

호스트 설정을 하려면 AVD Manager에서 순서대로

Create Virtual Device > 디바이스 스킨 대충 선택 > x86 Images 탭 > ABI가 x86_64 선택 > deviceName 쉽고 알아볼수있게 짓기(커맨드에서 사용하므로, 예를 들면 => aos11)

# /Users/{username}/Library/Android/sdk/emulator
> ./emulator -list-avds
> ./emulator -avd {deviceName(aos11)} -writable-system
# /Users/{username}/Library/Android/sdk/platform-tools
> adb root
> adb shell avbctl disable-verification
Successfully disabled verification. Reboot the device for changes to take effect.
> adb disable-verity
using overlayfs
Successfully disabled verity
Now reboot your device for settings to take effect
> adb reboot
> adb root && adb remount
remount succeeded
> adb -s {emulatorName} pull /system/etc/hosts ~/Desktop
> adb -s {emulatorName} push ~/Desktop/hosts /system/etc/hosts

> adb shell
# cat /etc/hosts

# IOS

앱스토어에서 xcode를 검색하고 설치합니다.

설치 후 실행하면 상단 툴바에 Xcode => Open Developer Tool => Simulator를 순서대로 클릭하여 시뮬레이터를 실행합니다.

Preferences => Components에서 버전을 선택하여 설치하여 사용할수도 있습니다.

목록에 있는것들보다 더 하위 버전을 선택하고 싶다면, xcode의 버전을 낮춰야합니다.

하위 버전 xcode는 아래 링크에서 다운로드 가능합니다.

https://developer.apple.com/download/all/?q=xcode

mac os 버전별로 사용가능한 ios simulator는 아래 링크에서 확인가능합니다.

https://en.wikipedia.org/wiki/Xcode#Version_comparison_table

# IOS 호스트 설정 (hosts 설정)

IOS 시뮬레이터는 맥북의 호스트를 보고있기 때문에 별도 설정이 필요없습니다.

# 자바스크립트 콘솔 보기

Safari Technology Preview를 설치하세요!

시뮬레이터에서 사파리를 열어서 웹사이트를 열고

Safari Technology Preview의 Develop 탭 => 해당 시뮬레이터 => 해당 웹사이트 누르면

Web Inspector가 뙇!하고 뜹니다.


잘 정리해놓은 이런 글도 있습니다

https://karl-park.github.io/devstory/2018/10/25/Android-iOS-WebView-Debugging/