아이폰 브라우저 개발자도구 pc 로 보기 - for iPhone with Mac (usb 디버깅) - Safari browser

 

Step 1. Mac에서 해야할일

 

1. vs code에서 라이브 서버를 이용하여 html페이지를 실행시킨다. 

2. 로컬호스트의 주소가 예를들어 http://127.0.0.1:5500/test.html 이라고 하자.

3. 메뉴 > 네트워크 > 와이파이 > 상세정보에서 맥북의 IP Address를 알아내자(예를 들어 192.168.1.12라고 하자)

4. 사파리브라우저를 실행시키고, 설정 > 고급설정(Advanced)탭에서 하단에서 

    Show develop menu in menu bar (개발자메뉴보기)를 체크 해 준다.

 

5. 사파리 브라우저 상단메뉴에 'Develop' 메뉴가 추가되었다면 iphone 설정으로 넘어가자.

 

 

 

Step 2. iphone 에서 할일

1. usb로 맥북과 iphone을 연결한다.

2. '신뢰'를 누르고 비밀번호를 입력하여 접속을 허용한다.

3. 설정 > 사파리 메뉴를 연다.

4. 맨 아래의 고급 메뉴를 연다.

5. 웹속성을 on 시킨다.

6. iphone에서 사파리 브라우저를 열어서 원하는 웹페이지에 접속한다. 

7. Mac 에서 알아낸 IP Address(192.168.1.12)를 이용하여 작업하고있는 html페이지에 접속한다.

예 ) http://127.0.0.1:5500/test.html 라면, -> 모바일에서는 http://192.168.1.12:5500/test.html 이렇게 접속하면된다.

8. 사파리에서 페이지가 잘 뜨는지 확인후, 다시 Mac으로 돌아가자!

 

 

Step 3. Mac과 iphone 같이 작업하기

1. Mac에서 사파리브라우저의 Develop메뉴를 눌러보면, 연결된 iphone이 뜰것이다.

2. iphone에서 웹사이트를 접속하고있다면, 그 리스트가 보이고, 클릭하면 된다!

3. 아래와같이 인스펙터(개발자도구)가 활성화되고 모바일에서 터치 및 작업을 하면 mac 개발자도구로 바로바로 확인이 가능하다!!