윈도우에서 아이폰 사파리 디버깅하기 (Web Inspect)

안녕하세요.

IOS 16 베타버전 업그레이드 후에 멀쩡히 돌아가던 서비스 레이아웃이 깨지는 이슈가 발생했었습니다.

여러 테스트 결과 aos는 이상없음. ios 15버전 이상없음. ios 16에서만 이슈 발생 확인했는데,

저는 윈도우 데스크탑을 쓰고있어서 아이폰 디버깅을 할 방법을 찾아보고 이슈 해결 후

윈도우에서 아이폰 사파리 디버깅 하는 방법을 공유합니다.

구글링 결과 기존 글들이 최신 글이 없어서 설치 과정에서 에러가 나서 해결 후 포스팅 하는거라 가장 최신 방법이라 생각듭니다.

순서에 따라 진행하시면 됩니다.

1. Web Inspect 활성화

2. iTunes 동기화 (iTunes 미설치 상태일 경우 설치)

https://nodejs.org/ko/

1. PowerShell 관리자 권한 실행

2. scoop 설치

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

위와 같은 에러가 나올 경우

iex "& {$(irm get.scoop.sh)} -RunAsAdmin"

3. ios-webkit-debug-proxy 설치

scoop install git
scoop bucket add extras
scoop install ios-webkit-debug-proxy

4. remotedebug-ios-webkit-adapter 설치

npm install remotedebug-ios-webkit-adapter -g

5. remotedebug-ios-webkit-adapter 실행

remotedebug_ios_webkit_adapter --port=9000

혹시 방화벽 알림 뜨면 허용해주세요.

chrome://inspect/#devices
edge://inspect/#devices

위 주소에 맞는 브라우저에서 url 입력

Configure... 버튼 클릭

이후 나오는 모달에서 선택된 것 처럼 입력 후 Done

(설치 - 5. remotedebug-ios-webkit-adapter 실행 부분에서 --port=9000)

사파리에서 디버깅 할 페이지 접속

Remote Target 하단에 접속한 페이지 목록에서 inspect 클릭

이후 디버깅 시에는

iTunes 연결

[설치] 5. remotedebug-ios-webkit-adapter

inspect 사이트 순으로 하시면 됩니다.

(configure 안해도 됨)

피드백, 질문, 댓글 언제나 환영입니다!

감사합니다 :)

워터폴 - 개발