iPhone의 Safari에서 열린 페이지를 웹 관리자에서 PC에서 디버깅하는 방법

1810 단어 Safari디버깅브라우저 테스트아이폰

개요



WEB 서비스 개발이 진행되기 시작하고, 스마트 폰에서의 실제 기계 확인 기회도 늘어 왔기 때문에
iPhone의 실제 기기에서 표시 확인 테스트를 할 때 PC 브라우저에서 디버깅할 수 있는 방법을 조사했습니다.

몹시 간단했기 때문에, 실기 디버그에 활용해 주시면 다행입니다.

준비하는 것


  • iPhone
  • Mac 터미널
  • iPhone과 PC를 연결하기 위한 케이블(순정이 아니면 잘못될 가능성도 있을지도?)

    절차



    물리적 작업


  • Mac 기기와 iPhone을 케이블로 연결합니다.

    • 단말기 설정


  • 설정 -> Safari -> 세부 정보를 열고 "Web Inspector"를 켜십시오.



    Mac 설정


  • Safari 환경 설정 -> 세부 정보에서 "메뉴 바에 "개발"메뉴 표시"에 체크


  • 개발 메뉴 -> iPhone에서 "JSContexts의 웹 관리자를 자동으로 표시"에 확인



    • 완성



    단지 이것만으로 iPhone에서 열려있는 Safari에서 디버깅 할 준비가되었습니다.

    실제 화면



    iPhone의 Safari에서 Github 페이지를 볼 때의 이미지입니다.

    터미널 캡처





    PC측의 Web Inspector 화면



    Safari에서 Date (JavaScript)를 다룰 때의주의
    iPhone X의 Safari의 렌더링 범위를 조사해 보았다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage