---

# 서론: “콘솔에 뭘 써야 할지 모르겠어요?”

프론트엔드 개발을 시작한 지 얼마 안 된 초보자라면, 브라우저 콘솔에 console.log()만 찍어두고는 “왜 이렇게 디버깅이 오래 걸리지?” 라는 고민을 한 번쯤은 해봤을 겁니다. 실제 현업에서도 “콘솔 메서드가 부족해서 디버깅이 힘들다” 라는 이야기를 자주 듣습니다.

하지만 여러분이 아직 모르는 10가지 JavaScript 콘솔 메서드가 있습니다. 이 메서드들을 제대로 활용하면 복잡한 객체를 한눈에 파악하고, 실행 흐름을 시각적으로 추적하며, 심지어 퍼포먼스까지 체크할 수 있습니다. 오늘은 JavaScript 콘솔 메서드, 디버깅 팁, 개발자 도구 라는 SEO 키워드를 중심으로, 초보자도 바로 적용할 수 있는 실전 예시와 함께 소개합니다.

---

# 본론

# 1. console.table() – 표 형태로 데이터 시각화

js

const users = [

  { id: 1, name: '홍길동', age: 28 },

  { id: 2, name: '김철수', age: 34 },

  { id: 3, name: '이영희', age: 22 }

];

console.table(users);

• 효과: 배열이나 객체를 표 형태로 출력해 한눈에 비교 가능

• 활용 상황: API 응답 데이터를 확인하거나, 반복문 안에서 각 아이템을 검증할 때

팁: console.table()은 객체 배열뿐 아니라 객체 자체도 컬럼 형태로 보여줍니다.

---

# 2. console.group() / console.groupEnd() – 로그 그룹화

js

console.group('User Info');

console.log('Name: 홍길동');

console.log('Age: 28');

console.groupEnd();

• 효과: 관련 로그를 하나의 그룹으로 묶어 트리 구조로 표시

• 활용 상황: 복잡한 함수 로직을 단계별로 추적하거나, 여러 모듈에서 발생하는 로그를 구분하고 싶을 때

---

# 3. console.assert() – 조건이 거짓일 때만 경고

js

const isLoggedIn = false;

console.assert(isLoggedIn, '사용자가 로그인되지 않았습니다.');

• 효과: 조건이 false일 때만 메시지를 출력해 불필요한 로그를 최소화

• 활용 상황: 테스트 코드에 간단히 삽입해 가정(assumption)을 검증하고 싶을 때

---

# 4. console.count() – 호출 횟수 추적

js

function foo() {

  console.count('foo 호출 횟수');

}
foo(); foo(); foo();

• 효과: 동일 라벨에 대해 호출된 횟수를 자동 카운트

• 활용 상황: 루프가 몇 번 실행됐는지, 이벤트 리스너가 중복 등록됐는지 확인할 때

---

# 5. console.time() / console.timeEnd() – 코드 실행 시간 측정

js

console.time('fetchTime');

fetch('https://api.example.com/data')

  .then(res => res.json())

  .then(() => console.timeEnd('fetchTime'));

• 효과: 지정한 라벨에 대한 경과 시간을 밀리초 단위로 출력

• 활용 상황: API 응답 시간, 복잡한 연산 함수 성능을 빠르게 체크하고 싶을 때

---

# 6. console.trace() – 현재 호출 스택 출력

js

function a() { b(); }

function b() { c(); }

function c() { console.trace('현재 호출 스택'); }

a();

• 효과: 함수 호출 흐름을 트레이스 형태로 보여줌

• 활용 상황: 콜백 지옥에 빠졌을 때 어느 지점에서 호출됐는지 파악하고 싶을 때

---

# 7. console.dir() – 객체 구조 상세히 보기

js

const elem = document.querySelector('#myDiv');

console.dir(elem);

• 효과: DOM 요소의 프로퍼티와 메서드를 트리 형태로 탐색 가능

• 활용 상황: DOM API를 직접 확인하거나, 객체 내부에 숨겨진 프로퍼티를 찾아볼 때

---

# 8. console.warn() & console.error() – 레벨별 로그 구분

js

console.warn('이 API는 곧 폐기됩니다.');

console.error('서버 응답이 비정상적입니다.');

• 효과: 콘솔에 색상과 아이콘을 달리해 심각도 구분

• 활용 상황: 개발 단계에서 경고와 에러를 명확히 구분해 팀원과 공유하고 싶을 때

---

# 9. console.clear() – 콘솔 초기화

js

console.clear(); // 이전 로그를 모두 지웁니다.

• 효과: 디버깅 중 화면을 깔끔하게 정리

• 활용 상황: 장시간 디버깅 후 이전 로그가 방해될 때

---

# 10. console.groupCollapsed() – 자동 접힌 그룹

js

console.groupCollapsed('디테일 로그');

console.log('세부 정보 1');

console.log('세부 정보 2');

console.groupEnd();

• 효과: 기본적으로 접힌 상태로 그룹을 만들어 필요할 때만 펼침

• 활용 상황: 로그가 많아 콘솔이 복잡해질 때, 핵심 정보만 먼저 보여주고 싶을 때

---

# 결론: 오늘 바로 적용해 보세요!

위에서 소개한 10가지 콘솔 메서드는 단순히 console.log()를 대체하는 수준이 아니라, 디버깅 효율을 극대화하고 코드 가독성을 높이는 강력한 도구입니다.

1️⃣ 표로 데이터를 한눈에 파악하고

2️⃣ 그룹으로 로그를 정리하며

3️⃣ 시간과 카운트로 퍼포먼스를 체크하고,

이 모든 것이 개발자 도구 안에서 바로 이루어집니다.

실전 팁: 프로젝트에 debug.js 같은 파일을 만들어, 자주 쓰는 콘솔 메서드들을 함수화해 두면 팀 전체가 동일한 디버깅 스타일을 유지할 수 있습니다.

이제 브라우저 콘솔을 무시무시한 디버깅 지옥이 아니라, 친절한 조력자로 바꿔 보세요.

💡 행동 유도

• 오늘 작성 중인 프로젝트에 console.table()과 console.time()을 각각 하나씩 적용해 보세요.

• 다음 주 회의 때 팀원에게 “콘솔 메서드 10가지”를 공유하고, 가장 유용했던 메서드를 투표해 보세요.

디버깅에 드는 시간을 절반으로 줄이고, 더 빠르게 코드를 완성하는 경험을 직접 체험해 보시길 바랍니다! 🚀