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 서비스 호출로 변환됩니다.

볼론 .JS 는 iOS 또는 다른 클라이언트의 원격 디버깅에 사용할 수 있습니다.

1. 다음을 사용하여 전역으로 설치하십시오. npm i -g vorlon
2. 서버를 사용하여 시작 vorlon
3. 서버가 실행 중이면 http : // localhost : 1337을 엽니 다 . 에서 브라우저에서 을 열어 Vorlon.JS 대시 보드를 확인하십시오.
4. 마지막 단계는이 스크립트 태그를 앱에 추가하여 Vorlon.JS를 활성화하는 것입니다.
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. 연결된 모든 클라이언트 (예 : iPhone, Android)는 Vorlon.JS 대시 보드의 클라이언트 목록에서 사용할 수있게됩니다.

이 방법은 ngrok를 사용하여 localhost에서 실행되지 않는 앱을 ​​디버깅하는 데에도 사용될 수 있습니다 . 참조 https://stackoverflow.com/a/45443203/2073920를 을 참조하십시오.

부인 성명

나는 단지 사용자이고 Vorlon.JS 및 ngrok와 제휴하지 않습니다

또한 '개인 정보 보호 브라우징'을 사용 중지해야합니다.

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

심지어 동일한 기능을 찾고 있으며 현재로서는 아직 구현되지 않았습니다. 그러나 두 가지 옵션을 생각할 수 있지만

1. Chrome과 Safari의 동작이 상당히 동일하다는 것을 알았습니다. Chrome은 Safari에서 지원하는 자이로 스코프 및 기타 관련 이벤트도 지원합니다. 현재 Safari에서 디버그 콘솔을 사용하여 웹 응용 프로그램을 디버깅하고 있습니다 (설정-> Safari).

2. 또한 원격 디버깅 / 검사 및 동기화가 가능한 Adobe Shadow를 사용해보십시오.

HTH.

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect )는 모든 모바일 장치 IOS 및 Android (Windows Phone은 아님)를 디버깅하는 또 다른 방법입니다. 원격 DOM 검사 / 변경에 weinre를 사용합니다. 가장 빠른 방법은 아니지만 Windows에서 작동합니다.

Chromium에는 공개 버그가 있습니다. https://bugs.chromium.org/p/chromium/issues/detail?id=584905

불행하게도 그들은이 일을 위해, WKView에 API를 개방 이후 애플에 의존 어쩌면 디버깅 사파리에서 사용할 수 있습니다.

remotedebug-ios-webkit-adapter를 사용하고 있으며 Windows 10의 Chrome에서 열린 IOS 및 디버거에서 잘 작동합니다.

그것이 하나의 링크를 돕는다면 기쁠 것입니다

참고 : Ghostlab 제작자 Vanamco와는 아무런 관련이 없습니다.

Chrome 관련 문제를 디버깅 할 수 있어야했기 때문에 도움이 될만한 것을 찾기 시작했습니다. 나는 Ghostlab 3 에서 행복하게 돈을 버렸습니다 . 마치 데스크톱에서보고있는 것처럼 Chrome 및 Safari 모바일 브라우저를 테스트 할 수 있습니다. 디버깅하려는 모든 장치에 사용할 LAN 주소 만 제공합니다. 해당 주소를 사용하는 각 응용 프로그램은 Ghostlab의 목록에 나타납니다.

추천.

Safari Desktop iOS 열기

개발-> 반응 형 디자인 모드

기기에서 "기타"를 클릭하십시오

붙여 넣기 : Mozilla / 5.0 (iPad, Mac OS X와 ​​같은 CPU OS 10_2_1) AppleWebKit / 602.1.50 (Gcko와 같은 KHTML) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Safari 검사 도구를 사용하십시오.

면책 조항 : BrowserStack에서 일합니다. ^{[확인] 게시 가능 여부 ( 회사에서 근무중인 제품을 제안 할 수 있습니까? )}

iOS에서 Safari를 디버깅하십시오 (현재 Chrome은 아님). 자세한 내용은 미리 읽으십시오.

어떻게 작동합니까?

• BrowserStack에서 실제 장치 (에뮬레이터가 있지만 실제 장치에서 세션을 시작해야 함)에서 세션을 시작해야합니다. 예 : iPhone 6S-Safari / Chrome (Chrome 용 devtools는 없지만 로드맵에 있음)
• URL을 입력하십시오
• DevTools를 트리거하여 BrowserStacks 원격 장치에서 열린 웹 페이지를 검사 할 수 있습니다. 아래에서 같은 화면을 공유했습니다.

실제 전화에서 DevTools 사용

데스크톱 브라우저 devtools가 작동하는 것처럼 요소 위에 마우스를 올려 놓고 HTML을 편집하고 CSS를 편집하십시오.

DevTools를 사용하여 실제 전화에서 JavaScript 실행

Console탭으로 전환하고 JavaScript 코드를 실행 console.log()하고 출력을 확인하십시오 .

네트워크 탭, 요청 헤더, 응답 등 확인 ...

BrowserStack에서 DevTools를 지원합니까?

• DevTools는 다음에서 사용할 수 있습니다.

  • 실제 기기-iOS-Safari (iOS Chrome 용 DevTools는 로드맵에 있습니다)
  • 실제 기기-Android-Chrome (현재 Android 기기에서만 Chrome 만 사용 가능)

• 클라이언트 브라우저는 Chrome 또는 Firefox 여야합니다. 즉, BrowserStack Real Device DevTools를 사용하려면 MacOSX 또는 Windows에서 Chrome 또는 Firefox 브라우저를 사용해야합니다.

참고 : 모든 실제 장치에서 테스트 할 계획을 무료로 구입해야합니다. 무료 사용자에게는 몇 가지 Real Android 장치 (태블릿 포함) 및 몇 가지 Real iOS 장치 (태블릿 포함)가 제공됩니다. 또한 Real Devices 라는 단어 는 에뮬레이터를 제공하기 때문에 강조 합니다.

이에 대한 자세한 내용은 모바일 기능 페이지의 DevTools 섹션을 참조하십시오 .