[google-chrome] iOS 원격 디버깅

iOS 용 Chrome의 최신 릴리스에서 Chrome iOS에 대한 원격 디버깅을 어떻게 활성화 할 수 있을지 궁금했습니다.

업데이트 : iOS 6 릴리스에서 Safari를 통해 원격 디버깅을 수행 할 수 있습니다 .



답변

최신 정보:

이 답변은 더 이상 최고의 답변 이 아닙니다 . 단체 의 조언을 따르십시오 .

새로운 답변 :

Weinre를 사용하십시오 .

이전 답변 :

이제 원격 디버깅에 Safari를 사용할 수 있습니다. 그러나 iOS 6이 필요합니다.

다음은 http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector 의 빠른 번역입니다 .

  1. USB를 통해 iDevice를 Mac과 연결
  2. Mac에서 Safari를 열고 개발 도구를 활성화하십시오
  3. iDevice에서 : 설정> Safari> 고급으로 이동하여 웹 관리자를 활성화하십시오.
  4. iDevice가있는 웹 사이트로 이동
  5. Mac : 개발자 메뉴를 열고 iDevice에서 사이트를 선택하십시오 (위의 Safari 메뉴에 있음)

Simons가 지적한 것처럼 원격 디버깅 작업을 수행하려면 개인 탐색을 해제해야합니다.

설정> Safari> 개인 브라우징> 끄기


답변

선택한 답변은 Safari에만 해당됩니다. 현재 iOS의 Chrome에서는 실제 원격 디버깅을 수행 할 수 없지만 대부분의 모바일 브라우저와 마찬가지로 간단한 디버깅을 위해 WeInRe 를 사용할 수 있습니다 . 설정하는 것은 약간의 작업이지만 DOM을 검사하고 스타일을 확인하고 DOM을 변경하고 콘솔을 사용할 수 있습니다.

여기에 이미지 설명을 입력하십시오

설정하기:

  • nodejs 설치
  • npm install -g weinre
  • weinre --boundHost -all-
  • http : // {wifi-ip-address} : 8080 /을 열고 대상 스크립트 코드를 복사하십시오.
  • 스크립트 태그를 페이지에 붙여 넣기 (또는 북마크릿 사용)
  • 디버그 클라이언트 사용자 인터페이스에 대한 링크를 클릭하십시오 (http : // {wifi-ip-address} : 8080 / client / # anonymous)
  • 클라이언트 아래에 녹색 선이 표시 되면 브라우저가 연결된 것입니다

북마크릿은 설치하기가 조금 더 번거 롭습니다. 데스크톱 및 모바일 Chrome 모두에서 북마크 동기화를 사용하는 것이 가장 쉽습니다. 로컬 weinre 서버에서 북마크릿 URL을 복사하십시오 (위와 동일). 불행히도 URL로 올바르게 인코딩되지 않아 작동하지 않습니다. JavaScript 콘솔을 열고 다음을 입력하십시오.

copy(encodeURI('')); // paste bookmarklet inside quotes

이제 클립 보드에 URL로 인코딩 된 책갈피가 있어야합니다. 모바일 북마크 아래에 새 북마크에 붙여 넣습니다 . 그것을 weinre 또는 간단한 입력이라고 부릅니다. 모바일과 매우 빠르게 동기화되어야하므로 검사하려는 페이지를로드하십시오. 그런 다음 url-bar에 책갈피 이름을 입력하면 책갈피가 자동 완성 제안으로 표시됩니다. 북마크 코드를 실행하려면 클릭하십시오 🙂

여기에 이미지 설명을 입력하십시오


답변

현재 iOS에서 Chrome을 직접 원격으로 디버깅 할 수 없습니다. Mobile Safari와는 미묘하게 다르게 작동하는 uiWebView를 사용합니다.

몇 가지 옵션이 있습니다.

옵션 1 : Safari 검사기를 사용하여 원격 디버그 모바일 Safari. 문제가 Mobile Safari에서 재생산되는 경우 가장 좋은 방법입니다. 실제로 iOS 시뮬레이터를 사용하는 것이 훨씬 쉽습니다.

옵션 2 : 디버깅을 줄이려면 Weinre를 사용하십시오 . Weinre에는 많은 기능이 없지만 때로는 충분합니다.

옵션 3 : 동일한 기능을하는 적절한 uiWebView를 원격 디버그하십시오.

가장 좋은 방법은 다음과 같습니다. XCode설치 해야합니다 .

  1. github.com/paulirish/iOS-WebView-App으로 이동하여 “Zip 다운로드”또는 복제하십시오.
  2. XCode를 열고 기존 프로젝트를 연 다음 방금 다운로드 한 프로젝트를 선택하십시오.
  3. WebViewAppDelegate.m을 열고 urlString를 테스트하려는 URL로 변경하십시오 .
  4. iOS 시뮬레이터에서 앱을 실행하십시오.
  5. Safari를 열고 개발 메뉴를 열고 iOS 시뮬레이터 를 선택한 다음 웹뷰를 선택하십시오.
  6. Safari Inspector가 이제 uiWebView를 검사합니다.

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오


답변

내가 이해 한 바에 따르면 Chrome은 Android와 같은 Chrome을 완전히 구현하는 대신 iOS의 UIWebView를 사용합니다.


답변

많은 원격 콘솔이 제대로 작동합니다. http://farjs.com 은 내 프로젝트이며 Crome iOS와 관련된 문제를 성공적으로 디버깅 할 수 있었으며 사파리에서는 사용하지 않습니다. (아마도 다른 모든 모바일 브라우저)

문제는 Chrome에서 북마크를 설치할 수 없기 때문에 디버깅 코드를 삽입하는 것이 약간 까다 롭다는 것입니다.

대신 페이지에서 디버깅 할 탭 하나와 farjs.com에서 탭 하나를 열고 “bookmarklet”을 클릭하면됩니다.

bookmarklet JS 코드를 복사하고 디버깅해야 할 페이지가있는 첫 번째 탭으로 돌아간 다음 위치 표시 줄에 bookmarklet 코드를 붙여 넣습니다.

마지막 단계는 Chrome에서 위치 표시 줄의 시작 부분으로 스크롤하여 “javascript :”를 추가하는 것입니다.


답변

나는 와인 처럼 추천합니다. 나는 Vorlon의 UI를 좋아하고 SSL 을 지원 하고 내 응용 프로그램은 HTTPS에 있으며 ngrok, ghostlab 및 vorlon으로 weinre를 시도했지만 vorlon 만 제대로 작동합니다.


답변

나는 그것을 시도하지 않았지만 iOS WebKit 디버그 프록시 (ios_webkit_debug_proxy / iwdp)를 사용하면 UIWebView를 원격으로 디버깅 할 수 있습니다. README.md에서

개발자는 ios_webkit_debug_proxy (일명 iwdp)를 사용 하여 Chrome DevTools UI 및 Chrome 원격 디버깅 프로토콜을 통해 실제 및 시뮬레이션 된 iOS 기기 에서 MobileSafari 및 UIWebViews 를 검사 할 수 있습니다 . DevTools 요청은 Apple의 Remote Web Inspector 서비스 호출로 변환됩니다.