[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)

사파리 브라우저로 iPhone 웹 디버깅하는 방법에 대해서 알아보겠습니다.

 

웹 페이지 디버깅

웹 개발을 하다 보면 데스크탑 브라우저뿐만 아니라 실제 모바일 디바이스에서의 동작을 확인하고 디버깅해야 할 때가 많습니다. 사파리(Safari) 브라우저는 iOS 디바이스와의 연결을 통해 이러한 작업을 가능하게 합니다. 이 글에서는 실제 디바이스를 USB로 연결하여 사파리에서 웹 인스펙터를 사용하는 방법에 대해서 알아보겠습니다.

 

사파리(Safari) 브라우저와 iOS 디바이스 설정

웹 인스펙터를 사용하기 위해서는 먼저 사파리 브라우저와 iOS 디바이스에서 설정을 완료해야 합니다.

사파리 브라우저 설정

1. 사파리 브라우저를 열고 왼쪽 상단의 Safari 메뉴를 클릭한 후, 설정(Preferences)을 선택합니다.

 

설정 선택하기

 

 

2. 설정 창에서 상단의 고급(Advanced) 탭을 클릭합니다. 그리고 맨 하단에 웹 개발자를 위한 기능 보기(Show Develop menu in menu bar) 옵션을 체크합니다.

 

고급 > 웹 개발자를 위한 기능 보기 체크하기

iOS 디바이스 설정

1. iPhone 또는 iPad에서 설정(Settings) 앱을 열고, 아래로 스크롤하여 Safari를 선택합니다.

 

설정 > Safari 선택하기

 

 

2. 고급(Advanced) 옵션을 선택합니다.

 

고급 선택하기

 

3. 웹 인스펙터(Web Inspector) 옵션을 활성화합니다.

웹 인스펙터 옵션 활성화하기

 

 

USB 케이블을 사용하여 Mac에 연결하기

iPhone 또는 iPad 디바이스를 USB 케이블을 사용하여 Mac에 연결합니다. iOS 디바이스(iPhone 또는 iPad 디바이스)에 신뢰 요청 승인 팝업에 신뢰(Trust)를 선택합니다.

 

 

1. 사파리 브라우저를 열고 상단 메뉴 막대의 개발자용(Develop) 메뉴를 클릭합니다.

개발자용(Develop) 메뉴 아래에 연결된 iOS 디바이스의 이름이 나타납니다. 해당 디바이스를 선택하면, 디바이스에서 열린 웹 페이지 목록이 표시됩니다. 예시로 유튜브 웹사이트를 접속한 상태입니다.

 

디버깅하고자 하는 웹페이지 선택하기

 

 

 

2. 디버깅하고자 하는 URL에 접속하면, Mac의 사파리 브라우저에 웹 인스펙터가 열립니다.

 

웹 인스펙터

 

 

 

이제 데스크탑에서 사용하던 것과 동일한 방식으로 웹 인스펙터를 사용할 수 있습니다.

 

 

사파리에서 실제 iOS 디바이스를 USB로 연결하여 웹 인스펙터를 사용하는 방법을 통해 모바일 환경에서의 웹 페이지 동작을 더욱 정확하게 확인하고 디버깅할 수 있습니다. 이렇게 사파리 브라우저로 iPhone 웹 디버깅하는 방법에 대해서 알아보았습니다.

 

 

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

 

 

[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

 

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

 

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

 

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!