개발자도구 - console

SeungMin·2022년 7월 28일
0

WECODE

목록 보기
5/19

console은 프론트엔드 개발을 하면서 자주 사용하는 DevTools의 한 패널이다.
이번에 다룰 주제는 console패널의 유용한 기능, 정보이다.


console

console패널을 사용하는 가장 큰 이유를 꼽으라면
내가 작업중인 파일을 직접 수정하지 않고 패널에 입력하는 것으로 실시간으로 확인해볼수 있다는 점이다.

웹개발을 하다보면 눈에 보이는 div , img , input 과 같은 부분 외적으로
JS에서 선언한 변수의 변화, 어떤 기능을 설계하고 실행했을 때 목표로 하는 target이 변화됐는지.

이런 것들을 확인하기 위해서 console.log()명령어를 매우 자주 사용하게 된다.


Preserve log

내가 이전에 기록한 console.log()의 내용을 페이지를 새로고침해도 계속해서 보존하고싶을 때가 있다.

그럴 때는

해당 위치의 Preserve log 옵션을 체크해주면 된다.

그렇게 되면


위와 같이 새로고침을 해도 이전에 실행한 console.log()의 내용이 보존된다.

하지만 주의할점은 해당 기능을 이용해서 보존할 수 있는 것은 정확히
log 이다.

위와 같이 console패널에서 새로 선언한 변수나 함수는 새로고침을 하면 전부 초기화된다.


console.clear();

이번에는 반대로 내가 현재 페이지에서 사용한 console.log()
지우고 싶을 때 사용하는 메소드이다.

console패널 입력란에 console.clear()를 입력하면 모든 메세지가 말끔하게 사라진다.

하지만 console.clear()Preserve log 와는 다르게 이전에 선언한 변수나 함수가 초기화되지 않는다.


Default levels

내가 console패널에서 확인하고 싶은 사항의 레벨을 필터링해주는 체크박스이다.

체크된 항목의 레벨단위의 알람을 콘솔 패널에 출력하겠다는 뜻이다.

예를 들어서 console.debug() 메소드는 debug level의 메시지를 출력한다.
때문에 위의 사진과 같이 Verbose를 체크하지 않으면 내가 출력했더라도 내용을 확인할 수 없다.

이렇게 체크를 해주면 확인 가능한 level 의 범위가 늘어나게 된다.


Object

위의 console 명령어를 보면 유추할 수 있듯이 console은 하나의 객체이다.
때문에 Class로 선언되어있으며, 포함하는 메소드가 다양하게 존재한다.

객체인지 확인하는 방법은 매우 간단하다.

typeof 명령어로 console의 타입을 확인하면 object => 객체라는 사실을 확인 가능하다.

cleardebug 이외에도 굉장히 많은 메소드가 있다.

해당 기능은 참조 링크로 첨부한다.

console.method : https://blog.fakecoding.com/archives/js-console-method

profile
공부기록

0개의 댓글