mac에서 safari 개발자 모드 열기 디버그 방법

Mac safari에서는 이상이 없던 것이 iPhone safari에서는 문제가 생길 때가 있다.

그땐 safari에서 아래와 같은 설정을 해주면 된다.

💡 macOs 14.4 기준이지만, 이전 버전에서도 확인 가능해요.

1. 먼저 mac과 iphone을 케이블로 연결해준다.

2. 그럼 iphone에서 ‘이 컴퓨터를 신뢰하시겠습니까?’ 메시지가 뜬다.

3. 신뢰를 누른다.

   

4. [Safari > 설정…] 클릭

   

5. ☑ 웹 개발자를 위한 기능 보기

   

6. [Safari 설정 > 고급 > 웹 인스펙터] ON

   

7. 연결을 하면 Safari 개발자용에서 내 iPhone에 열려있는 사이트를 볼 수 있다.

   

   이렇게 hover를 하면, 나의 iPhone에서 파란색 커버로 알려준다. click하면 이렇게 웹 인스펙터 우리가 아는 개발자 모드를 확인 할 수 있다~

   

   

아이폰에서 로컬 서버 실행

휴대폰에서 로컬 서버는 맥에서 ngrok 설치 brew install ngrok/ngrok/ngrok한 후, ngrok http 3000 명령어로 실행하면 된다.

ngrok                                                                   (Ctrl+C to quit)

Session Status                online
Account                       inconshreveable (Plan: Free)
Version                       3.0.0
Region                        United States (us)
Latency                       78ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://84c5df474.ngrok-free.dev -> http://localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

위처럼 포워딩 url을 주기 때문에 iPhone에서 접속하기 편하다 ㅎㅎ (사이트에서 회원가입 후 oauth config 필요) ngrok config add-authtoken <TOKEN>