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로 연결하여 동기화 한다.

PC의 iTunes 에서 iPad 선택 -> 설정

    -> 요약 -> 옵션

    -> Wi-Fi를 통해 이 iPad 동기화 -> 완료

 

 

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

* PC에 Node.js 설치

    - npm을 쓰기 위해

 

* 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 (installer)설치 (powershell에서 설치)

    https://scoop.sh/

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

> Set-ExecutionPolicy RemoteSigned -scope CurrentUser

> Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

 

        - 참고만 : scoop 삭제 방법은 - del .\scoop -Force

         - https://scoop-docs.vercel.app/docs/getting-started/Uninstalling-Scoop.html

 

 

    - ios-webkit-debug-proxy 설치

> scoop bucket add extras

> scoop install ios-webkit-debug-proxy


//---------------------------------
* Windows 서비스 시작
    - 필요한 서비스  : "Apple Mobile Device Service"  , "Bonjour Service"
> net start "Apple Mobile Device Service"
> net start "Bonjour Service"

 

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

* iOS 설정

설정 -> Safari -> 고급 

    - 웹 속성 : 켜기

    - 원격 자동화 : 상관없음



* PC 와 iOS를 USB로 연결

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

 

 

    - PC에 "Apple Mobile Device Service" 서비스가 실행 중인지 확인

        - 확인 : > sc query "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

 

 

 
반응형
Posted by codens codens

댓글을 달아 주세요

  1. 감사합니다 2020.12.28 15:21  댓글주소  수정/삭제  댓글쓰기

    아이폰5로 도저히 안되서 포기하고 있었는데, 포스팅대로 하니까 되네요.
    구글링하면 이렇게 자세한 과정은 다 생략된 껍데기 뿐인 글들이 상위를 차지하고 있는게 참...
    아무튼 정말 감사합니다 ㅜ

  2. 지나가던개발자 2021.03.18 16:32  댓글주소  수정/삭제  댓글쓰기

    얼럿만 찍고 있었는데 구세주 그 자체시네요 정말 감사합니다 ㅠ

  3. 주니어 2021.03.19 18:12  댓글주소  수정/삭제  댓글쓰기

    아이폰 11pro
    ios14
    로 테스트 했는데 디버깅 잘 되네요
    덕분에 야근안하고 칼퇴합니다 감사합니다!!!

  4. 저는왜... 2021.08.02 23:43  댓글주소  수정/삭제  댓글쓰기

    처음부터 차근차근 다 따라했는데 왜 안될까요...ㅠㅠㅠㅠㅠ

    • Favicon of https://codens.info BlogIcon codens codens 2021.08.10 20:25 신고  댓글주소  수정/삭제

      itunes 연결은 되는 상태인가요?
      저도 잘 되다가 가끔 연결이 안될때 케이블을 재연결하고 10초 정도 기다리면 다시 연결될때가 있더군요.

  5. ddd 2021.08.10 11:37  댓글주소  수정/삭제  댓글쓰기

    아이패드 디버깅중인데
    잘 따라해봤습니다. 고맙습니다.
    그런데 .... 아이패드로 웹 접근시 safari 로만 해야 가능한거죠 ... ?
    다른 브라우저로 접근할경우에도 inspect 가능한 방법이 있을까요??

    • Favicon of https://codens.info BlogIcon codens codens 2021.08.10 20:16 신고  댓글주소  수정/삭제

      ios에서는 사파리만 원격PC에서 inspect가 가능 한것 같습니다.(제가 모를수도)

      ios의 웹브라우저들(사파리, 크롬, 웨일, 파이어폭스, 등...)은 모두 애플의 WebKit 엔진을 사용하고 있어서 사파리와 내부적으로 거의 동일합니다. 사파리에서만 디버깅을 해도 충분한 듯 보입니다.

      ios 크롬에서 디버깅하시려면 본문의 맨 마지막 < iOS 크롬 개발자 툴 콘솔 메시지 보기 > 방법이 최선인 듯 합니다.