윈도우 10에서 iOS 사파리 디버깅(Web Inspect) 하기

아래 내용은 인터넷에 떠도는 내용을 보고 따라해보면서
직접 실패를 겪은 뒤 성공한 순서대로 일부를 수정하여 다시 정리한 글임

1. 아이폰에서 Web Inspect 활성화
   한국어: 설정 -> Safari -> 고급 -> "웹 속성" 활성화
   영어: Settings -> Safari -> Advanced -> "Web Inspector" 활성화
2. 윈도우에 iTunes 설치
3. https://apple.co/ms
4. 아래 순서대로 아이폰 연결
   아이폰 연결
   -> 드라이버 설치 (윈도우에서 자동으로 설치함)
   -> iTunes 실행 (반드시 드라이버 설치 완료되었는지 확인 후 진행)
   -> 동기화 허용
   -> 동기화
5. Node.js 설치
6. https://nodejs.org/ko/
7. PowerShell or CMD 관리자 권한 실행
8. scoop 설치 -> ios-webkit-debug-proxy 설치

> Set-ExecutionPolicy RemoteSigned -scope CurrentUser // 권한 오류가 날 수 있으니 미리 실행
> iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
> scoop install git
> scoop bucket add extras
> scoop install ios-webkit-debug-proxy

1. remotedebug-ios-webkit-adapter 설치

> npm install remotedebug-ios-webkit-adapter -g

1. remotedebug_ios_webkit_adapter 실행

> remotedebug_ios_webkit_adapter --port=9000
// 방화벽이 뜨면 반드시 허용해줄 것

1. 브라우저에서 DevTools 접속 및 설정

• 아래 주소를 각 브라우저에 따라 주소창에 입력
• chrome://inspect/#devices
  edge://inspect/#devices
• Discover network targets 옆에 있는 Configure... 버튼 클릭
  (안된다 해도 다른 것은 절대 만질 필요가 없음)
• Target discovery settings 창이 뜨면, 아래 내용 입력 후 Done 버튼 클릭
  (안된다 해도 다른 것은 절대 만질 필요가 없음)
• localhost:9000

1. inspect 시작

• 아이폰에서 사파리를 켜고 디버깅 원하는 페이지 접속
• Remote Target 하단에 접속한 페이지가 뜨면 inspect 버튼 클릭 -> 개발자 도구가 실행됨
• 혹시나 업데이트가 안되는 것 같으면 켜진 개발자 도구를 끄고 다시 inspect 버튼 클릭

이미지는 없지만 차근차근 따라하면 됨

끝

 

출처 - https://velog.io/@jungti1234/%EC%9C%88%EB%8F%84%EC%9A%B0-10%EC%97%90%EC%84%9C-iOS-%EC%82%AC%ED%8C%8C%EB%A6%AC-%EB%94%94%EB%B2%84%EA%B9%85Web-Inspect-%ED%95%98%EA%B8%B0

윈도우 10에서 iOS 사파리 디버깅(Web Inspect) 하기