자바스크립트/⚪️ Vanilla
⚪️ [JS] 디버깅시 console 사용 꿀팁
비니_
2025. 3. 21. 17:01
728x90
| 기능 | 설명 | 예시 코드 | 결과값 |
| console.log() | 값이나 변수의 내용을 출력. 여러 개의 값도 쉼표로 구분해서 출력 가능. | console.log('Hello', 123) | Hello 123 |
| console.table() | 배열이나 객체를 테이블 형식으로 출력. 디버깅에 유용. | console.table([{name: 'apple', price: 100}]) | 테이블 형태로 {name: 'apple', price: 100} 출력됨. |
| + 연산자 (배열/객체와 결합) | 배열은 toString() 호출되어 값들이 콤마로 구분된 문자열로 변환됨. | console.log('배열: ' + [1, 2, 3]) | 배열: 1,2,3 (배열이 문자열로 변환됨) |
| JSON.stringify() | 객체나 배열을 문자열로 변환해서 출력. 읽기 좋게 변환. | console.log(JSON.stringify({name: 'apple'})) | {"name":"apple"} |
| forEach() | 배열을 순차적으로 루프 돌면서 각 요소를 출력. | const arr = [1, 2, 3]; arr.forEach(x => console.log(x)); | 1 2 3 (각 요소가 한 줄씩 출력됨) |
| console.assert() | 조건이 false일 때 에러 메시지 출력. 디버깅에 유용. | console.assert(1 === 2, '1과 2는 같지 않다!') | 1과 2는 같지 않다! (조건이 false여서 에러 메시지 출력) |
| console.group() | 로그를 그룹화해서 시각적으로 구분. console.groupEnd()로 종료. | console.group('그룹1'); console.log('로그1'); console.groupEnd(); | 그룹1으로 묶인 로그 출력. "로그1"이 그룹화되어 출력됨. |
| console.time() console.timeEnd() |
코드 실행 시간을 측정하고 출력. | console.time('타이머'); for (let i = 0; i < 1000; i++) {} console.timeEnd('타이머'); | 타이머: 1ms (실행 시간 출력) |
| console.error() | 오류 메시지를 빨간색으로 출력. 시각적으로 강조. | console.error('오류 발생!') | 오류 발생! (빨간색으로 출력됨) |
| console.warn() | 경고 메시지를 노란색으로 출력. 시각적으로 구분. | console.warn('경고!') | 경고! (노란색으로 출력됨) |
728x90