Windows 및 Mac에서의 iOS 웹 디버깅

2016년 8월 24일, Kenneth Auchenberg 작성

업데이트

이제 iOS 웹 디버거는 더 이상 사용되지 않으며, Visual Studio Code와 함께 RemoteDebug iOS WebKit Adapter를 사용할 것을 권장합니다. 자세한 내용은 RemoteDebug iOS WebKit Adapter에 대한 소개 가이드를 참조하세요.

소개

iOS 기기에서 실행되는 웹사이트를 디버깅하는 것은 일부 개발자에게만 가능합니다. 예를 들어, Safari 웹 검사기(Safari DevTools)를 사용하려면 macOS 사용자에게만 제공되는 데스크톱 Safari 인스턴스가 필요합니다. 오늘, 새로운 Visual Studio Code용 iOS 웹 디버거를 통해 모바일 웹 개발자가 편집기에서 직접 iOS 기기에서 실행되는 JavaScript를 디버깅할 수 있도록 지원합니다. 이 디버그 확장은 **Mac 및 Windows** 모두에서 작동합니다.

Demo

새로운 iOS 웹 디버거는 2월에 소개한 Chrome 디버거와 매우 유사하게 작동합니다. 내부적으로는 VS Code 내에서 실행되는 동일한 디버거이며, 오픈소스 vscode-chrome-debug-core 라이브러리로 구동됩니다. 디버깅 라이브러리와 iOS 기기 간의 연결을 위해, WebKit 원격 디버깅 프로토콜을 통해 USB를 통해 iOS 기기와 통신을 가능하게 하는 두 개의 오픈소스 프로젝트인 ios-webkit-debug-proxy와 ios-webkit-debug-proxy-win32를 활용합니다. 이 프로토콜은 스크립트 디버깅 API의 Chrome 디버깅 프로토콜과 호환되므로 추가적인 매핑 로직 없이도 디버거가 작동합니다.

에뮬레이트된 포트 포워딩을 통한 간편한 로컬 개발 활성화

로컬에서 실행되는 웹사이트를 개발할 때, 일반적으로 localhost에서 실행되는 HTTP 서버인 로컬 개발 서버에 모바일 기기 액세스를 활성화하는 것은 번거로운 과정입니다. 이를 더 쉽게 만들기 위해 Android와 같은 플랫폼은 네이티브로 포트 포워딩을 지원하지만, iOS는 이를 지원하지 않습니다.

따라서 `tunnelPort` 속성에 지정된 로컬 컴퓨터에서 공개 인터넷으로의 HTTP 터널을 백그라운드에서 생성하는 localtunnel 인스턴스를 시작하는 옵션을 추가하여 포트 포워딩을 에뮬레이트하는 방법을 찾았습니다. 이 HTTP 터널은 iOS 기기에서 다른 공개 웹사이트처럼 로컬 개발 서버에 액세스하는 데 사용됩니다.

Demo

시작하기

시작하려면 **확장** 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))를 엽니다. 확장 목록이 나타나면 "ios"를 입력하여 목록을 필터링하고 Debugger for iOS Web 확장을 설치합니다. 그런 다음 README 여기에서 자세히 설명하는 launch-configuration 파일을 생성합니다.

지원 기능

이번 릴리스에서는 다음과 같은 기능을 지원합니다.

소스 맵이 활성화된 경우 소스 파일에 대한 중단점 설정
단계
스택 트레이스
지역 변수 창
eval 스크립트, 스크립트 태그 및 동적으로 추가된 스크립트 디버깅
감시
콘솔
로컬 컴퓨터에서 HTTP 터널을 통한 가상 포트 포워딩.

공개적으로 실험

새로운 iOS 웹 디버거는 **공개 실험**이며, 이는 **iOS에 대한 통합 스크립트 디버깅**이 개발자에게 유용한지 알아보기 위해 공개적으로 출시된다는 것을 의미하므로, 여러분의 의견을 알려주시기 바랍니다.

문제가 있거나 개선 사항에 대한 아이디어가 있다면, Twitter 또는 GitHub에서 언제든지 문의해 주세요.

–

Kenneth Auchenberg, Program Manager, JavaScript Diagnostics