웹 검사기를 사용하여 모바일 사파리 (iPhone 또는 iPad)를 디버깅하는 방법

모바일 장치 용 웹 페이지를 개발하거나 하이브리드 앱을 디버깅하기가 어려운 경우가 많습니다. 그러나 운 좋게 iOS 6을 시작으로 iOS를 디자인하는 사람들에게 Apple은 iOS에서 원격 웹 검사기 기능을 제공합니다.

Web Inspector를 사용하면 웹 및 모바일 앱 개발자가 macOS 및 OS X Safari 개발자 도구를 사용하여 iPad 또는 iPhone의 모바일 Safari에서 웹 컨텐츠 또는 하이브리드 앱을 원격으로 디버깅 할 수 있습니다.

iOS에서 웹 페이지 또는 하이브리드 앱을 디버깅, 최적화 및 수정하는 쉽고 실용적인 방법입니다.

이러한 개발 도구에 액세스하려면 Mac의 Safari의 고급 환경 설정에서 개발 메뉴를 활성화하십시오.

다음 빠른 팁을 따라 웹 관리자가 작동하도록하여 Safari 용 사이트 또는 앱을 디버깅 할 수 있습니다

  • iPhone, iPad 또는 iPod touch에서 위치 및 개인 정보 설정을 재설정하십시오. 설정> 일반> 재설정> 위치 및 개인 정보 재설정으로 이동하십시오.
  • 컴퓨터에서 iPhone, iPad 또는 iPod touch와 동일한 Apple ID로 로그인해야합니다
  • 컴퓨터와 모든 iPhone, iPad 또는 iPod touch에서 Safari iCloud 동기화 켜기
  • iPhone 또는 iPad에서 설정> Safari> 고급으로 이동하여 웹 관리자를 켜십시오.
  • 컴퓨터에서 Safari를 열고 Safari 메뉴> 기본 설정> 고급 으로 이동 한 다음 메뉴 표시 줄에서 개발 메뉴 표시를 선택하십시오.

Mac 컴퓨터 필요

죄송하지만 Windows 사용자는 Safari의 Web Inspector가 Mac 과만 호환됩니다!

동일한 Apple ID 및 iCloud Sync를 사용하십시오!

iDevice와 Mac이 동일한 Apple ID로 로그인되어 있고 iCloud에서 Safari를 켤지 확인하십시오.

iDevice의 경우 : 설정> Apple ID 프로파일> iCloud> Safari > 켜기

Mac : Apple 메뉴> 시스템 환경 설정> Apple ID 또는 iCloud> Safari> 확인 표시

Safari가 같은 버전인지 확인하십시오.

Mac의 Safari가 iDevice의 Safari와 동일한 버전인지 확인하십시오. Mac에서 실행되는 iOS 버전 또는 Safari 버전을 업데이트해야 할 수도 있습니다.

위치 및 개인 정보 보호 설정 재설정

  1. 설정> 일반으로 이동
  2. 재설정을 선택하십시오
  3. 위치 및 개인 정보재설정 하도록 선택

웹 개발자 용 Mac의 Pro Keyboard ShortCut Tip

Safari에서 Ctrl + Command + R을 누르면 장치를 선택하여 웹 사이트가 특정 장치에서 어떻게 보이는지 확인할 수 있습니다.

웹 개발보기를 종료하려면 키보드 단축키를 전환하십시오.

Web Inspector를 사용하여 모바일 Safari를 디버깅

1. iPad, iPhone 또는 iPod touch에서 설정> Safari> 고급을 누르고 Web Inspector를 켜십시오 . JavaScript가 켜져 있지 않으면 활성화하십시오.

2. Mac에서 Safari를 실행하고 Safari 메뉴> 환경 설정> 고급으로 이동 한 다음 아직 메뉴 표시 줄에 개발 메뉴 표시 를 선택하십시오 (“아직 표시하지 않은 경우”).

3. USB 케이블을 사용하여 iOS 기기를 Mac에 연결합니다. 이것은 중요합니다. 케이블을 사용하여 장치를 수동으로 연결해야합니다. WiFi를 통해 작동하지 않습니다!

4. 이제 iPad에서 디버깅하려는 웹 사이트를 연 다음 Mac에서 Safari를 열고 " 개발 "메뉴로 이동하십시오. 이제 Mac에 연결 한 iDevice가 나타납니다. iDevice에 페이지가 열려 있지 않으면“검사 할 수없는 응용 프로그램”이라는 메시지가 나타납니다.

5. 이제 Mac에서 디버깅하고 DOM 요소를 검사하고 CSS를 수정하고 페이지 성능을 측정하고 Javascript 명령을 실행하는 것처럼 모바일 Safari에서 열린 페이지를 디버깅하십시오.

디버거 도구를 사용하면 웹 페이지에서 JavaScript 오류의 원인을 찾을 수 있습니다. 중단 점을 추가하고 자바 스크립트를 디버깅하며 런타임시 변수 값을 검사 할 수 있습니다.

Safari는 CSS, HTML 및 JavaScript 오류도 감지해야합니다. 디버거의 각 오류에 대한 세부 정보가 표시됩니다.

Safari의 개발 메뉴에 iDevice가 나타나지 않습니까?

  • Safari 캐시 및 쿠키를 지 웁니다.
  • 업데이트가있는 경우 Mac 및 iDevice에서 Safari 업데이트
    • 베타 iOS 또는 macOS 버전을 실행하는 경우 모든 기기에서 최신 베타를 실행해야 할 수 있습니다
  • Mac에서 다른 케이블 및 / 또는 포트를 사용해보십시오. 케이블이 정품 Apple 번개 케이블인지 또는 MFI 인증 (Made For iPhone)인지 확인하십시오
  • 웹 검사기가 켜져 있는지 확인하십시오. iOS 업데이트는 때때로 이것을 기본 OFF 설정으로 다시 전환합니다. 설정> Safari> 고급> 웹 검사기 를 확인하십시오.
    • Web Inspector를 끄고 10 초 정도 기다린 다음 다시 켜십시오.
  • 대신 Safari Technology Preview 브라우저를 사용해보십시오.
  • Mac에서 Safari를 종료하고 다시 시작하십시오. Mac의 Safari가 장비를 인식하고 디버깅이 가능한지 확인하십시오
  • iDevice가 Safari의 개발 메뉴에 잠깐 나타난 다음 사라지는 경우 Safari의 개인 정보 보호 브라우징 모드를 사용하고 있지 않은지 확인하십시오
  • 활동 모니터를 열고 Safari에서 무슨 일이 일어나고 있는지 확인

독자 팁

  • iOS 6 또는 이전 버전에서 이전 iDevice를 사용하는 경우, 장치의 Safari 웹 브라우저에는 자체 내장 디버그 콘솔이 있습니다! 설정 > Safari > 개발자 > 디버그 콘솔 로 이동하여 Safari의 디버그 콘솔에 액세스하십시오.