소개

웹 애플리케이션 개발 과정에서 console.log를 사용하여 정보를 출력하거나 API 응답, 성능 등을 확인할 수 있습니다. 하지만 모바일 기기에서는 이러한 콘솔 로그를 직접 볼 수 없는 문제가 있습니다.

이럴 때 alert를 사용하여 정보를 표시할 수 있지만, 이 방법은 불편할 뿐만 아니라 JS 스레드를 차단하여 후속 코드 실행에 문제를 일으키고 디버깅 경험을 저해합니다.

그렇다면 모바일 환경에서도 console.log를 사용할 수 있을까요? 이를 위해 **vConsole**이라는 서드파티 라이브러리를 활용할 수 있습니다.

vConsole은 가볍고 확장 가능하며, 모바일 웹 개발자를 위한 디버깅 패널입니다. 프레임워크와 독립적이어서 Vue, React 또는 다른 모든 프레임워크에서 사용할 수 있으며, 각 프레임워크에 맞는 플러그인이 제공됩니다.

공식 문서: https://gitee.com/Tencent/vConsole/tree/master/

주요 기능

• 로그(Logs): console.log|info|error|…
• 네트워크(Network): XMLHttpRequest, Fetch, sendBeacon
• 요소(Element): HTML 노드 트리
• 저장소(Storage): Cookies, LocalStorage, SessionStorage
• JS 명령어 라인 수동 실행
• 사용자 정의 플러그인

사용 방법

방법 1: npm 사용 (권장)

npm install vconsole

Import 및 초기화 후, Chrome 개발자 도구와 마찬가지로 console.log 기능을 사용할 수 있습니다.

import DebugPanel from 'vconsole';

const mobileDebugger = new DebugPanel();

// 이제 정상적으로 `console` 메서드 사용 가능
console.log('Hello world');

// 디버깅 종료 시 제거
mobileDebugger.destroy();

방법 2: CDN을 사용하여 HTML에 직접 삽입

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole은 기본적으로 `window.VConsole`에 연결됩니다
  var mobileDebugger = new window.VConsole();
  // 이제 정상적으로 `console` 메서드 사용 가능
  console.log('Hello world');
  
  // 디버깅 종료 시 제거
  mobileDebugger.destroy();
</script>

개발 환경에서 표시, 프로덕션 환경에서 제거

React, Vue의 단일 페이지 애플리케이션을 개발할 때, 설정 파일의 process.env에 익숙하실 겁니다. 프로덕션 환경에서는 vConsole을 로드하지 않고, 개발 및 테스트 환경에서만 로드하도록 설정할 수 있습니다. 또한 PC가 아닌 모바일 기기에서만 표시하도록 제한할 수 있습니다. 조건이 허용된다면 프로덕션 환경에서 디버깅 패널을 트리거하는 버튼을 추가하는 방법도 고려해볼 수 있습니다.

Vue.js 예제

process.env에 익숙하지 않다면 검색하여 간단히 이해할 수 있습니다. 전역 변수와 유사합니다.

main.ts 파일에 다음 코드를 추가합니다:

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import store from './store'
import DebugPanel from 'vconsole';
import router from './router'

createApp(App).use(store).use(router).mount('#app')

// PC 장치 여부 확인
const checkIfPc = () => {
    const userAgentInfo = navigator.userAgent;
    const deviceAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    let isPcDevice = true;
    
    for (let i = 0; i < deviceAgents.length; i++) {
        if (userAgentInfo.indexOf(deviceAgents[i]) > 0) {
            isPcDevice = false;
            break;
        }
    }
    return isPcDevice;
}

// 프로덕션 환경이 아니고 PC가 아닌 경우에만 디버깅 패널 표시
if (process.env.NODE_ENV !== "prod" && !checkIfPc()) {
    console.log(process.env.NODE_ENV);
    const mobileDebugger = new DebugPanel();
}