Mac에서 iOS Chrome 디버깅하기 (feat. Simulator)
안녕하세요.
원티드 프론트엔드팀의 임성현입니다.
Mac에서 iOS의 Safari 브라우저를 디버깅하는 방법은 다양합니다. 실기기를 Mac과 연결하여 Safari Inspector를 통한 원격 디버깅, 마찬가지로 Simulator로 iOS를 실행해 Safari로 디버깅하는 방법 등이 있습니다.
하지만, iOS의 Chrome 브라우저를 디버깅하고 싶을땐 어떻게 해야할까요?
이번에 다룰 주제는 Mac OS에서 Simulator로 실행한 iOS의 Chrome 브라우저를 디버깅하는 방법입니다. 한국인이 좋아하는 속도로 빠르게 말씀드리자면 “ X-Code에 Chromium을 빌드하여 Safari 브라우저의 Inspector로 디버깅! “ 입니다.
목차는 다음과 같습니다.
- 1장. 작업 배경
- 2장. 시도했던 방법들
- 3장. X-Code에 Chromium 빌드하기
🗣 1장. 작업 배경
어느 날, 아이폰의 특정 iOS 버전(14.5)에서 크롬 브라우저로 접속한 원티드 페이지의 특정 기능에 버그가 발생하여 이슈라이징 되었습니다.
iOS의 다른 버전에서는 해당 이슈가 재현되지 않았고, 14.5 버전의 iOS에서 실행한 크롬으로 접속한 원티드 페이지에서 특정 버튼을 눌렀을때, 네트워크 통신이 이루어지지 않았습니다. 로직상에 문제는 없어보였고, 우선 버튼을 눌렀을 때 어떠한 일이 일어나고 있는지 원인을 분석하는 것이 급선무였습니다.
웹을 디버깅하기 위해 개발자도구를 사용한 원격 디버깅이 필요했습니다.
여기에서 ’Mac OS에서 iOS의 크롬은 도대체 어떻게 디버깅 할 수 있을까’라는 난관에 봉착하게 되었죠.😱
🛠 2장. 시도했던 방법들
제가 시도했던 방법들은 다음과 같습니다.
- Chrome://inspect를 통한 디버깅
크롬에서 지원하는 inspector로 모바일에서 사용이 가능합니다.
모바일에서 해당 탭을 켜놓고 로깅을 시작한 뒤, 검사하고자하는 탭으로 돌아가서 액션을 하고 다시 inspector로 돌아오면 로그가 찍혀있는 것을 확인할 수 있습니다.
하지만, 기능이 매우 단순해서 제한적입니다.
특히 element의 확인은 불가능합니다. - How to debug an issue in Chrome for iOS using remote debugging
리모트 디버깅 방법에 대해 소개한 글입니다. 제목을 보면 iOS의 크롬을 디버깅하는 아주 멋진 방법을 소개해줄 것 같지만, Mac의 Chrome Devtool을 이용해 iOS의 Safari를 디버깅하는 방법에 대해 소개합니다…(낚였,,.) - X-Code의 Simulator
아시다시피, Simulator로 실행한 iOS엔 App Store가 없고 App을 다운로드받을 수 없습니다. X-Code에 직접 앱을 빌드하여 실행해야합니다.
‘ 그럼 Chromium을 X-Code 상에 빌드하면 Simulator에서도 크롬을 사용할 수 있지않을까? ’ 라고 생각하여 관련 자료를 찾아보았습니다.
💡 3장. X-Code에 Chromium 빌드하기
다음은 Google에서 제공한 Checking out and building Chromium for iOS 문서와 참고한 블로그를 토대로 X-Code에 Chromium을 빌드하는 방법입니다.
이 방법은 세 가지를 요구합니다.
1. X-Code Version 12.2 이상
2. JDK의 Latest Version (클로저 컴파일러에 사용)
3. 인내심 ☕️ + 약 100GB의 하드 용량 👀
1. depot_tools 설치
Chromium을 설치하기 위해선 depot_tools가 필요합니다.
depot_tools란 Chromium을 설치하는데 필요한 package 들과 script들의 모음입니다. depot_tools를 담을 적당한 폴더를 만들고 클론합니다.
(만든 폴더의 경로를 기억합니다.)
$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.gitdepot_tools에서 사용하는 PATH 환경변수를 설정합니다.
$ export PATH="$PATH:/{경로}/depot_tools"이제 depot_tools의 툴을 이용하여 Chromium의 코드를 가져올 준비가 되었습니다.
2. Chromium 다운로드
코드를 받을 폴더를 생성하고 이동합니다.
$ mkdir chromium && cd chromiumdepot_tools의 fetch툴을 이용해 코드를 내려받습니다.
(fetch를 실행할 수 없다면 PATH 환경변수를 확인해주세요)
$ fetch ios이 과정은 30분에서 최대 1시간까지 소요될 수 있습니다.
인내심을 갖고 기다립시다. ☕️
fetch가 끝났으면 src 디렉토리로 이동합니다.
$ cd src3. Chromium 빌드
out/build/all.xcodeproj 파일을 생성하기 위해서 다음 코드를 src 디렉토리에서 실행합니다.
& ios/build/tools/setup-gn.pychromium은 Ninja도구를 이용해서 코드를 빌드합니다. Ninja를 이용한 빌드를 하기 위해서는 depot_tools의 gn 스크립트를 이용합니다.
( gn : Generates Ninja build files의 줄임)
gn을 이용해서 build를 위한 폴더를 생성합니다.
& gn gen out/{폴더이름}빌드 폴더를 생성하고 빌드 설정을 지정할 수도 있습니다.
이 중 enable_nacl 속성은 속도향상에 도움이 됩니다.
(왜 속도를 향상시켜야하는지 빌드를 해보시면 알 수 있습니다…😱)
$ gn args out/{폴더이름}// 편집기기 실행된 후
is_debug=true // 디버깅을 할 경우에는 true
symbol_level=1 // 디버깅에서 사용할 symbol level is_component_build=true // 부분 빌드 허용
enable_nacl=false // native client 기능을 제거 (속도 향상을 위해)
저희는 딱히 xcode로 코드를 타이핑할 일이 없기 때문에 빌드 설정 자체를 스킵해도 지장이 없습니다.
마지막으로 빌드를 수행합니다.
( 주의: JDK가 설치되어있지 않으면 빌드에서 에러가 발생합니다. )
& autoninja -C out/{폴더이름} gn_all이 과정은 최소 3시간, 최대 6시간까지 걸릴 수 있습니다.
인내심을 갖고 기다립시다. ☕☕☕️️️
4. 실행
빌드가 모두 끝났으면 xcode를 실행하고 open project로 위에서 만든 all.xcodeproj 파일을 열어주세요.
scheme 설정으로 chrome > {실행하고자 하는 기기} 를 설정하고 실행합니다.
Simulator가 실행되고 Chromium 앱이 설치되어있는 것을 볼 수 있습니다.
이제 safari의 개발자도구를 이용하여 Simulator의 chromium을 디버깅하는 것이 가능해졌습니다. 👏
현재 원티드에서는 다양한 포지션을 채용하고 있습니다.
