Development Tip

Chrome DevTools를 사용하여 iOS 6 + 7 Mobile Safari 디버그

yourdevel 2020. 10. 12. 08:17
반응형

Chrome DevTools를 사용하여 iOS 6 + 7 Mobile Safari 디버그


iOS 6에는 원격 디버깅을위한 내장 지원이 제공됩니다 ( 1 분 스크린 캐스트 ). WebKit Inspector의 1 년 된 포크 인 것처럼 보이는 새로운 Safari Web Inspector와 잘 어울립니다. JS 편집 및 WebSocket 프레임 검사와 같은 일부 기능이 누락되었습니다.

Safari의 웹 검사기는 WebKit 원격 디버깅 프로토콜을 사용합니다. 그러나 Safari는 TCP / HTTP를 전송 계층으로 사용하지 않으므로 Chrome과 호환되지 않습니다.

Timothy Hatcher (일명 Xenon), Apple 직원

  • Safari는 전송 레이어에 무엇을 사용합니까?
  • 이 신비한 전송 계층에서 HTTP로 프록시를 만들어 Chrome DevTools에서 작동하도록 할 수 있습니까?

아이폰 OS 웹킷 디버그 프록시 프로젝트는이 가능합니다.

스크린 샷

시작하려면 homebrew로 설치하십시오.

brew install ios-webkit-debug-proxy

시뮬레이터 실행 (시뮬레이터를 실행하는 경우) :

SIM_DIR=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer
  "$SIM_DIR/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator" \
  -SimulateApplication \
  $SIM_DIR/SDKs/iPhoneSimulator6.1.sdk/Applications/MobileSafari.app/MobileSafari

프록시를 실행합니다.

ios_webkit_debug_proxy

오류 확인

장치에서 오류 메시지를 찾습니다.

lockdownd에 연결할 수 없습니다. 종료합니다. : 해당 파일 또는 디렉토리가 없습니다. 인스펙터 ios_webkit_debug_proxy를 연결할 수 없습니다.

그런 다음 장치에서 다음 과 같은 메시지를 확인하십시오 (iOS 7 예 :).

현재 연결된 컴퓨터를 신뢰하십니까?

"신뢰"를 선택하고 프록시를 다시 실행하십시오.

ios_webkit_debug_proxy

기본 devtools 열기

그런 다음 http://localhost:9221

DevTools는 기본적으로 이전 버전입니다 (2012 년 3 월경 Chrome 18).

최신 devtools 사용해보기

프로토콜 변경 으로 인해 최신 DevTools 프런트 엔드 부분이 완전히 작동하지 않을 수 있습니다. 열어서 시도 할 수 있습니다

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/pag‌​e/2

여기서 portpage값은 표시되는 값입니다 http://localhost:9221. 다시 말하지만 이것은 실제로 버그가있을 수 있습니다.

ios-webkit-debug-proxy 프로젝트 페이지 에서 더 많은 문서를 읽어보세요 .


업데이트 : 이것은 iOS7에서도 작동 합니다 . 업데이트 : patrick을 통해 새로운 devtools 프런트 엔드 지침을 추가했습니다 . 업데이트 : devtools.html을 Chrome 45 용 inspector.html 변경 하고 wsScheintod를 통한 새로운 해킹.


https://github.com/andydavies/node-iosdriver 에 따르면 ,

Safari는 Chrome과 동일한 디버깅 명령을 사용하지만 웹 소켓을 통한 JSON이 아닌 RPC를 통한 바이너리 plist로 래핑됩니다.

예, 프록시를 작성할 수 있습니다.

나는 발견 이 스레드 가 호출 프로세스에 연결 한 것을보고는 MobileSafari 관리자에 연결되어있는 동안 사파리 만들고 있었는지 TCP 연결을보고 webinspectord하고 인터넷 검색을한다 :

# pgrep -lf /Applications/Safari.app
33170 /Applications/Safari.app/Contents/MacOS/Safari -psn_0_21144617
# lsof -p 33170 | grep TCP
Safari  33170 ryan   16u    IPv6 0x799d5f43b472a241       0t0      TCP localhost:54892->localhost:27753 (ESTABLISHED)
# lsof -i :27753
COMMAND     PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
launchd     371 ryan   42u  IPv6 0x799d5f43b472aa01      0t0  TCP localhost:27753 (LISTEN)
Safari    33170 ryan   16u  IPv6 0x799d5f43b472a241      0t0  TCP localhost:54892->localhost:27753 (ESTABLISHED)
webinspec 33182 ryan    6u  IPv6 0x799d5f43b472aa01      0t0  TCP localhost:27753 (LISTEN)
webinspec 33182 ryan    7u  IPv6 0x799d5f43b181a621      0t0  TCP localhost:27753->localhost:54892 (ESTABLISHED)
# ps p 33182
  PID   TT  STAT      TIME COMMAND
33182   ??  S      0:00.28 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator6.1.sdk/usr/libexec/webinspectord

참고 URL : https://stackoverflow.com/questions/11361822/debug-ios-67-mobile-safari-using-the-chrome-devtools

반응형