iOS용 Safari에는 웹 개발자가 iPhone 및 iPad의 웹 페이지 문제를 추적하고 해결하는 데 도움이 되는 선택적 디버그 콘솔이 포함되어 있습니다.

더 좋은 점은 iOS 최신 버전에서는 데스크톱의 Safari와 동일한 Web Inspector를 실제로 사용한다는 것입니다. 즉, iPhone 또는 iPad를 컴퓨터에 연결하면 Safari 디버깅 도구를 직접 사용할 수 있습니다. iOS 또는 iPadOS 기기와 함께

이전 버전의 iOS에도 이 기능이 있으며 데스크톱 Safari 디버그 및 개발자 도구만큼 포괄적이지는 않지만 여전히 유용하며 iPhone 및 iPad에서 쉽게 활성화 또는 비활성화할 수 있습니다.

iOS의 새 버전과 이전 버전 모두에서 이 기능을 활성화하는 방법과 버전 간의 차이점에 대해 알아봅시다.

iPhone 및 iPad용 Safari에서 Web Inspector 활성화 및 사용 방법

최신 iOS 및 iPadOS 버전에서 Safari 웹 검사기가 작동하는 방식은 다음과 같습니다.

1. Open Settings > Safari > Advanced 그런 다음 탭하여 “Web Inspector” 활성화
2. iPhone 또는 iPad를 Mac에 연결한 다음 Safari로 이동하여 개발자 메뉴를 활성화하지 않은 경우 Safari > 환경 설정 > 고급 > 개발자 메뉴 표시줄 표시
3. “개발” 메뉴 표시줄을 아래로 내리고 iPhone 또는 iPad를 찾은 다음 디버그하려는 웹 페이지를 엽니다
4. Safari Web Inspector가 열리면 Mac의 Safari에서 직접 iOS 또는 IPadOS 장치의 웹 요소를 디버그하고 검사할 수 있습니다.

이제 iPhone 또는 iPad에서 탐색하면 Mac의 Safari에서 Web Inspector가 업데이트됩니다.

웹 인스펙터의 콘솔 탭을 통해 디버그 콘솔에 접근할 수 있으며, 디버거 탭을 통해 디버거에 접근할 수 있습니다. 물론 요소, 리소스, 네트워크 등에 대한 일반적인 웹 검사기 도구도 사용할 수 있습니다.

필요한 경우 이동 중에도 iOS 및 iPadOS용 소스 보기 트릭을 사용할 수 있습니다.

이전 iOS 버전에서 디버그 콘솔을 활성화하는 방법

이전 iPhone 또는 iPad에 이전 버전의 iOS가 있는 경우 전체 디버그 환경이 장치에 있으며 Mac의 Safari에 연결할 수 없습니다. 그럼에도 불구하고 여전히 매우 유용하며 작동 방식은 다음과 같습니다.

1. "설정"을 시작하고 "사파리"를 누릅니다
2. "고급" 탭
3. “디버그 콘솔”을 ON으로 슬라이드

활성화되면 Safari 화면 상단의 디버그 콘솔을 탭하여 웹 페이지 오류를 확인하십시오.

기본 목록에는 모든 오류가 표시되지만 개별적으로 탭하여 보다 구체적인 HTML, JavaScript 및 CSS 오류를 드릴다운할 수 있습니다.

모바일 웹 개발자에게 유용한 또 다른 도구는 iOS용 Firebug Lite입니다. 이 도구는 인기 있는 Firebug 개발 도구의 간단한 버전을 로드하기 위해 자바스크립트 북마클릿을 사용합니다. 최신 릴리스에는 새로운 기능이 있으므로 이 기능은 아마도 이전 iOS 버전에도 가장 유용할 것입니다.

iPhone 또는 iPad용 웹 개발자 도구를 사용하십니까? 아래 댓글에서 팁, 요령, 앱 또는 기술을 공유해 주세요.