[Javascript] JS console 다양하게 사용하기 / console

 

 

콘솔 찍을 때 사용하면 좋은 팁 정리.

제공해주는 API도 굉장히 다양하다.

 

Update: 220220

 

 

---

 

 

◽  간단한 사용

찍을 변수, 문자열 등등 뒤에 .log를 자동완성으로 입력하면 알아서 씌워진다. 간편하다.

 

 

◽ %s - 문자열 (String)

// 문자열 찍기
console.log('data is %s', myStrVal)

 

 

◽ %d - 숫자 (Digit, Integer)

// 숫자 찍기
console.log('data is %d', myNumVal)

 

 

◽ 문자열과 숫자 같이 찍기

// 같이 찍기
console.log('data is %s (%d)', myStrVal, myNumVal)

 

 

◽ 객체

// Bad
// '+'를 사용하는 경우
const object = {value: "hi"}
console.log('obj=' + object) // obj=[object Object]

// Good
// ','를 사용하는 경우
const object = {value: "hi"}
console.log('obj=', object) // obj={value: "hi"}

 

 

◽ API

- console.count()

// 카운트하기
for(let i=0; i<3; i++) {
	console.count('count')
}

/*
[출력]
count : 1
count : 2
count : 3
*/

 

 

- console.table()

const userArr = [
	{ name: '토르', age: 10000 },
	{ name: '로키', age: 5000 }
]

console.table(userArr);

 

 

 

 

- console.dir()

굳이 볼 필요가 없는 __proto__등의 확장 속성이나 원시 속성, 열거하지 않은 속성을 볼 필요가 없다.

 

 

 

- console.trace()

현재 호출한 기준의 스택 구조를 출력해준다. 지금 이 구문이 어디서 실행되고 있는지, 예를 들어 어떤 함수를 통해서, 어떤 흐름으로 호출하는지 알고자 할 때 호출하면 된다.

 

 

 

- console.group()

콘솔로그를 그루핑한다.

console.group()
console.log('level 1')
	// 2번째 depth 시작
	console.group()
	console.log('level 2')
	console.groupEnd()
console.groupEnd()

 

 

 

 

 

- console.error()

 

 

- console.warn()

 

 

 

---

 

 

 

출처 및 참조

자바스크립트 console.log - 값을 확인하는 디버깅 팁

console.log에 대해 알아보자

JS Console의 세계

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.