[Web] 개발자콘솔 eruda, vconsole

 

개발자콘솔 eruda, vconsole을 소개합니다.

 

web을 개발하다보면 개발자모드에 진입해서 element, source, console, network 등 상태정보를 확인하곤 합니다. 이는 PC 디바이스환경에선 간단한 일이지만 Mobile 디바이스에서는 어려운일입니다. 이를 도와주는 eruda, vconsole 라이브러리를 소개합니다.

 

이 두 라이브러리들은 개발자모드에 진입하기 어려운 환경에서도 개발자도구를 볼 수 있도록 지원합니다. 특히 모바일 환경에서 유용하게 사용됩니다.

 

 

https://github.com/Tencent/vConsole

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

 

 

https://github.com/liriliri/eruda

GitHub - liriliri/eruda: Console for mobile browsers

 

 

실행도 매우 간단한데요. cdn 혹은 install한 node_modules의 경로의 스크립트를 호출하고 간단히 스크립트를 한줄 실행하면 됩니다. vconsole을 cdn으로 사용하는 방법을 보겠습니다.

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole();
</script>

 

 

다음 두 라이브러리는 웹애플리케이션위에 element 레이어를 추가해서 console 화면을 제공하는 것이기 때문에 웹애플리케이션과 충돌이 없는지 반드시 확인해야합니다. (eruda는 개인적으로 개발하는 앱에서 실행해보니 스크롤이 제대로 동작하지 않는 문제가 발생했었습니다. 이는 개발환경에 따라 다를 수 있습니다.)

 

 

로컬환경의 서버를 remote에서 접속할 수 있도록 도와주는 ngrok와 같이 사용한다면 모바일 환경에서 개발을 한결 수월하게 도와줄 것 같네요.  그럼 모두 즐개발하세요. : )