어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

⚪️ [JS] 디버깅시 console 사용 꿀팁 본문

자바스크립트/⚪️ 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
Comments