모바일에서 개발자 콘솔 사용하기

회사에서 사파리에서만 발생하는 버그 리포트가 들어왔다. (사파리는 웹 개발자의 적!) 하지만 나는 윈도우를 사용 중이고, 사파리는 맥에서만 사용할 수 있다. 다행히 아이폰을 사용 중이었고 ios 사파리에서도 똑같이 재현되었다.

추억의 ngrok으로 개발 서버를 아이폰으로 확인해 볼 수는 있는데 이제 개발자 도구를 어떻게 확인하지? 검색을 해보니 죄다 맥북이 필요한 방법들이다. (애플은 개발자의 적!)

그러다가 문득 옛날에 어떤 앱에서 우측 하단에 버튼이 생겨서 개발자 도구를 열 수 있었던 기억이 났다. 메뉴를 나갔다 다시 들어가니까 버튼이 사라졌지만... (지금 생각해 보면 개발자가 실수로 개발 중인 코드를 라이브에 배포해 버렸던 것 같다ㅋㅋㅋ)

그 기억을 더듬어서 라이브러리를 찾아보니 두 가지가 나왔다.

vConsole

https://github.com/Tencent/vConsole

GitHub - Tencent/vConsole: A lightweight, extendable front-end developer tool for mobile web page.

내 기억 속의 라이브러리이다. 텐센트라는 대기업에서 만들었다.

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  var vConsole = new window.VConsole();
</script>

Eruda

https://github.com/liriliri/eruda

GitHub - liriliri/eruda: Console for mobile browsers

나중에 더 찾아보니 이 친구도 나왔다. 디자인적으로 보나 기능적으로 보나 이 친구가 좀 더 좋은 것 같다.

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

 

저 때 당시에는 vConsole을 사용했었고 덕분에 오류가 나는 부분을 찾을 수 있었다. 오류의 원인은 (비교적) 최신 문법을 사용한 게 화근이었다... ???: 사파리는 모던 브라우저가 아닙니다!