Console log 활용하기

Posted on Edited on In , Word count in article: 250 Reading time ≈ 1 mins.

프로그래밍 하면서 굉장히 많이 사용하는 console.log 를 꾸며서 좀 더 시각적으로 활용해보자

자세한 내용은 MDN doc 에 나와있습니다.
MDN Doc Console

일반적인 콘솔

일반적인 콘솔은 4가지를 많이 사용합니다.

  • console.log() :
  • console.info()
  • console.warn()
  • console.error()

출력결과
console

출력 데이터 타입

  • %o, %O : 오브젝트
  • %d, %i : 정수
  • %s : 문자
  • %f : 소수점
1
2
3
var car = "Dodge Charger";
var someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);

출력결과

출력 스타일 적용

%c 를 사용해서 출력 스타일을 적용할 수 있다

1
console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");

출력결과

그룹만들기

console.group() 과 console.groupEnd() 로 로그의 그룹을 만들어서 출력할 수 있다

1
2
3
4
5
6
7
8
9
10
console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

출력결과

타이머

console.time 로 시작하고
console.timeLog 로 시간을 출력하고
console.timeEnd 로 마지막 시간을 출력해줍니다.

1
2
3
console.time("answer time");
console.timeLog("answer time");
console.timeEnd("answer time");

출력결과

테이블로 출력

테이블로 아름답게 출력됩니다

1
console.table(["apples", "oranges", "bananas"]);

console.table(data);
console.table(data, columns);

출력결과

1
2
3
4
5
6
7
8
9
10
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

출력결과

카운트

카운트를 이용해서 몇 번 실행되는지 출력할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
let user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();

출력결과