본문 바로가기

Develop/HTML & JavaScript & CSS

윈도우 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) 하기

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

velog.io