iPadOS에서 브라우저 개발자 도구 사용하기

아이패드 프로를 메인 컴퓨터로 사용하면서 의외로 맥북 없이도 한달 정도 크게 문제 없이 쓸 수 있었습니다. 다만 개인적인 작업 흐름에서 가장 크게 문제를 겪었던 부분이 딱 하나 있었는데, 브라우저 개발자 도구였습니다.

다른 경우 앱이 부족하면 대체 앱을 찾아보거나, 아이패드의 작업 흐름이 불편하면 단축어를 이용해서 해결하거나 여러가지 대체 방법이 있지만 이 브라우저 개발자 도구는 아무래도 답이 없었습니다. iPadOS에서는 브라우저 선택권이 “사파리”와 “사파리를 포장한 브라우저” 두 개 밖에 없는데다 그나마도 확장 기능이 상당히 제한적이기 때문입니다.

회사 일 뿐 아니더라도 개인적으로도 가끔씩 브라우저 개발자 도구를 열어서 분석할 일이 있는데(예를 들어 이 블로그 디자인 편집 등) 아이패드 프로에서는 이 부분은 아예 방법이 없어서 결국 맥북이나 PC를 통해 해결할 수 밖에 없었습니다.

물론 iPadOS 사파리에도 제한적이지만 확장 기능을 설치할 수 있기 때문에 비슷한 앱 들이 있긴 합니다. 하지만 대부분 제대로 동작하지 않거나 제대로 사용하기 어려웠습니다. 특히 매직키보드나 마우스를 연결한 환경을 제대로 지원하는 앱을 찾기 어려웠습니다.

하지만 여러가지 테스트했던 앱 중 가장 쓸만했던 개발자 도구를 하나 소개합니다.

Web Inspector

Web inspector 는 사파리 브라우저 확장 기능으로 사파리에 브라우저 개발자 도구를 추가해주는 앱입니다. 가장 큰 장점은 무료로 설치할 수 있다는 거죠.

앱을 설치하고 설정 > 사파리 브라우저 설정에서 확장 기능을 활성화해줘야 합니다.

기능을 활성화한 뒤 브라우저에서 읽기 도구에서 “Web Inspector” 를 선택한 뒤 “모든 사이트에 허용”을 해주면 이후부터는 i 아이콘을 클릭해 실행할 수 있습니다.

실행하면 아래와 같이 기본 사파리 브라우저에서 개발자 도구로 DOM을 보거나 콘솔, 네트워크, 리소스 등 브라우저 개발자 도구의 기본적인 기능을 사용할 수 있습니다. 검사 기능을 이용해 사이트의 특정 코드 부분을 하이라이트 하는 것도 가능합니다.

기본적으로 마우스 + 키보드 사용 보다는 터치스크린에 최적화되어있습니다. 그래서 매직키보드나 트랙패드 같은 별도의 악세사리를 연결하지 않아도 아이패드 본체에서 터치스크린만으로 모든 기능을 사용할 수 있습니다.

예를 들어 콘솔 입력할 때도 입력 창에서 바로 치는게 아니라 입력 영역을 크게 확대해서 아이패드의 터치스크린 키보드로도 충분히 입력 할 수 있게 만들어져 있습니다.

터치스크린 키보드가 가리지 않을 정도로 입력 창이 커진다
Execute를 눌러서 코드 실행

DOM 검사 기능도 터치스크린으로 사용할 수 있습니다. 검사 기능을 누른 다음 확인하고자 하는 영역을 터치스크린으로 선택하여 하이라이트할 수 있습니다. 이 작업도 터치만으로도 작업 가능합니다.

다만, 그렇다보니 검사 기능에서 아쉬운 점이 있는데 트랙패드나 마우스를 지원하지 않는다는겁니다. PC 개발자 도구에서는 마우스 오버를 통해 요소를 하이라이트 할 수 있는데 이 앱은 그 기능은 지원하지 않습니다. 마우스로 해당 영역을 클릭해도 동작하지 않습니다. 터치스크린을 통해 검사하고 싶은 요소를 딱 짚어야만 합니다.

그리고 도구가 차지하는 영역이 너무 커서 사이트 요소가 잘 보이지 않는다는 것도 단점인데, 이 부분은 크기 조절도 불가능합니다. 어차피 아이패드의 화면 영역이 작으니 어쩔 수 없겠지만 말이죠.

여러모로 터치스크린에 최적화된 앱이라는 장점이 있지만 전통적인 컴퓨터처럼 쓰려고 할 때는 오히려 마우스와 키보드를 제대로 지원하지 않는다는게 단점인 앱입니다. 하지만 iPadOS 에서 기본 사파리 브라우저를 통해 개발자 도구를 사용할 수 있다는 것만으로도 장점은 충분한 것 같습니다.

덧. 유료 앱 중에는 이렇게 자체 브라우저에 개발자 도구를 내장한 Inspect Browser 라는 앱도 있습니다.(9,900원) 아직 써보진 않았습니다. 이건 마우스 호버를 지원할지 궁금하네요.