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

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

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

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

먼저 mac과 iphone을 케이블로 연결해준다.
그럼 iphone에서 ‘이 컴퓨터를 신뢰하시겠습니까?’ 메시지가 뜬다.
신뢰를 누른다.
[Safari > 설정…] 클릭
☑️ 웹 개발자를 위한 기능 보기
[Safari 설정 > 고급 > 웹 인스펙터] ON
연결을 하면 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>

Tags:

#mac safari#dev mode#debugging#개발자모드#웹 인스펙터