PC로 iPad Safari 디버그
ipad의 Safari에서 웹 사이트를 테스트하고 싶습니다. 다른 PC 만 있습니다. 모바일 Chrome에서 ADB와 같은 원격 디버깅을 수행 할 수있는 방법이 있습니까? StackOverflow에서 검색했는데 Adobe Edge Inspect CC가있는 것 같지만 이것이 좋은 선택인지 모르겠습니다.
감사!
원격 디버깅시 Windows에서 Mac의 Safari 디버거 대신 Telerik AppBuilder (Windows 클라이언트)를 사용하는 옵션을 사용해 볼 수 있습니다. 아래 링크에 단계에 대한 멋진 블로그 게시물이 있습니다. 스크린 샷도 있고 텍스트가 많기 때문에 정보를 다시 게시하지 않고 싶습니다. 그러나 기본적으로 앱을 설치하고 열고 USB를 통해 장치를 연결하면 앱에서 찾아서 개발자 도구 / 디버거를 열 수 있습니다. 비공개 웹 사이트의 경우 게시물에 문서화 된 일부 방화벽 구성을 사용하여 포트 80을 열어야합니다.
이 도구는 라이선스가 필요하거나 나중에 기본 버전이되는 평가판을 사용할 수 있습니다. 기본 버전은 여전히 디버깅을 허용 할 것이라고 생각합니다. 직접 시도해 보겠습니다.
이러한 iOS 앱도 사용해 볼 수 있으며 iTunes App Store에서 찾을 수 있습니다. 그들은 모바일 Safari가 제공하지 않는 내장 개발자 도구 기능 (iOS에서 원격 디버그없이 바로)을 제공합니다.
MIH 도구-기본 버전 https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8
HTTPWatch 기본 https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
나는 그들에게 시도해 보았고 완전한 모바일 사파리 호환성을 목표로 삼을 필요가 없다면 적어도 iOS에서 얻는 모바일 사파리보다 낫습니다. 이러한 앱의 프로 / 유료 에디션이 더 많은 / 더 나은 기능을 제공한다고 생각합니다.
2018 업데이트 :
원래 게시물 이후로 블로그 게시물 이 종료 되고 Telerik App Builder가 중단 되고 더 이상 제공되지 않습니다. 독자가이 답변 게시물을 따르는 사용자 댓글을 읽지 않는 경우이를 알리기 위해이 업데이트를 추가합니다. 블로그 게시물에 대해서는 여전히 관심이있는 분들을 위해 웹 캐시 된 사본이 있습니다. 블로그에 관해서는 블로그를 시작한 회사가 문을 닫은 것 같습니다.
기회가 생기면 앱 빌더의 사본이 저장되어 있는지 확인하여 여전히 사용에 관심이있는 사람들을 위해 온라인에 게시 할 수 있도록 블로그 게시물의 캐시 된 다른 사본과 함께 게시 할 수 있습니다.
2017 년 6 월 24 일 업데이트 및 테스트
Windows 8 이상 에서 Chrome 사용 :
- Node 다운로드 및 설치
ITunes를 다운로드하여 설치하고 장치에 연결하십시오. (인증을 받으려면 팝업이 iPad에 표시되어야합니다). iPad에서 웹 속성을 허용해야합니다.
원격 웹킷 어댑터 다운로드 및 설치
Powershell 사용 (관리자 권한) :
npm install remotedebug-ios-webkit-adapter -g
- 어댑터 실행 :
Powershell 사용 (관리자 권한) :
remotedebug_ios_webkit_adapter --port=9000
유사한 출력이 표시되어야합니다.
C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000 remotedebug-ios-webkit-adapter is listening on port 9000 iosAdapter.getTargets ...
- Chrome을 열고 다음 링크로 이동하십시오.
chrome : // inspect / # devices
- "네트워크 대상 검색"옆에있는 구성을 클릭하고 다음을 추가합니다. localhost : 9000
Safari에서 디버그하려는 웹 페이지가 열려 있는지 확인하십시오. 원격 대상 아래의 크롬 검사기 페이지에서 볼 수 있습니다.
@skaurus 덕분 에 iOS 11을위한 추가 단계
iOS 9 이상이 설치된 Windows 8 이상 컴퓨터에서 가장 쉬운 디버깅 방법 은 Lemmy4555의 답변 을 참조하십시오 . 해당 답변 및 기타 출처의 정보를 사용하여 내 블로그 게시물 을 업데이트 하고 화면 공유 도 기록했습니다 . 아래 방법은 필요한 경우 iOS 8 이하에서 계속 작동합니다.
실제로 Windows 컴퓨터에서 Firefox를 사용하여 iOS의 Safari에서 웹 사이트를 디버그하는 매우 쉬운 방법이 있습니다.
참고 : Ryan은 iOS 8 이하에서만 작동 할 수 있다고 아래 댓글에 썼습니다. 확인할 수 없지만 알고 있습니다.
이에 대한 자세한 블로그 게시물을 작성 했지만 다음은 주요 내용입니다.
- iTunes를 설치하여 함께 제공되는 "Apple 모바일 장치 지원"및 "Apple 응용 프로그램 지원"응용 프로그램을 받으십시오. (원하는 경우 나중에 iTunes를 제거하십시오)
- USB를 통해 iOS 장치를 연결합니다.
- iOS에서 웹 검사기 를 활성화합니다 (iOS 6 이상에서 사용 가능).
- iOS 기기에서 Safari를 열고 웹 사이트를 검색합니다.
- Firefox Developer Edition (모든 버전) 또는 Firefox 37 이상 (모든 채널)을 사용하는 경우 Windows 컴퓨터에서 Firefox를 열고 Shift + F8 을 눌러 WebIDE를 엽니 다. 여기에는 필요한 Valance 추가 기능 이 포함되어야합니다 .
- 어떤 이유로 ios-webkit-debug-proxy-win32 프로그램을 다운로드하여 실행할 때까지 iOS 장치에 연결할 수 없었 습니다. 빈 명령 프롬프트가 열리지 만 WebIDE를 연 후 다시 연결 한 후 연결을 끊었다가 다시 연결했고 Safari에서 연 웹 사이트에 대한 디버그 정보가 표시되었습니다. 하지만 다른 사용자가 방화벽에 예외를 추가 한 다음 연결을 끊거나 다시 연결해야하므로이 작업을 수행 할 필요가 없습니다.
사용 가능한 디버그 정보는 Chrome 개발자 도구만큼 완전하지는 않지만 (특히 "네트워킹"탭이 없음) 콘솔에서 진행중인 작업을 볼 수있을만큼 충분했습니다.
이 질문은 4 년 이상 전 이었지만 위에서 언급되지 않은 것처럼 보이는 플랫폼 독립적 인 다른 옵션을 언급 할 가치가 있다고 생각합니다.
VConsole
It's a JavaScript that you can inject into your page(s) which will overwrite all native console output and show it as an overlay on top of your page content, in a level of detail that is almost as good as Google Chrome's Developer Tools.
Runs well on iOS Safari, as well as on other mobile browsers - for as long as JavaScript is enabled in the browser.
How to install: https://www.npmjs.com/package/vconsole
You will need NPM tools to install it, but not actually required to use NPM to build your project. You can simply install VConsole somewhere in a separate folder, and just copy-paste vconsole.min.js from it.
Once you inject it into your page, will look like this:
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>
Visually is very appealing, you will see green button in lower-right corner of your page on your mobile/desktop browser, which will open console overlay.
Very neat!
Of course, it does not provide you with ability to select an element, see calculated css etc., but if you are looking for console output and some network report, this one is really easy to use.
I use PrePros for CSS preprocessing and it has a built in server for mobile debugging and web inspector. But this is only good for local sites even still...
In my experience it is often not an issue with mobile Safari only but Safari in general. In these cases it can help to try the normal Safari (for Windows) and see if the bugs appear there. If so, it's much easier to debug something by this way.
PC에서 시도한 적이 없지만 http : // [DEVICE_IP_ADDRESS] : 9999로 이동하여 디버그 할 수 있습니다.
참고 URL : https://stackoverflow.com/questions/20408110/debug-ipad-safari-with-a-pc
'developer tip' 카테고리의 다른 글
| 속성 트리를 사용하여 Boost에서 JSON 배열 만들기 (0) | 2020.11.14 |
|---|---|
| ffmpeg를 사용하여 비디오 중앙에 투명한 워터 마크를 추가하는 방법은 무엇입니까? (0) | 2020.11.14 |
| 동적 ArrayList 항목 유형이있는 Gson TypeToken (0) | 2020.11.14 |
| Java 8에 Scala의 Either와 동등한 것이 있습니까? (0) | 2020.11.14 |
| Homebrew는 nvm을 설치하지만 나중에 nvm을 찾을 수 없습니까? (0) | 2020.11.14 |