[Safari] 내 iPhone 브라우저 Inspect하기

 

https://spin.atomicobject.com/2018/02/14/inspect-safari-mobile-device/

 

Overview

 

iPhone X 등 notch가 있는 디바이스들에서 웹뷰의 Element를 Inspect 해야 할 일이 생겼었습니다. 최신 Chrome브라우저(포스팅 날짜 기준 Version 87.0.4280.88 (Official Build) (x86_64)) 에서 기본적으로 iPhoneX에 대한 디바이스 시뮬레이션을 제공하지만, notch 등 safe-area가 제공된 환경이 아닌, 스크린 크기만 맞춰진 환경을 제공하기 때문에 safe-area에 대한 테스트가 어렵다는 단점이 있습니다.

 

 

따라서 디바이스 환경을 재현할 수 있는 다른 환경이 필요하게 되었고, notch가 있는 iPhone12 mini에서 테스트할 수 있는 환경을 찾아보게 되었습니다. 물론 디바이스가 없는 경우 Xcode에서 제공하는 시뮬레이터를 통해 직접 로컬 호스트에 연결할 수도 있습니다. (이 부분은 추후 포스팅 예정입니다.)

 

 

이번 포스팅에서는 로컬머신(여기서는 데스크톱)에서 빌드한 HTML 파일을 내 기기(iPhone)에서 다운로드한 후에, 디바이스에 나타나는 HTML 엘리먼트들을 로컬 머신에서 Inspect하는 방법을 알아보려고 합니다.

 

 

iPhone 5/SE에 대해서는 디바이스 환경을 제공한다.

 

 

iPhoneX는 notch등의 디바이스 환경을 제공하지 않는다.

 

Environment

위 포스팅에서는 Mac mini (Desktop), iPhone12 mini(Device), Nextjs(build file serve), Safari(browser)가 사용되었습니다.

 

 

로컬 머신에서 Web Project Serve

 

우선 React, Angular, Nextjs 등의 프레임워크를 사용해서 로컬 호스트의 특정 포트에서 정적 HTML 파일을 제공해야 합니다. 물론 이러한 프레임워크나 라이브러리를 사용하지 않고 직접 localhost에 정적 파일을 제공하는 방법도 있지만, 일단은 기본적으로 yarn start등의 패키지 명령어를 통해 로컬 호스트에 정적 파일을 제공하는 편이 간단합니다.

 

자신의 로컬 머신에서 localhost:3000 혹은 (프레임워크에서 기본적으로 제공하는 포트)를 통해 정적 파일이 제공되는 것을 확인했으면 다음으로 넘어가면 됩니다. (이 포스팅에서는 Nextjs로 구성된 프로젝트를 사용하였습니다)

 

 

 

Desktop (Mac)설정

 

우선 Safari를 통해 inspect 하는 방법에 관한 글이므로 데스크톱에서 Safari를 켭니다. 화면 제일 상단 상태바에서 Safari를 누르고 Preference 탭을 클릭합니다.

 

 

 

Advanced탭에 들어가서 제일 하단 체크박스 (Show Develop menu in menu bar)를 체크해 줍니다. 체크하고 나면 데스크탑 화면 제일 상단 상태바에 Develop 탭이 나타납니다.

 

 

 

 

이제 이 Develop탭을 클릭한 후에 나타나는 본인의 디바이스를 선택해 브라우저를 켜주면 됩니다. (그전에 디바이스에서도 몇 가지 설정 단계를 거쳐야 합니다. 디바이스 설정은 하단에서 계속됩니다.)

 

Device (iPhone) 설정

데스크톱 설정을 마친 뒤에는 데스크톱에서 디바이스의 Safari 브라우저를 인스펙터 할 수 있도록 설정을 허용해주어야 합니다. 다음과 같이 Setting -> Safari로 들어간 후에 화면 제일 하단의 Advanced를 클릭합니다. 다음과 같은 화면이 나오는데, 여기서 Web Inspector설정을 켜줍니다. (Javascript는 기본으로 켜져 있습니다.)

 

 

 

Inspect

위의 두 설정을 모두 마치고 난 후, 디바이스에서 Safari를 통해 내 로컬 호스트에 접속합니다. 내 디바이스를 데스크탑에 연결하고 상단 메뉴바의 Develop 탭을 클릭하면 다음과 같은 화면이 나타나는 것을 확인할 수 있습니다. 화면에 나타난 로컬호스트 주소에 연결하면 Safari의 Inspect창이 나타나게 되고, Inspect화면에서 수정한 사항들이 내 디바이스의 Safari에 반영되며, CSS, DOM 등의 수정 사항을 내 디바이스에 즉시 반영할 수 있습니다.