[Mobile] 모바일 웹 디버깅 하기 (feat. android / windows)

무선 디버깅 기준 모바일 웹 디버깅 하기

 

1. Android 디버그 브리지(adb) 설치 (윈도우)

https://developer.android.com/tools/releases/platform-tools?hl=ko

다운로드 > 압출풀기 > 환경변수(경로) 등록

 

2. 핸드폰 개발자 옵션 활성화 (핸드폰)

핸드폰 마다 조금씩 경로나 이름이 다를 수 있습니다.

설정 > 시스템 > 휴대전화 정보 > 빌드번호 (여러번 클릭) > 개발자 옵션 활성화

 

3. 디버깅 모드 활성화 (핸드폰)

핸드폰 마다 조금씩 경로나 이름이 다를 수 있습니다.

설정 > 개발자 옵션 > 디버깅 모드 활성화 > 무선 디버깅 활성화

 

4. adb pair (모바일/윈도우)

(핸드폰) 무선 디버깅 클릭 > 페어링 클릭

(윈도우) cmd > adb pair [페어링에서 보이는ip]:[페어링에서 보이는 port] > 페어링에서 보이는 인증번호

5. adb connect (모바일/윈도우)

(핸드폰) 무선 디버깅 클릭

(윈도우) cmd > adb connect [화면에서 보이는ip]:[화면에서 보이는 port]

adb connect 192.168.0.224:33557
connected to 192.168.0.224:33557

adb devices
List of devices attached
192.168.0.224:33557     device

 

cannot connect to 192.168.0.224:41991: 대상 컴퓨터에서 연결을 거부했으므로 연결하지 못했습니다. (10061)

결론은 연결을 다시 시작해보면 되는것 같다..

 

(핸드폰 ) usb 디버깅 활성화 > usb 연결

adb disconnect 192.168.0.224:5555

adb kill-server

adb start-server
* daemon not running; starting now at tcp:5037
* daemon started successfully

adb tcpip 5555       # adbd 를 TCP/IP 모드(기본 디버깅 포트 5555)로 재시작
adb.exe: tcpip requires an argument

adb tcpip 33557 # 내꺼에서 나왔던 디버깅 포트
error: no devices/emulators found

 

6. 디버깅

chrome://inspect/#devices 접속

잘 연결이 되었을 경우 새로고침하면 저기 Remote Target 쪽에 내꺼가 뜬다.

화면이 꺼져있거나, 크롬이 안켜져 있는 경우 활성화가 안되어있을 수 있다.

inspect를 클릭해주면 디버깅할 수 있는 창이 뜨고 핸드폰에서 크롬 키면 내 화면의 크롬이 보인다.