Web로 Android 단말이나 iOS 단말의 실기 테스트를 실시하고 싶은 경우에, USB 접속을 실시하는 것으로 PC로 인스펙터를 표시할 수 있도록 하기 위한 설정을 정리합니다.

환경

PC: MBP2015(15inch)
Android: Huawei P10 Lite
iOS: iPhone7

Android -> Chrome(PC)

이 방법은 PC가 Windows인 경우에도 할 수 있습니다.

설명은 하지 않지만 Windows에서 사용하기 전에 Windows에 USB 드라이버를 추가해야 합니다.
이 OEM USB 드라이버 설치를 참고로 설치한 후에는 아래와 같은 조작이 됩니다.

Android 설정

本体設定 > 端末情報에서 ビルド番号를 7 번 탭합니다.

그러면 本体設定 > 開発者向けオプション가 표시됩니다.

開発者向けオプション를 보면 다양한 설정이 있으며 맨 위에있는 開発者向けオプション 버튼을 켜서 이러한 설정을 사용할 수 있습니다. 이번에는 다음 항목을 변경하십시오

ネットワーク > USB設定を選択 파일(MTP)

デバッグ　> USBデバッグ 켜기

이것으로 Android 측 설정이 완료되었습니다.

Chrome(PC) 설정

Chrome에서 DevTools를 열고 다음과 같이 Remote devices를 엽니 다.

Discover USB devices를 켜면 왼쪽 열에 연결된 터미널이 나타납니다.

터미널 이름을 클릭하면 열려있는 탭 목록을 얻을 수 있으므로 디버깅하려는 사이트에서 Inspect를 클릭합니다.

이런 식으로 Android에서 열린 탭에서 DevTools를 열 수 있습니다.

일반 DevTools와 마찬가지로 Elements를 조작하거나 Console에 출력할 수 있습니다. 또한 왼쪽의 UI에서 실제 기기와 마찬가지로 탭 조작을 할 수 있습니다.

iOS -> Safari(PC)

이쪽도 마찬가지로 iOS, Safari(PC)에서 각각 설정해 갑니다.

iOS 설정

설정 앱을 열고 設定 > Safari > 詳細 열기

웹 관리자 켜기

Safari 설정

메뉴 막대에서 開発 > デバイス名 > タブ名를 선택합니다.

이 방법으로 열려있는 탭의 관리자를 열 수 있습니다 .

주의사항

Android -> Chrome(PC)일 때 매번 USB에 연결하고 나서 Android 설정 3을 하지 않으면 할 수 없었습니다.

요약

이제 귀찮은 실기 테스트를 효율적으로 PC만으로 할 수 있게 되었습니다 😉
이상이 됩니다. 수정·질문 등 있으면, 잘 부탁드립니다.

참고문헌

Android 기기의 원격 디버깅