Web Inspector를 사용하여 Mobile Safari를 디버그하는 방법(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 메뉴 > 환경 설정 > 고급 및 체크 표시 메뉴 막대에 개발 메뉴 표시

관련 기사

• iPad 또는 iPhone에서 웹페이지 HTML 소스 코드를 봅니다. 앱이 필요하지 않습니다!
• Safari에서 HTML 소스 코드를 보는 방법
• iPhone 및 Mac용 Safari에서 파비콘을 보는 방법

Mac 컴퓨터 필요

Windows 여러분께 죄송하지만 Safari의 Web Inspector는 Mac과만 호환됩니다!

동일한 Apple ID와 iCloud 동기화를 사용하십시오!

iDevice와 Mac이 모두 동일한 Apple ID로 로그인되어 있고 iCloud에서 Safari를 켭니다.

귀하의 iDevice: 설정 > Apple ID 프로필 > iCloud > Safari > 켜짐으로 전환

Mac의 경우: Apple 메뉴 > 시스템 환경설정 > Apple ID 또는 iCloud > Safari > 체크 표시

Safari도 동일한 버전인지 확인하십시오.

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

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

1. 이동 설정 > 일반
2. 선택하다 초기화
3. 선택 위치 및 개인 정보 재설정

웹 개발자를 위한 Mac용 Pro 키보드 단축키 팁

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

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

1. iPad, iPhone 또는 iPod touch에서 설정 > 사파리 > 고급 그리고 토글 웹 인스펙터. JavaScript가 아직 켜져 있지 않은 경우 활성화하십시오.

2. Mac에서 Safari를 실행하고 Safari 메뉴 > 환경 설정 > 고급 그런 다음 "메뉴 막대에 개발 메뉴 표시"이미 하지 않은 경우

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

4. 이제 iPad에서 디버그하려는 웹 사이트를 연 다음 Mac에서 Safari를 열고 "개발하다" 메뉴. 이제 Mac에 연결한 iDevice가 표시됩니다. iDevice에서 열려 있는 페이지가 없는 경우 "검사할 수 있는 응용 프로그램 없음"이라는 메시지가 표시됩니다.

5. 이제 Mac에서 디버그하는 것처럼 모바일 Safari에서 열려 있는 페이지를 디버그하고, DOM 요소를 검사하고, CSS를 수정하고, 페이지 성능을 측정하고, Javascript 명령을 실행합니다.

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

Safari는 CSS, HTML 및 JavaScript 오류도 감지해야 합니다. 그리고 디버거에서 각 오류의 세부 정보를 볼 수 있습니다.

Safari의 개발 메뉴에 iDevice가 표시되지 않습니까?

•  Safari 캐시 및 쿠키 지우기
• 업데이트가 있는 경우 Mac 및 iDevice에서 Safari를 업데이트합니다.
  • iOS 또는 macOS 베타 버전을 실행하는 경우 모든 기기에서 최신 베타를 실행해야 할 수 있습니다.
• Mac에서 다른 케이블 및/또는 포트를 사용해 보십시오. 확인 케이블은 정품 Apple 라이트닝 케이블 또는 MFI 인증(Made For iPhone)입니다.
• Web Inspector가 켜져 있는지 확인하십시오. iOS 업데이트는 때때로 이것을 기본 OFF 설정으로 다시 토글합니다. 그러니 꼭 확인만 하세요 설정 > 사파리 > 고급 > 웹 인스펙터
  • Web Inspector 끄기를 토글하고 10초 동안 기다렸다가 다시 켜십시오.
• 대신 Safari Technology Preview 브라우저를 사용해 보세요.
• Mac에서 Safari를 종료하고 재시동하십시오. Mac의 Safari가 장치를 인식하고 디버깅을 허용하는지 확인하십시오.
• Safari의 개인 정보 보호 브라우징 모드를 사용하고 있지 않은지 확인 if 귀하의 iDevice는 Safari의 개발 메뉴에 잠시 나타났다가 사라집니다.
• 활동 모니터를 열고 Safari에서 무슨 일이 일어나고 있는지 확인하십시오

독자 팁 

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