[console Tip] console 유용하게 사용하기

console 100% 활용하기!!

 

1. console.log 에 색상 입히기

const err = "hihi";
console.log(`%c error : ${err}`, "background: #ff0;color: red;font-weight: bold")

const err = "hihi";
console.log(`%c error : ${err}` + `%c error : ${err}`, "background: #ff0;color: red;font-weight: bold", "background: aqua;color: green;font-weight: bold")

console.log(`%c error : ${err} %c error : ${err}`, "background: #ff0;color: red;font-weight: bold", "background: aqua;color: green;font-weight: bold")

 

스타일을 적용하고 싶지 않으면 색상 뒤에 , 찍고 작성하면 된다

 

2. console.log 치환자

- %s (문자열 치환자)

const err = "error1";
const number = 30;

console.log("문자열 치환자 %s, %s 출력", err, number);

 

- %o, %O (객체 치환자)

소문자 : 객체 내용 보여줌
대문자 : 데이터 타입을 먼저 보여줌

 

- %d, %i, %f (숫자 치환자)

3. console.warn / console.error 

- warn : 경고

- error : 에러