iPad에서 실행되는 웹 페이지의 JavaScript를 디버깅하려면 iOS에 내장된 Safari 웹 인스펙터(Web Inspector) 기능을 활용해야 합니다. 이 기능을 사용하면 Mac의 Safari 개발자 도구를 통해 iPad 화면에 표시되는 웹 콘텐츠를 실시간으로 검사하고 오류를 수정할 수 있습니다.
1단계: iPad에서 웹 인스펙터 활성화하기
먼저 iPad에서 웹 인스펙터 기능을 켜야 합니다. 아래 순서대로 진행하세요.
- iPad 홈 화면에서 설정(Settings) 앱을 엽니다.
- 왼쪽 메뉴에서 Safari를 선택합니다.
- 목록을 아래로 스크롤하여 고급(Advanced) 옵션을 탭합니다.
- 웹 인스펙터(Web Inspector) 스위치를 켭니다.
2단계: iPad와 Mac 연결하기
웹 인스펙터가 활성화되었다면, USB 케이블을 사용해 iPad를 Mac에 연결합니다. 처음 연결하는 경우 iPad 화면에 이 컴퓨터 신뢰라는 메시지가 나타나며, 이때 '신뢰'를 선택하고 암호를 입력하면 됩니다.
3단계: Mac Safari에서 개발용 메뉴 확인하기
연결이 완료되면 Mac에서 Safari를 실행하고, 상단 메뉴 막대의 개발자(Develop) 메뉴를 엽니다. 만약 개발자 메뉴가 보이지 않는다면 다음과 같이 활성화할 수 있습니다.
- Safari에서 설정(Safari > Settings)을 엽니다.
- 고급(Advanced) 탭으로 이동합니다.
- 하단의 메뉴 막대에서 개발자용 메뉴 보기(Show features for web developers) 항목을 체크합니다.
4단계: JavaScript 디버깅 시작하기
개발자(Develop) 메뉴 안에는 현재 연결된 iPad의 이름이 표시됩니다. 해당 이름 위에 마우스를 올리면 iPad의 Safari에서 열려 있는 웹 페이지 목록이 나타납니다. 디버깅할 페이지를 선택하면 Mac의 웹 인스펙터 창이 열리고, 콘솔(Console)에서 오류 확인, 요소 검사, 네트워크 분석, 중단점 설정 등 본격적인 JavaScript 디버깅을 시작할 수 있습니다.
이처럼 iPad와 Mac을 연동하면 모바일 사파리 환경에서만 발생하는 JavaScript 문제도 손쉽게 추적하고 해결할 수 있습니다.