웹개발시 모바일 기기를 디버깅하는 두가지 방법.

1. 모바일에 개발자 콘솔을 설치하기.

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

https://github.com/liriliri/eruda
를 설치하면 위의 그림고 같이 오른쪽 하단에 톱니바퀴 모양의 버튼이 생긴다

해당 버튼을 클릭하면 위의 스샷에서와 같이 일반적으로 브라우저에서 지원하는 개발자 콘솔을 확인할 수 있다

2. PC 크롬과 연결하기

PC와 모바일에 모두 크롬이 설치 되어 있어야 한다.
모바일 기기와 PC를 USB로 연결한다.

PC크롬에서 chrome://inspect/#devices에 접속한다.

위의 스크린샷처럼 아래에 연결된 모바일 기기와 모바일 크롬에서 접속 중인 사이트가 보인다

inspect를 클릭하면 해당 모바일 기기와 연결된 크롬 창이
PC에 뜨게 된다.

이곳에서도 디버깅을 할 수 있다

2번의 경우 직접 테스트 하는 모바일기기가 바로 옆에 있을 때 손쉽게 개발할 수 있는 방법이고,

1번의 경우 불특정 다수 불특정 기기에서 발생하는 오류를 체크 할 때 유용하다.