[Javascript] console log, group, table

Javascript를 그나마 잘한다고 생각했는데 아직도 모르는것 투성이 yeriel입니다.
이번에 console 종류 중에 group과 table을 발견하고 얼마나 신기했는지.....

그래서 이번 포스팅은 console.log, console.group, console.table에 대해서 다뤄볼까합니다.

console.log

Web Console에 메시지를 출력합니다.

console.log('log')

console.log()

log에 스타일도 추가할 수 있습니다.

console.log('%c', style)

console.group

console.group(label)

Web Console log 에 새로운 인라인 그룹을 만듭니다.

console.log('yeriel')
console.group()
console.log('r-0o0-j.tistory.com')
console.group()
console.log('instagram.com/r_0o0_j')
console.groupEnd()
console.log('yoom')
console.groupEnd()

console.group()

그룹에 라벨도 추가 할 수 있습니다.

console.log('yeriel')
console.group('tistory')
console.log('r-0o0-j.tistory.com')
console.group('instagram')
console.log('instagram.com/r_0o0_j')
console.groupEnd()
console.log('yoom')
console.groupEnd()

console.group(label)

라벨이 없을때는 console.group으로 굵게 나타나던 부분이 tistory와 istagram이라고 라벨이 표시되네요

console.group 사용시 기억해야 할것은 꼭 groupEnd()로 group을 닫아줘야합니다. group을 만든만큼 닫아줘야합니다. 꼭!!

groupCollpased는 그룹을 닫아서 보여주는 함수입니다.

console.groupCollpased

console.table

console.table(array)

var table = {'name':'yeriel', 'blog':'r-0o0-j.tistory.com'}

console.table(table)

 

table = ['y','e','r','i','e','l']

console.table(table)

 

table = [
	{'name':'yeriel', 'blog':'r-0o0-j.tistory.com'},
	{'name':'yoom', 'blog':'instagram.com/r_0o0_j'}
]

console.table(table)

 

다양한 형태의 배열을 표로 나타내줘서 보기 편하네요