코드루덴스

iOS 크롬 개발자 도구 원격 웹 디버깅(윈도우 PC)
- iPad, iPhone iOS Chrome Devtool Remote Debugging, in Windows PC

//--------------------------------

PC에 iTunes 설치

https://www.apple.com/kr/itunes/
Microsoft Store에서 설치하면 안될수 있다. 설치용 exe 파일을 다운받아 설치한다.
Apple Mobile Device Support 가 설치되어야 한다
iTunes64Setup.exe 파일을 다운받아 설치한다.

PC 와 iOS 기기를 USB로 연결하여 동기화 한다.

iTunes -> iPad -> 설정 -> 요약 -> 옵션 -> Wi-Fi를 통해 이 iPad 동기화 -> 완료

//------------------------------------------

PC Node.js 설치

• npm을 쓰기 위해

관리자 권한으로 Powershell 실행

• remotedebug-ios-webkit-adapter 설치

  npm install remotedebug-ios-webkit-adapter -g
  npm install -g vs-libimobile

• google /ios-webkit-debug-proxy
  https://github.com/google/ios-webkit-debug-proxy

• scoop 설치
  https://scoop.sh/

• Powershell 을 관리자 권한으로 실행

  Set-ExecutionPolicy RemoteSigned -scope CurrentUser
  Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

• ios-webkit-debug-proxy 설치

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

iOS 설정

• 설정 -> Safari -> 고급
  • 웹 속성 : 켜기
  • 원격 자동화 : 상관없음

PC 와 iOS를 USB로 연결

• 연결시 신뢰하시겠습니까? 물음이 나오면 승인 선택

PC에 Apple Mobile Device Service 서비스가 실행 중인지 확인
PC에서 iTunes가 접속 되는지 확인

remotedebug_ios_webkit_adapter --port=9000

• 주의 : ios_webkit_debug_proxy 명령어는 안됨

PC 크롬 설정

chrome://inspect/#devices

Discover USB devices : 체크

• Discover newwork targets 옆의 Configure 버튼 클릭

  • localhost:9000 추가

• iOS에서 사파리로 웹 접속

• 하단에 원격 디버깅 할수 있는 리스트가 나옴

  • 10초 정도 걸릴수 있음

• inspect 선택해서 원격 디버깅

//-------------------------------------------------------
< iOS 크롬 개발자 툴 콘솔 메시지 보기 >

• 자바스크립트 로그 보기(에러 메시지등)

• iOS 크롬 주소창에 다음 입력

  chrome://inspect

• 로깅 시작 버튼 누름

• 새탭을 열고 원하는 사이트로 이동

  • chrome://inspect를 연 창에 현재창의 콘솔 메지지가 출력됨

//--------------------------------
// 참고
https://www.outsystems.com/blog/posts/how-to-troubleshoot-ios-on-windows/

https://washamdev.com/debug-a-website-in-ios-safari-on-windows/

https://medium.com/@nikoloza/how-to-debug-remote-ios-device-using-chrome-devtools-f44d697003a7