모바일 브라우저 원격 디버깅 도구

모바일 브라우저를 가지고 있는 요즘 브라우저들은 대부분 원격 디버깅 도구를 제공하고 있다. 원격 디버깅 도구를 사용하면 모바일 브라우저 환경을 데스크탑 브라우저에서 편하게 확인할 수 있다.

오페라 브라우저

Opera Remote Debugger
  1. Tools > Advanced > Opera Dragonfly를 선택한 후 포트번호를 입력한다.
  2. 오페라 모바일 브라우저에서 opera:debug에 연결하여 오페라 브라우저가 작동하는 컴퓨터의 IP 주소와 포트번호를 입력한다.
  3. 데스크탑 브라우저에서 모바일 브라우저의 오류 내용을 확인할 수 있게 된다.

파이어폭스 브라우저

Firefox Remote Debugger
  1. about:config에 접속 한 후 devtools.debugger.remote-enabled 속성을 true로 변경한다.
  2. 파이어폭스 안드로이드에서 about:config에 접속 한 후 devtools.debugger.force-local을 false로, devtools.debugger.remote-enabled를 true로 변경한다.
  3. 단말기의 IP를 확인 한 후 파이어폭스 브라우저에서 원격 디버거를 선택한 후 단말기의 IP 주소를 입력한다.
  4. 데스크탑 브라우저에서 모바일 브라우저의 오류 내용을 확인할 수 있게 된다.

참고 동영상: Firefox Android Remote Debugging Demo

사파리 브라우저

Safari Remote Debugger
  1. Preferences > Advanced > Show Develop menu in the menu bar를 활성화 한다.
  2. iOS 사파리에서 Settings > Safari > Advanced > Web Inspector를 활성화 한다.
  3. 단말기를 맥에 연결하면 사파리의 Develop 메뉴에 연결된 단말기의 화면이 나오고 콘솔에서 오류 내용을 확인할 수 있다.