[JS] console.log 콘솔 로그 더 잘 사용하기

console.log는 브라우저에서 제공하는 console API중 하나. console 객체에는 log 외에도 다양한 메소드들이 존재한다.

 

log 레벨 종류

---

정말 필요한 정보가 아니면 log와 info는 제품 배포 단계에선 출력되지 않도록 한다. 배포할 때 log나 info는 출력하지 않도록 하거나 네트워크 요청이 발생하지 않도록 하는 등의 설정을 할 수 있기 때문에 중요도 레벨에 맞는 console 메소드를 사용하는 것이 중요하다.

 

console.log

const dog = { type: "🐶", name: "츄츄", owner: { name: "John" } };
console.log("logging", dog);

 

가장 자주 사용하는 console 메소드로 개발 도중 필요한 데이터를 출력하고 싶을 때 사용한다. , 콤마로 구분해서 여러 데이터를 출력할 수도 있다.

 

🔍️ console.log는 참조를 로깅한다. 객체 내용에 변경사항이 있다면 로깅시에도 실시간으로 업데이트 된다.

🔍️ 서식문자 %c와 CSS 속성을 이용해 출력 내용의 색이나 크기 등을 변경할 수도 있다.

 

console.log("%c색상 변경", "color: yellow; font-size: large;")

 

콘솔 출력 내용의 텍스트 색상과 크기를 변경한 화면

 

console.info

특정한 정보를 출력하고 싶을 때.

 

console.warn

경고 수준의 에러를 출력할 때. 노란색으로 출력됨.

 

console.error

심각한 수준의 에러를 출력할 때(예상하지 못한 에러나 시스템 에러 등). 빨간색으로 출력됨.

 

log, info, warn, error 콘솔 출력 화면

 

특정 조건일 때만 콘솔 출력하기 — console.assert

---

console.assert(expression, msg)
console.assert(expression, obj)

 

console.assert 메서드는 파라미터에 명시한 조건이 falsy일 때만 콘솔에 오류 메세지를 출력한다. truthy 일 때는 아무것도 출력하지 않는다. 이를 활용해 특정 조건을 만족할 때만 콘솔을 출력하도록 할 수 있다.

console.assert(2 === 3, "not same!"); // false이므로 콘솔 출력
console.assert(2 === 2, "same!"); // true이므로 콘솔 출력 안함

 

두번째 인자에 문자열이 아닌 객체를 넘길 수도 있다.

const errorMsg = "the # is not even";
for (let number = 2; number <= 5; number += 1) {
  console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });
}
// 어설션에 실패함: {number: 3, errorMsg: 'the # is not even'}
// 어설션에 실패함: {number: 5, errorMsg: 'the # is not even'}

 

객체를 출력할 때 유용한 메소드

---

console.table

console.table(data [, columns])

 

객체 혹은 배열을 테이블 형식으로 출력할 때 사용한다. 기본적으로 각 행(row)의 모든 요소를 나열하지만 두번째 인자를 통해 특정 열(column)만 표시할 수도 있다.

const names = ["Tyrone", "Janet", "Maria"];
console.table(names);

 

배열을 넘겼을 때

 

const tyrone = { firstName: "Tyrone", lastName: "Jones" };
console.table(tyrone);

 

객체를 넘겼을 때

 

const tyrone = { firstName: "Tyrone", lastName: "Jones" };
const janet = { firstName: "Janet", lastName: "Smith" };
const maria = { firstName: "Maria", lastName: "Cruz" };

console.table([tyrone, janet, maria]);

 

 

객체로 구성된 배열을 넘겼을 때

 

const tyrone = { firstName: "Tyrone", lastName: "Jones" };
const janet = { firstName: "Janet", lastName: "Smith" };
const maria = { firstName: "Maria", lastName: "Cruz" };

console.table([tyrone, janet, maria], "firstName");

 

특정 열(column)만 표시할 때

 

console.dir

console.dir(object)

 

DOM 요소의 메서드를 확인할 때 사용하면 유용하다. console.log로 DOM 요소를 로깅해보면 태그만 보이지만 console.dir을 사용하면 자바스크립트 객체 형식(확장 가능한 트리 구조)으로 표현해준다.

 

document.body 요소를 log와 dir로 출력했을 때 비교

 

그 외엔 console.log와 비슷하지만 두번째 인자에 colors depth 옵션을 넘길 수 있는 특징이 있다.

const dog = { type: "🐶", name: "츄츄", owner: { name: "John" } };
console.dir(dog, { colors: true, depth: 1 });

 

• colors : 콘솔 출력 내용에 색상 표현 여부. 값 boolean
• depth : 얼마만큼의 깊이까지 객체를 표현할지 설정. 값 number / 기본값 2

 

colors: false, depth: 0으로 지정한 후 node 출력 화면

 

코드 수행시간 측정 — console.time

---

💡 자바스크립트 실행 시간 측정을 위한 표준 메서드는 `performance.now()` 이다(참고글). `console.time()`은 표준이 아니다. `performance.now()`는 1/1000 밀리초 단위로 측정할 수 있어서 정확도가 더 우수하다. `performance.now()`는 웹 페이지 혹은 자바스크립트 환경을 시작하거나 로드한 시점을 기준으로 한 상대적인 시간(타임스탬프)을 밀리세컨드 단위로 반환한다. 즉, 페이지 새로고침이나 초기화할 때마다 `performance.now()` 값은 0으로 초기화되어 경과 시간을 측정한다.

 

console.time([label])
console.timeEnd([label])
console.timeLog([label][, ...data])

 

코드 수행 시간을 측정하고 싶을때 console.time() 메소드를 사용한다. time() 부터 timeEnd() 까지 걸린 시간을 콘솔에 출력한다. 이때 time() 과 timeEnd() 메서드 파라미터의 label 이름이 같아야 한다.

console.time("totalExecutionTime"); // Time started
for (let i = 0; i < 10; i += 1) {}
console.timeEnd("totalExecutionTime"); // Printing total execution time

 

 

console.timeLog()를 이용해 for loop 등에서 각 반복의 실행 시간을 표시할 수도 있다.

console.time("totalExecutionTime"); // Time started
console.time("executionTime"); // Time started
for (let i = 0; i < 10; i += 1) {
  console.timeLog("executionTime", i); // Printing execution time for each
}
console.timeLog("totalExecutionTime"); // Printing total execution time

 

 

호출 횟수 로깅 — console.count

---

console.count([label])
console.countReset([label])

 

인자에 전달한 레이블이 몇 번 호출되었는지 확인하고 싶을 때 사용한다. console.countReset 를 사용해서 호출 횟수를 초기화할 수 있다.

function a() {
  console.count("a 함수 실행");
}

a();
a();
console.countReset("a 함수 실행"); // 호출 횟수 초기화
a();

 

 

값 자체를 레이블로 사용해서, 해당 값을 카운터할 수도 있다.

console.count(NaN); // NaN: 1
console.count(NaN + 3); // NaN: 2

let age = 30;
console.count(age / 2); // 15: 1

 

함수 호출 위치를 확인하고 싶을 때 — console.trace

---

💡 스택 트레이스 관련 더 자세한 내용은 노트 링크 참고

 

console.trace([data])

 

console.trace는 코드가 실행되는 순간의 stack trace를 출력한다. stack trace란 특정 시점부터~특점 시점까지 거쳐온 함수들의 순서 있는 집합이다. 프로세스가 OS로부터 메모리의 특정 영역을 할당 받으면, 이 (메모리)영역은 다시 (텍스트)코드 / 데이터 / Heap / Stack 4가지 영역으로 나뉜다. Stack 영역은 함수를 호출할 때 커지며 함수의 지역 변수 / 파라미터 등이 담긴다. stack trace가 출력하는 것이 바로 이 Stack영역.

function f1() {
  f2();
}

function f2() {
  f3();
}

function f3() {
  console.trace();
  console.log("hi: :)");
}

f1();

 

위 코드를 실행하여 콘솔에 출력해보면 아래와 같다. ➊f3 함수는 6번째 줄에 있는 f2 함수에서 호출했고, ➋f2 함수는 2번째 줄에 있는 f1 함수에서 호출했고, ➌f1 함수는 14번째 줄에서 호출한 것을 차례대로 확인할 수 있다.

 

 

 

콘솔 그룹화 — console.groups

---

console.group([label])
console.groupCollapsed([label])
console.groupEnd([label])

 

console.group()을 사용해 접고 펼칠 수 있는 인라인 그룹을 만들 수 있다. console.group() 으로 그룹을 시작하고 console.groupEnd()로 그룹을 종료한다. 여러 그룹을 중첩해서 만들 수도 있다. 기본적으로 펼침 상태의 그룹을 생성한다. console.groupCollapsed()를 사용하면 접힘 상태의 그룹을 만들 수 있다.

console.group("URL Info");
console.log("Protocol", window.location.protocol);
console.log("Host", window.origin);
console.log("Path", window.location.pathname);
console.groupCollapsed("Meta Info"); // 중첩 그룹 시작
console.log("Date Fetched", new Date().getTime());
console.log("OS", navigator["platform"]);
console.log("Browser", navigator["appCodeName"]);
console.log("Language", navigator["language"]);
console.groupEnd(); // 중첩 그룹 종료
console.groupEnd();

 

URL Info는 console.group을 사용해서 펼쳐있고 Meta Info는 console.groupCollapsed를 사용해서 접혀있다

 

디버그 콘솔 — console.debug

---

console.debug(object [, object, ...])

 

console.debug()는 console.log()와 동일하지만 빌드 시스템에선 제거되고, 프로덕션 모드에선 비활성화된다. console.debug() 출력 내용을 확인하려면 크롬 콘솔 출력 설정에서 상세(Verbose) 옵션이 체크되어 있어야 한다.

 

 

콘솔에 스타일 입히기

---

콘솔 출력 결과에도 CSS 스타일을 추가할 수 있다. 추가하고 싶은 곳에 %c 서식문자를 추가하고, 두번째 파라미터에 원하는 스타일을 정의하면 된다. 여러 스타일을 적용할 땐 %c 서식 문자를 추가한 만큼 스타일이 정의된 파라미터를 순서대로 추가하면 된다.

console.log(
  "%cHello %cWorld",
  "color: red;", // %cHello에 대한 스타일
  "color: yellow; background: black;", // %cWorld에 대한 스타일
);

 

 

스타일이 정의된 변수를 따로 지정해서 사용할 수도 있다.

// 스타일 변수 지정
const helloStyle = ["color: red"];
const worldStyle = ["color: yellow", "background: black"].join(";");

console.log("%cHello %cWorld", helloStyle, worldStyle);

 

 

코드 출처 : https://github.com/Lissy93/dashy/blob/master/src/utils/CoolConsole.js

/* eslint no-console: ["error", { allow: ["log", "info", "warn"] }] */

/* Prints the app name and version, helpful for debugging */
export const welcomeMsg = () => {
  const v = process.env.VUE_APP_VERSION
    ? `V${process.env.VUE_APP_VERSION}`
    : "";
  console.log(
    `\n%cDashy  ${v} 🚀`,
    "color:#0dd8d8; background:#0b1021; font-size:1.5rem; padding:0.15rem 0.25rem; margin: 1rem auto; font-family: Rockwell; border: 2px solid #0dd8d8; border-radius: 4px;font-weight: bold; text-shadow: 1px 1px 1px #00af87bf;",
  );
};

/* Prints warning message, usually when there is a configuration error */
export const warningMsg = (message, stack) => {
  console.info(
    `\n%c⚠️ Warning ⚠️%c \n${message} \n\n%cThis is likely not an issue with Dashy, but rather your configuration. If you think it is a bug, please open a ticket on GitHub: https://git.io/JukXk`,
    "color:#ceb73f; background: #ceb73f33; font-size:1.5rem; padding:0.15rem; margin: 1rem auto; font-family: Rockwell, Tahoma, 'Trebuchet MS', Helvetica; border: 2px solid #ceb73f; border-radius: 4px; font-weight: bold; text-shadow: 1px 1px 1px #000000bf;",
    "font-weight: bold; font-size: 1rem;color: #ceb73f;",
    "color: #ceb73f; font-size: 0.75rem; font-family: Tahoma, 'Trebuchet MS', Helvetica;",
  );
  if (stack) {
    console.warn(`%cStack Trace%c\n${stack}`, "font-weight: bold;", "");
  }
};

/* Prints status message */
export const statusMsg = (title, msg) => {
  console.log(
    `%c${title || ""}\n%c${msg}`,
    "font-weight: bold; color: #0dd8d8; text-decoration: underline;",
    "color: #ceb73f;",
  );
};

/* Prints status message, with a stack trace */
export const statusErrorMsg = (title, msg, errorLog) => {
  console.log(
    `%c${title || ""}\n%c${msg} \n%c${errorLog || ""}`,
    "font-weight: bold; color: #0dd8d8; text-decoration: underline;",
    "color: #ff025a",
    "color: #ff025a80;",
  );
};

 

로그 문자열 포맷

---

C언어 스타일 printf를 사용해서 문자열 포맷을 직접 지정할 수 있다. 참고로 템플릿 리터럴을 사용해도 동일한 작업을 수행할 수 있다. 짧은 문자열은 템플릿 리터럴의 가독성이 더 좋다.

 

지정자	설명
%s	문자열 또는 문자열로 변환되는 다른 모든 타입
%d 혹은 %i	정수 (integer)
%f	실수 (Real numbers)
%o(소문자 o)	최적의 포맷 사용
%O (대문자 O)	기본 포맷 사용
%c	커스텀 포맷 (스타일 지정)

 

console.log(
  "Hello %s, welcome to the year %d!",
  "world", // %s(문자열)에 지정됨
  new Date().getFullYear(), // %d(정수)에 지정됨
);

// Hello world, welcome to the year 2022!

 

레퍼런스

---

• (JavaScript) 입문자가 겪기 쉬운 console.log 실수
• node에서 스택 트레이스 가져오기
• 콘솔 로그 제대로 쓰고 있을까? 🤔
• Console API reference - Chrome Developers
• Developer essentials: JavaScript console methods | MDN Blog
• (번역) console.log()와 함께하는 재미 💿    

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요