iOS 6 이전에는 iPhone의 Safari 웹 브라우저에 개발자가 웹 페이지 결함을 찾는 데 사용하는 내장 디버그 콘솔이있었습니다. 최신 버전의 iOS는 대신 Web Inspector를 사용합니다. Web Inspector는 웹 개발자가 Mac 및 iOS 장치에서 웹 사이트를 수정, 디버그 및 최적화하는 데 사용됩니다.
Web Inspector를 사용하려면 케이블을 사용하여 iPhone을 Mac 컴퓨터에 연결하고 Mac의 Safari를 연 다음 Safari 고급 환경 설정에서 개발 메뉴를 활성화합니다.
이 문서의 정보는 별도로 명시하지 않는 한 iOS 6 ~ iOS 12 및 Mac OS X Leopard (10.5) 이상의 Mac이 설치된 iPhone 및 기타 iOS 장치에 적용됩니다.
Miguel Co / Lifewire
iPhone iOS 6 이상에서 Web Inspector 활성화
웹 속성은 대부분의 iPhone 사용자가 사용하지 않기 때문에 기본적으로 비활성화되어 있습니다. 그러나 개발자는 몇 가지 간단한 단계로 활성화 할 수 있습니다. 방법은 다음과 같습니다.
-
탭 설정 iPhone 홈 화면의 아이콘.
iOS 초기 버전이 설치된 iPhone에서는 다음을 통해 디버그 콘솔에 액세스합니다. 설정 > 원정 여행 > 개발자 > 디버그 콘솔. iPhone의 Safari에서 CSS, HTML 및 JavaScript 오류를 감지 할 때마다 각각의 세부 정보가 디버거에 표시됩니다.
-
아래로 스크롤하여 탭합니다. 원정 여행 iPhone, iPad 또는 iPod touch에서 Safari 웹 브라우저와 관련된 모든 것이 포함 된 화면을 엽니 다.
-
화면 하단으로 스크롤하여 고급.
-
를 이동 웹 인스펙터 토글 스위치를 On 위치.
Mac에서 iPhone을 Safari에 연결
Web Inspector를 사용하려면 iPhone 또는 다른 iOS 기기를 Safari 웹 브라우저를 실행하는 Mac에 연결하십시오. 케이블을 사용하여 장치를 컴퓨터에 연결합니다.
Safari가 열린 상태에서 다음을 수행하십시오.
-
개인 및 전문적인 원정 여행 메뉴 표시 줄에서 환경 설정.
-
클릭 고급 탭.
-
선택 메뉴 막대에 개발 메뉴 표시 확인란을 선택합니다.
-
설정 창을 종료합니다.
-
Safari 메뉴 표시 줄에서 개발다음 선택 웹 검사기 연결.
연결된 iPhone 또는 기타 iOS 기기가 개발 드롭 다운 메뉴. Web Inspector가 열려 있으면 개발자는 웹 페이지의 모든 리소스를 검사 할 수 있습니다. Web Inspector 창에는 편집 가능한 HTML과 웹 페이지의 스타일 및 레이어와 관련된 메모가 별도의 패널에 포함되어 있습니다.
Safari 9 및 OS X Mavericks (10.9)를 통해 Apple은 Web Inspector에 반응 형 디자인 모드를 도입했습니다. 개발자는이 내장 시뮬레이터를 사용하여 웹 페이지가 다양한 화면 크기, 해상도 및 방향으로 확장되는 방식을 미리 볼 수 있습니다.