스마트 폰의 Chrome에서 개발 도구를 사용하여 디버깅

이번은 조금 길어집니다.
스마트 폰 사이트의 개발 등을 실시하고 있을 때에 스마트 폰으로 개발 툴을 사용하고 싶지 않습니까? 있어요.
한마디로 PC에서 스마트 폰의 Chrome을 조작 할 수 있습니다. 연동합니다.
  • USB 케이블로 PC와 스마트 폰 연결
  • 스마트 폰 디버그 모드 ON
  • PC Chrome에서 inspect 실행
  • 스마트 폰 Chrome 화면이 PC에 공유됩니다

  • 자꾸 말하면 이런 느낌입니다.
    그러면 비망도 겸해 자세하게 설명해 갑니다.

    사전 준비(Android)



    개발자 옵션에서 디버그 모드 사용


  • 설정 ⇒ 단말 정보 ⇒ 빌드 번호를 7 번 탭
  • "당신은 이제 개발자가되었습니다."라고 표시되면 OK
  • 설정으로 돌아가면 "개발자 옵션"이라는 메뉴가 추가되었습니다.


  • 그 중의 「디버그」⇒「USB 디버그」를 ON



  • PC측 작업


  • Chrome을 열고 URL 막대에 'chrome://inspect/#devices'를 입력하여 액세스
  • 스마트 폰에 "USB 디버깅을 허용 하시겠습니까?"팝업이 표시되므로 OK
  • ...



    그러면 다른 윈도우에서 스마트폰과 연동한 페이지가 표시되므로 개발 툴에서 원하는 대로 즐길 수 있게 됩니다.
    Console에서 javascript를 실행할 수도 있습니다.





    응용편



    스마트폰에서는 인터넷에 공개된 환경이 아니면 액세스할 수 없기 때문에, PC등의 로컬 개발 환경에 액세스 할 수 없습니다.
    이를 해결하기 위해 Wi-Fi 환경에서 노트북을 액세스 포인트로 설정하고 스마트 폰으로 Wi-Fi에 연결합니다.
    이것에 무슨 의미가 있는지 말하면 Wi-Fi 액세스 포인트로 움직이는 PC의 호스트가 스마트 폰 측에서도 공유됩니다.
    그렇다면 스마트 폰에서 아직 공개되지 않은 개발 환경에 액세스 할 수 있습니다.
    말하고 싶은 건 이미 알겠지요?
    스마트 폰의 실제 기기로 개발 환경을 확인하면서 Chrome의 개발자 도구로 디버깅을 동시에 할 수 있다는 것입니다.

    아주 좋은 시대가 된 것이군요.

    좋은 웹페이지 즐겨찾기