크롬 인스펙터 사용 (:모바일 앱 콘솔 확인하기)

모바일 웹에서는 정상적으로 나오는데 모바일 앱에서는 제대로 안나오는 경우가 있다.
모바일 웹이야 개발자도구를 켜서 모바일 모드로 전환하면 디버깅할 수 있는데
모바일 앱은 네이티브로 개발된 내용이 있으면 모바일 웹으로는 확인이 불가능함...

이런 경우 크롬 인스펙터를 이용할 수 있다.

1. 크롬 인스펙터를 킨다.

chrome://inspect/#devices

2. 모바일 기기를 컴퓨터에 연결(충전용 잭 x/데이터전송가능한 잭 o)

그럼 Remote Target이 뜨는데, 여기에 연결된 기기가 떠야한다. 근데 인스펙터가 인식할 수 있는 앱을 실행하지 않으면 remote target에 안 뜰 수 있다.

3. 모바일 기기에서 디버깅 확인 할 앱 실행(테스트 목적으로 일단 chrome 앱 실행)

그래서 일단 아무거나 앱을 켜본다. 나는 chrome을 켜보았다.

 

그럼 내가 실행하고 있는 어플들이 뜨는데, 여기에서 inspect를 클릭한다.

**  Remote browser is newer than client browser. Try `inspect fallback` if inspection fails.
 라고 뜨면 텍스트 내용대로 inspect fallback 클릭

4. inspect 클릭 시 보이는 화면 
 

이 화면에서 마우스 클릭으로도 정상작동 가능하고, 휴대폰으로 직접 터치해도 작동 가능하다.

다만 alert이나 selectbox 등 휴대폰에서만 나오는 스크립트/html 요소가 있으니 주의.

예) console탭에 alert("hi") 입력 시

alert창이 pc의 화면에서는 안보이고 모바일기기 화면에서만 보임.

그래서 컴퓨터랑 모바일 기기 화면을 번갈아가면서 확인 할 필요하다. 어 갑자기 왜멈췄지???? 할 수 있음 ㅋㅅㅋ