Leon Chaewon Kong's dev blog

vConsole - 모바일 웹 디버깅이 쉬워진다

15 Oct 2020

요즘은 대부분의 웹 서비스가 모바일 기기 비중이 더 높을 것이라고 생각합니다. “반응형 웹”은 필수처럼 되었고, “모바일 퍼스트 디자인”이라는 말이 공공연하게 받아들여질 정도죠.

이제 웹 개발자는 IE, 크롬, 사파리에서 확인하는 것만으론 부족합니다. 모바일, 태블릿 등 기기별로 서로 상이한 사이즈, 더욱 다양해진 브라우저를 고려해 개발해야 합니다.

점점 흔해지는 웹뷰에서의 디버깅 역시 고통스러운 경우가 많죠.

텐센트에서 개발한 오픈소스인 vConsole을 이용하면 웹 프론트엔드에서의 디버깅이 보다 편리해 집니다. 웹뷰나 모바일웹에서 버튼만 클릭하면 콘솔탭이 올라오고, 로그, 네트워크, 스토리지 등을 확인할 수 있게 됩니다.

TL;DR

vConsole 쓰세요.

vConsole은 모바일 기기 내 웹을 위한 크롬 개발자 도구와 유사합니다.
console log, 네트워크, 쿠키, 세션/로컬 스토리지를 모두 모바일웹에서 확인할 수 있습니다.

제공되는 기능

Demo를 경험하고 싶다면 https://github.com/Tencent/vConsole를 확인해 주세요.

버튼 콘솔창
vconsole-button-view vconsole-console-view

왼쪽 사진에 vConsole이라는 초록색 버튼 보이시나요?

저 버튼을 클릭하면 오른쪽처럼 아래에서 콘솔창이 드르륵 올라옵니다.
참고로 vConsole 버튼은 손가락으로 탭해 원하는 위치로 이동시킬 수 있습니다.
배경의 컨텐츠가 가려져 불편하다면 드래그해 원하는 위치로 버튼을 이동시킬 수 있는 것이죠.



다음으로 사용법을 알아보겠습니다.

설치

$ npm install vconsole

일반적인 사용법

만약 순수 JavaScript에서 사용한다면 아래처럼 사용하면 된다고 하네요.

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

참고링크: vConsole - Usage

저는 React를 사용하고 있기 때문에, React에서의 사용법을 알아보겠습니다.

React에서의 사용법

우선 사용할 때는 이렇게 import하면 됩니다. TypeScript를 쓰시는 분만 VConsoleConfig를 import해 주세요.

import vConsole, { VConsoleConfig } from 'vconsole';


여기서 default로 import되는 vConsole의 경우 생성자함수입니다.
new vConsole(vConsoleConfig) 형태로 사용할 수 있다는 말이지요.

vConsoleConfig에 무엇이 들어갈 수 있는지 좀 확인해봐야겠죠? API를 조금 확인해 보겠습니다. 

export interface VConsoleConfig {
  defaultPlugins?: string[]
  onReady?: () => void
  onClearLog?: () => void
  maxLogNumber?: number
  disableLogScrolling?: boolean
}


Key Type optional Default value 설명
defaultPlugins Array true [‘system’, ‘network’, ‘element’, ‘storage’] 배열로 주어진 플러그인들은 실행되어 vConsole에 얹어집니다.
onReady Function true   vConsole이 실행되고 defaultPlugins이 로드되면 실행되는 콜백함수입니다.
onClearLog Function true   로그 및 시스템 패널에서 “Clear” 버튼이 클릭되면 실행되는 콜백함수입니다.
maxLogNumber Number true 1000 로그 탭에 보일 수 있는 최대 라인 수를 설정합니다. 최대 라인수를 초과한 로그들은 로그 탭에서 삭제됩니다.
disableLogScrolling Boolean true   만약 false라면 새 로그를 프린트하면서 패널은 스크롤되지 않습니다.

참고링크: vConsole - Public Properties & Methods

네, defaultPlugin은 콘솔 내에서 어떤 탭들을 보여줄 것인지에 대한 것이고요. 기본적으로는 로그와 더불어 시스템, 네트워크, 엘리먼트, 스토리지가 활성화 되어 있는데, 필요한 것만 배열에 담아 쓰시면 됩니다.

onReady는 vConsole이 준비되었을 때 실행되는 콜백함수입니다.
이정도만 알면 사실 바로 이용할 수 있습니다.

저는 vConsole을 별도의 module로 만들어 사용하겠습니다.

vConsole 모듈 만들기

vConsole.ts

import vConsole, { VConsoleConfig } from 'vconsole';

export const initVConsole = () => {
  const config: VConsoleConfig = {
    onReady: () => {
      const button = (document.querySelector('.vc-switch')) as HTMLElement;
      button.style.position = 'fixed';
      button.style.bottom = '200px';
    },
  };
  new vConsole(config);
};

onReady 함수를 이용해 vConsole 버튼의 위치를 잡아주고 있습니다. vc-switch라는 클래스를 가져와 스타일을 지정해주는 것이죠.

모듈 사용하기

사용하실 때는 root의 index에서 import해 init해주시면 됩니다. ReactDom.redner() 가 호출되는 바로 그 index에서 진행해 보겠습니다.

import { initVConsole } from '../vConsole';

if (process.env.NODE_ENV === 'development') {
  initVConsole();
}

ReactDOM.render(
  <Provider store={ store }>
    <GlobalStyles />
    <Routes />
  </Provider>,
  document.getElementById('root'),
);

여기서 process.env.NODE_ENV === 'development'를 통해 개발계(development) 배포인지 실서버(production) 배포인지를 구분해 적용하겠습니다.
실제 사용자에게 나가는 프로덕트라면 당연히 vConsole이 비활성화 되어야겠죠.

마치며

이렇게 vConsole을 적용해 보았습니다.

회사 동료 분을 통해 vConsole을 접하게 되었는데, 참 편한데, 한국에는 별로 알려진 것 같지 않았습니다. 구글에 검색해봐도 한글 자료는 없고요.

많은 웹 개발자 분들이 vConsole을 이용해 조금이라도 편리하게 디버깅을 하셨으면 좋겠습니다.🙏

Related Posts