2013년 12월 3일 화요일

[튜토리얼/한글화] 모바일을 위한 크롬 개발자도구: 스크린캐스트와 에뮬레이션(Chrome DevTools for Mobile: Screencast and Emulation)

+Paul Irish의 HTML5Rocks의 '모바일을 위한 크롬 개발자도구: 스크린캐스트와 에뮬레이션(Chrome DevTools for Mobile: Screencast and Emulation)' 튜토리얼이 업데이트되었습니다.

지난번 크롬 개발자 데이 이후부터 중간중간 크롬 개발자도구에서 직접적인 원격 디버깅과 화면 공유에 대해 이야기한 적이 있었는데 이번에는 그 모바일 디바이스에 대한 리모트 디버깅 시 유용하게 사용할 수 있는 '스크린캐스트(ScreenCast)'와 디바이스가 없거나 번거로울 때 사용할 수 있는 '에뮬레이션(Emulation)'에 대해 설명합니다. 모바일 개발자인데 모르고 계셨다면 꼭 읽으시길 추천해드립니다. :)



TL;DR;


모바일을 위해 개발하는 것은 데스크탑을 위해서 개발하는 것과 거의 비슷합니다. 이 글은 크롬 개발자도구에서 모바일 웹 개발 과정에서 디버깅을 크게 개선할 수 있는 새로운 기능인 리모트 디버깅(Remote Debugging)과 모바일 에뮬레이션(Emulation)에 대해 설명합니다.

  • 리모트 디버깅 - 디바이스에 대한 원격 디버깅
    1. 별다른 설정없이 간단한 과정으로 디바이스의 안드로이드 크롬에 직접 연결하여 디버깅을 지원합니다.
    2. 스크린캐스트(ScreenCast)를 이용하여 실제 디바이스 화면을 보지 않고 크롬 개발자도구에서 화면을 보고 인터랙션할 수 있습니다.
    3. (즉, 디바이스에서 직접 접근할 IP나 도메인이 없거나 불명확하게) 로컬호스트 등에서 실행되는 경우에도 포트 포워딩(Local Port Forwarding)로 이를 지원합니다.
  • 에뮬레이션 - 디바이스가 없을 경우의 에뮬레이션 및 디버깅
    1. 디바이스가 없을 경우에 화면 크기, devicePixelRatio, 메타 뷰포트 및 풀터치 이벤트에 대한 시뮬레이션을 지원합니다.
참고하시기 바랍니다.

참고 글