장치에서 요소 검증을 위한 환경 생성 정보

◆iphone

스마트 폰 사이트의 iPhone 디스플레이를 Windows에서 디버깅하는 방법
iPhone의 웹 관리자를 Windows에서 볼 수 있습니다 (브라우저는 Chrome 필요)

장치를 결정하려면 itunes가 있어야합니다.

ios-webkit-debug-proxy-win32을 설치하고 Zip을 압축 해제하면 완료됩니다.

※iPhone 쪽에서는, Web 인스펙터를 유효하게 할 필요가 있습니다.
이 설정은 설정 앱 → Safari → 세부 정보에 있습니다. 환경 구축은 이것만으로 완료됩니다.

웹 관리자 보기

① iPhone을 Windows에 USB 연결합니다.
iPhone에서 '이 컴퓨터를 신뢰하시겠습니까?'라는 메시지가 표시되면 '신뢰'를 탭합니다.

② Windows에서 방금 추출한 ios-webkit-debug-proxy.exe를 시작합니다.
iPhone과 통신할 수 없게 되면 오류가 표시됩니다.
시작할 때 Windows 보안 경고가 표시되면 "액세스 허용"을 클릭하십시오.

③ iPhone에서 디버깅하려는 사이트를 엽니다.
④ Windows Chrome에서 localhost:9221을 엽니다.
⑤ iPhone의 장치 이름 링크가 표시되므로 클릭합니다. 또한 safari에서 열린 페이지 목록이 표시되므로 디버깅하려는 사이트를 클릭합니다.

Chrome에 웹 관리자가 표시되어 디버깅할 수 있습니다.

PC(Chrome)와 아이폰 단말기를 접속

◆Android

① 안드로이드 측에서 설정> 시스템> 단말기 정보> 빌드를 탭, 탭 · ·
(기종에 따라 바뀔 수 있음)
⇒개발자용 옵션을 사용할 수 있는 상태가 된다

② USB 디버그에 체크를 넣고 PC와 접속. 허용을 선택합니다.

③ 시크릿 모드에서 Chrome을 열고 F12 키 또는 오른쪽 클릭에서 '검증'으로 개발자 도구를 호출합니다.

④ 링크 1 대로 절차를 밟는다

PC(Chrome)와 Android 기기 연결

Chrome에 웹 관리자가 표시되어 디버깅할 수 있습니다.

감상

30분 정도로 환경을 만들고 작업이 진행되었습니다.

참고

링크 1
링크 2
링크 3