우리는 한다, 개발을.

console.log와 console.dir

⌛ 1 min

라떼 한잔해

사비
이거 맞아? 라떼아니라 샴페인 같은데..

javascript를 가장 처음 배웠을 때 디버깅을 할 때를 기억해 봤다
(라떼를 시전한다는 얘기다 마음의 준비를 해)

See the Pen console.log와 console.dir by pmirnc (@pmirnc) on CodePen.

지금보면 말도 안되는 거짓말 같지만 정말 이런 식으로 디버깅을 했다.
그럼 object는 어떻게 보나요?
…….
……
…..
….

..
.

object가 뭐죠?

그럴때였다…
믿을 수 없겠지만 사실이다..

console.log

매개변수로 전달된 값을 출력한다

우린 디버깅을 할 때 FE건 BE건 console.log를 무지성으로 찍는다
좀 눈에 띄게 하고 싶으면 console.warn이나 console.error정도


console.log(`한잔해`);
console.warn(`두잔해`);
console.error(`세잔해`);

console.dir

매개변수로 전달된 객체의 속성을 출력한다

이런 설명은 우리에게 늘 어렵다.
바로 실전 가보자.


예제1

See the Pen console.log와 console.dir by pmirnc (@pmirnc) on CodePen.

위 이미지와 같이 함수를 log로 찍었을 땐 함수의 내용이 출력되지만
dir로 출력 시 함수의 속성들이 출력됨을 볼 수 있다.

예제2

See the Pen console.log와 console.dir by pmirnc (@pmirnc) on CodePen.

HTML DOM을 출력하는 것도 훨씬 보기가 좋다.





톰

그럼 20000