console - Web APIs | MDN
The console object provides access to the debugging console (e.g., the Web console in Firefox). The specifics of how it works vary from browser to browser or server runtimes (Node.js, for example), but there is a de facto set of features that are typically
developer.mozilla.org
디버깅을 위해 console.log만 주구장창 찍던 과거를 반성하며...
console.count
함수나 코드가 실행된 횟수 계산 가능
호출된 횟수만 기록
함수나 코드에 console.count를 넣어 실행 중인지 또는 예상치 못한 상황에서 다시 렌더링되는지 확인할 수 있음
카운터를 초기화하기 위해서는 console.countReset 사용
console.time
하나 또는 여러 개의 작업에 걸리는 시간 파악
사용 방법
1. 먼저 console.time을 호출하여 타이머를 시작한 다음
2. 측정하려는 코드를 실행하고
3. 완료되면 console.timeEnd를 호출하여 타이머를 중지하고 소요 시간(밀리초)를 확인
한 페이지에서 최대 10,000개의 타이머 실행 가능
개별 기능을 프로파일링할 때 레이블을 사용하여 타이머 구분 가능
console.timeLog를 사용하여 종료 전 어느 시점에서든 타이머의 현재 값 기록 가능
console.assert
작성하는 조건 또는 어설션이 false인 경우에만 콘솔에 오류 메시지 생성
두번째 인자로 오류 메시지 추가 가능
console.table
배열이나 객체를 받아 그 내용을 표로 표시
선택적 매개 변수를 가져와 테이블에 표시할 열을 선택할 수 있게 함
console.group
콘솔 메시지를 접을 수 있는 그룹으로 구성할 수 있음
console.group을 호출하면 console.groupEnd를 호출할 때까지 자동으로 다음 로그를 해당 그룹에 넣음
그룹은 기본적으로 열려진 상태지만 console.groupCollapsed를 사용하면 닫힌 상태로 시작하여 클릭해야 열 수 있는 그룹으로 만들 수 있음
다른 그룹 내부에서 console.group을 호출하여 그룹을 서로 중첩할 수 있음
console.groupEnd를 호출하여 중첩을 해제할 수도 있음
사실 그럼에도 다른 console은 찍어볼 일이 잘 없다....
console.table은 종종 객체 형태의 data를 편하게 보기 위해 사용하고 있다.
[ 참고 자료 ]
'Javascript' 카테고리의 다른 글
| [ Javascript ] 문자열을 숫자로 형변환하는 3가지 방법 (0) | 2024.03.28 |
|---|---|
| [ Javascript ] 첨부파일 다운로드 | Blob (0) | 2024.03.28 |
| [ Javascript ] fill 배열 메서드를 이용해 초기값 채워넣기 (0) | 2024.03.27 |
| [ Javascript ] in 연산자 사용 시 주의해야 할 점 (0) | 2024.03.27 |
| 동적 프로퍼티 할당이 성능을 잡아먹을까? | 자바스크립트 엔진의 Hidden Class (0) | 2024.03.27 |
