Screenlog.js 로그 쉽게 확인하기 (모바일 버전 작업)

개요

---

웹 프론트엔드 개발을 하다보면 ajax를 통해 페이지 일부를 갱신하는 작업을 많이 하게 된다. 이 때 서버에서 받아온 데이터가 개발자의 의도와 달라 화면에 제대로 뿌려지지 않거나 하는등의 현상을 쉽게 접해볼 수 있는데, 개발자는 이러한 경우 가장 쉽게 이슈를 처리할 수 있는 방법으로 console.log와 개발자 도구를 사용하곤 한다.

 

이 외에도 화면상에서 클라이언트와 몇 번의 인터렉션을 거친 뒤 특정 api를 호출하기 전 validation을 한다던지 등의 작업을 할때에도 console.log를 사용하여 쉽게 값을 확인할 수 있는데, 문제는 이 값을 확인하려면 개발자도구를 열어야 한다는 점에서 발생한다.

 

모바일 vs PC

---

현재 내가 회사에서 작업하고 있는 서비스들은 공통적으로 PC 웹 화면 뿐만 아니라 모바일에서 브라우저를 통해 접근할 경우 사용성을 높이기 위해 모바일 모드의 화면도 지원한다. 모바일과 PC 화면은 당연하게도 서로 다른 CSS가 적용되어야 하는데, 현재 일부 서비스에서는 이 부분을 화면 width를 통해 구분하여 서로 다른 css를 적용할 수 있도록 한다.

 

개발자 도구를 키게 되면 필연적으로 화면의 일부를 개발자 도구가 차지하기 되므로 개발 테스트 도중 새로고침을 하여 다시 시도한다던지, 화면 이동이 이루어지는 연속적인 테스트를 한다던지의 작업을 하다보면 아래와 같이 개발자 도구의 면적때문에 PC 화면임에도 모바일 모드로 인식하여 해당 css가 적용되는 경우가 있다.

 

 

또 이러한 서비스들은 css 뿐만 아니라 모바일의 경우 PC와 다르게 일부 기능을 제한하거나 하는 경우가 있어, PC와 모바일에서 사용될 js 파일을 따로 작업하는데 이 때문에 PC 환경에서의 기능 테스트가 번거로워지는 경우가 있다.

 

예를 들어 결제 기능에 대한 검증 코드를 테스트 하는 경우, 수 가지의 테스트 케이스가 있지만, 개발자도구를 열고 한번 테스트하면 새로고침이 이루어져 모바일 화면으로 이동되어 연속적인 테스트가 번거로워질 때가 있다. 이 때는 개발자 도구 닫기 → 새로고침 → PC 버전으로 새로고침됨 → 다시 개발자도구 open의 비효율적인 과정을 거치게 되기 때문에 개발 효율이 떨어질 수 있다.

 

Screenlog.js

---

Screenlog.js는 이러한 이슈를 해결할 수 있는 오픈소스 자바스크립트 라이브러리이다. 아래의 예제 gif에서 볼 수 있듯이 따로 개발자도구를 켜지 않더라도 코드상에서 console.log를 감지하면 해당 내용을 화면에 띄워준다. 개발자는 이를 통해 개발자도구를 열지 않고도 데이터를 확인하며 테스트해볼 수 있다.

 

사용 방법은 간단하다. npm을 통해 설치해도 되고, 글 최하단의 github 레포에 들어가 screenlog.min.js 파일을 다운로드 한 뒤 프로젝트에 추가해주기만 하면 된다.

 

이후 해당 js 파일을 import한 뒤 아래 명령어를 통해 screenLog를 활성화해주면 해당 활성화 코드 다음의 모든 console.log를 만날 때 마다 이 라이브러리가 화면에 그 내용을 표시해준다.

screenLog.init();

 

---

지원 API

기능이 그리 복잡하지 않은 라이브러리이기 때문에 지원되는 api는 3개로 간단하다. 아래는 해당 api들에 대한 간단한 소개이다.

 

1. screenLog.init([options])

화면상 표시될 로그에 대한 설정값을 줄 수 있으며 아래 값에 대한 커스텀이 가능하다.

• logColor: 로그 글자의 색깔. Default는 lightgreen
• fontSize: 로그 글자의 크기. Default는 1em (브라우저 디폴트)
• bgColor: 로그 패널의 배경색. Default는 black
• freeConsole: console.log를 화면에 표시할 것인지. Default는 false이며, 이 값이 true일 경우 screenLog.log()를 사용한 값만 화면에 표시됨

2. screenLog.clear()

현재까지 화면에 표시된 로그를 전부 지움

 

3. screenLog.destroy()

screenLogger를 제거하여 앞으로 등장하는 console.log는 기존의 방식대로 개발자도구의 console에서 확인 가능

 

위 api들을 이용하여 개발자가 보기 쉽게 로그 설정을 하고, 한 화면에서 다수의 경우에 대해 테스트할 때는 임의로 특정 트리거에 screenLog.clear()를 걸어 연속적인 테스팅을 가능하게 하고 테스트 해볼 수 있다.

 

Screenlog 사용해보기

---

기본 옵션으로 사용하기

내가 개발하는 서비스의 js 파일은 최초 로드 시에 init()메서드를 실행하게 되어 있는데 해당 메서드에서 screenLog.init()을 통해 screenLog를 사용하도록 설정해준다.

 

 

이후 기존에는 콘솔을 통해 확인하던 log 내용을 화면 우측 상단에서 바로 확인할 수 있다.

---

옵션 추가하여 사용해보기

위에서 언급했던 여러 옵션들을 함께 주어 screenLog를 초기화하여 사용해볼 수 있다.

옵션으로 로그 텍스트 컬러를 빨간색, 배경색을 파란색으로 했고, 글자 크기를 키웠는데 아래 사진에서 이 옵션들이 반영되었음을 확인할 수 있다.

---

freeConsole

소스코드에 테스트와 별도의 이유로 console.log를 사용해야 할 일이 있을 때, 기존에 있던 로그는 그대로 두고 테스트에만 필요한 정보는 screenLog.log를 통해 화면에서 조회할 수 있다.

먼저, 초기화 시에 freeConsole을 true로 활성화 해주어야 한다.

이후 위와 같이 화면상에서 보고싶은 로그에만 screenLog.log를 사용하면 아래와 같이 해당 로그만 화면에서 확인이 가능하다.

 

정리

---

운영 이슈를 처리하며 프론트 개발을 할 때, 연속적인 케이스에 대한 테스트 시 데이터 값을 확인하려고 개발자 도구를 껐다 켰다 하는것이 불편했는데 screenLog 라이브러리를 활용하면 조금 더 편하게 테스트해볼 수 있을것 같다.

 

단점으로는 개발 테스트에는 편하게 사용할 수 있을것 같지만, 로그가 사용자가 보는 화면에 직접 뿌려지기 때문에 실제 product 환경에 올릴 때에는 관련 코드를 전부 삭제해 주거나 전역 설정등을 통해 Logger를 비활성화 해주어야 하는점을 꼽을 수 있을것 같다.