iOS용 Safari에서 Web Inspector를 사용하는 방법

웹 사이트는 데스크톱 시스템에서 항상 액세스할 수 있는 것은 아닙니다. 모바일 장치에도 브라우저가 있으며 데스크탑보다 웹 사이트에 자주 액세스하는 데 사용됩니다. 드문 경우지만 인기 있는 웹사이트에는 모바일 앱이 있지만 대부분의 웹사이트에는 모바일 앱이 없습니다. 그렇기 때문에 웹사이트는 데스크톱과 모바일 브라우저 모두에서 어느 정도 합리적으로 작동해야 합니다. 그렇게 하려면 데스크톱 브라우저와 같은 콘솔이 없기 때문에 문제가 발생하는 모바일 웹 브라우저에서 개발하는 동안 웹 사이트를 디버깅해야 합니다.

Android에서 모바일 Chrome용 콘솔에 액세스해야 합니까? 가이드를 확인하세요 .

Safari의 웹 검사기

iOS의 Safari에서 웹 사이트를 디버깅하는 경우 Safari의 내장 웹 검사기를 사용할 수 있습니다. 유일한 제한 사항은 Mac이 있어야 한다는 것입니다. 모바일 Safari의 웹 콘솔은 Mac의 Safari를 통해 액세스할 수 있습니다. 설정하는 데 시간이 걸립니다.

아이클라우드 계정

Safari에서 웹 검사기를 사용하려면 iOS 기기와 Mac이 동일한 iCloud 계정을 사용하고 Safari를 동기화하도록 설정되어 있어야 합니다.

맥 OS

시스템 환경설정을 엽니다 .
Apple ID로 이동합니다 (사용 중인 ID를 기록해 둡니다).
왼쪽 열에서 iCloud 를 선택 하고 오른쪽 창에서 Safari가 활성화 되어 있는지 확인 합니다.
사파리를 엽니다 .
메뉴 막대에서 Safari를 클릭하고 환경 설정 을 선택하십시오 .
에 Safari의 환경 설정 의 이동 고급 탭 .
'메뉴 표시줄에 개발 메뉴 표시'를 활성화합니다 .

iOS

설정 앱을 엽니다 .
상단에서 계정 을 탭합니다 .
사용되는 Apple ID가 Mac에서 사용되는 것과 동일한 지 확인하십시오 .
iCloud를 탭 합니다.
Safari용 iCloud를 활성화 합니다 .
기본 설정 앱 화면으로 돌아갑니다 .
일반으로 이동하여 맨 아래로 스크롤합니다.
재설정>위치 및 개인 정보 재설정으로 이동합니다 .

웹 검사기 활성화

이제 iOS 기기를 Mac에 연결할 준비가 되었습니다.

사용하여 데이터 케이블을 , 맥, 아이폰 (또는 아이 패드)를 연결 .
iPhone에서 연결된 컴퓨터를 신뢰할 수 있는지 묻는 메시지가 표시됩니다. 신뢰를 누르고 장치에 암호를 입력하십시오 .
iPhone에서 Safari를 열고 디버그하려는 웹사이트를 방문합니다 .
Mac에서 Safari를 열고 개발 로 이동합니다 . iPhone 이 하위 메뉴에 표시되어야 합니다. 를 선택 하고 웹 사이트를 선택 디버깅 할 것이 있습니다. 하위 메뉴에 표시됩니다.
웹 검사기 와 함께 새 창이 열립니다 .

문제 해결

경우에 따라 위의 방법이 작동하지 않을 수 있습니다. 이것은 macOS의 버그입니다. 거의 모든 경우에 작동하는 한 가지는 아래 수정이지만 이전 섹션의 단계를 수행한 후 다음을 수행합니다.

Mac 에서 iPhone 을 분리합니다 .
iPhone 에서 설정 앱을 엽니다 .
일반>초기화>위치 및 개인 정보 초기화로 이동합니다 .
i Phone에서 WiFi를 끄고 블루투스 를 켜고 모바일 핫스팟을 켭니다 .
iPhone을 Mac에 연결합니다 . iPhone에서 메시지가 표시되면 컴퓨터를 신뢰하십시오 .
iPhone 에서 Safari를 열고 디버그하려는 웹사이트 를 방문합니다 .
온 맥, 사파리를 엽니 다 .
이동 개발> 네트워크를 통해 연결 아이폰> .
그런 다음 개발>사용자의 iPhone>iPhone의 Safari에서 열려 있는 웹 사이트를 선택합니다 .

결론

iOS용 Safari에서 웹 사이트 디버깅은 Mac이 있어야만 수행할 수 있습니다. iOS의 Safari 버전이 Mac의 버전과 동일한지 확인해야 합니다. 좋은 경험 법칙은 웹 사이트를 디버그할 때 항상 최신 안정 버전의 iOS 및 macOS를 실행하는 것입니다. 이렇게 하면 두 플랫폼에서 Safari 버전이 동일하게 됩니다.