Debugging 최신 기능 완벽 가이드

현대 개발 도구의 최신 디버깅 기능을 소개합니다. 초급 개발자도 쉽게 활용할 수 있는 실전 디버깅 테크닉을 다룹니다.

---

---

들어가며

이 글에서는 Debugging 최신 기능 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. console.table로_데이터_시각화
2. console.time으로_성능_측정
3. debugger_문으로_즉시_중단
4. console.trace로_호출_스택_추적
5. console.assert로_조건부_디버깅
6. console.group으로_로그_그룹화
7. 조건부_브레이크포인트_활용
8. console.dir로_객체_상세_정보_보기
9. Source_Maps로_원본_코드_디버깅
10. Network_탭으로_API_요청_디버깅
11. Live_Expressions로_실시간_값_모니터링
12. Logpoints로_코드_수정_없이_로깅

---

1. console.table로 데이터 시각화

개요

배열이나 객체 데이터를 테이블 형식으로 보기 좋게 출력하여 디버깅을 쉽게 할 수 있습니다.

코드 예제

const users = [
  { id: 1, name: '김철수', age: 25 },
  { id: 2, name: '이영희', age: 30 },
  { id: 3, name: '박민수', age: 28 }
];
console.table(users);

설명

console.table()을 사용하면 데이터를 표 형식으로 깔끔하게 표시하여 한눈에 구조를 파악할 수 있습니다.

---

2. console.time으로 성능 측정

개요

코드 실행 시간을 측정하여 성능 병목 구간을 찾을 수 있는 간단한 방법입니다.

코드 예제

console.time('데이터 처리');
const result = Array.from({ length: 1000000 }, (_, i) => i * 2);
console.timeEnd('데이터 처리');

// 출력: 데이터 처리: 45.123ms

설명

console.time()과 console.timeEnd()를 쌍으로 사용하면 그 사이 코드의 실행 시간을 밀리초 단위로 측정할 수 있습니다.

---

3. debugger 문으로 즉시 중단

개요

코드 중간에 debugger 문을 삽입하여 개발자 도구가 열려있을 때 자동으로 실행을 멈출 수 있습니다.

코드 예제

function calculateTotal(items) {
  let total = 0;
  debugger; // 여기서 실행이 멈춤
  for (let item of items) {
    total += item.price;
  }
  return total;
}

설명

debugger 키워드를 사용하면 브레이크포인트를 코드에 직접 작성할 수 있어 복잡한 로직을 단계별로 확인할 수 있습니다.

---

4. console.trace로 호출 스택 추적

개요

함수가 어떤 경로로 호출되었는지 전체 호출 스택을 확인하여 복잡한 코드 흐름을 이해할 수 있습니다.

코드 예제

function outer() {
  inner();
}
function inner() {
  console.trace('함수 호출 경로');
}
outer();

설명

console.trace()는 현재 위치까지의 모든 함수 호출 경로를 보여줘서 코드 실행 흐름을 파악하는 데 유용합니다.

---

5. console.assert로 조건부 디버깅

개요

특정 조건이 거짓일 때만 에러 메시지를 출력하여 예상치 못한 상황을 빠르게 감지할 수 있습니다.

코드 예제

function divide(a, b) {
  console.assert(b !== 0, '0으로 나눌 수 없습니다!');
  return a / b;
}
divide(10, 0); // Assertion failed 경고 출력
divide(10, 2); // 정상 실행

설명

console.assert()는 첫 번째 인자가 false일 때만 두 번째 인자의 메시지를 출력하여 조건 검증을 간단하게 할 수 있습니다.

---

6. console.group으로 로그 그룹화

개요

관련된 로그들을 그룹으로 묶어서 접고 펼칠 수 있게 하여 콘솔 출력을 깔끔하게 정리합니다.

코드 예제

console.group('사용자 정보');
console.log('이름: 김철수');
console.log('나이: 25');
console.log('이메일: kim@example.com');
console.groupEnd();

설명

console.group()과 console.groupEnd() 사이의 로그들이 하나의 그룹으로 묶여 콘솔에서 접거나 펼칠 수 있습니다.

---

7. 조건부 브레이크포인트 활용

개요

특정 조건이 만족될 때만 실행을 멈추는 조건부 브레이크포인트로 효율적으로 디버깅할 수 있습니다.

코드 예제

// 브라우저 DevTools에서 브레이크포인트 우클릭
// "Edit breakpoint" 선택 후 조건 입력
for (let i = 0; i < 100; i++) {
  const result = processData(i);
  // 조건: i === 50 || result === null
}

설명

반복문에서 특정 값일 때만 멈추고 싶다면 조건부 브레이크포인트를 설정하여 불필요한 중단을 피할 수 있습니다.

---

8. console.dir로 객체 상세 정보 보기

개요

DOM 요소나 객체의 속성을 트리 구조로 자세히 확인할 수 있어 내부 구조 파악에 유용합니다.

코드 예제

const element = document.querySelector('button');
console.dir(element);

const obj = { a: 1, b: { c: 2, d: 3 } };
console.dir(obj);

설명

console.dir()은 객체의 모든 속성과 메서드를 계층적으로 보여줘서 console.log()보다 더 상세한 정보를 확인할 수 있습니다.

---

9. Source Maps로 원본 코드 디버깅

개요

압축되거나 트랜스파일된 코드 대신 원본 소스 코드를 디버깅할 수 있게 해주는 기능입니다.

코드 예제

// webpack.config.js
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  // 이제 원본 TypeScript/ES6 코드로 디버깅 가능
};

설명

Source Map을 활성화하면 빌드된 코드 대신 작성한 원본 코드에서 직접 브레이크포인트를 걸고 디버깅할 수 있습니다.

---

10. Network 탭으로 API 요청 디버깅

개요

브라우저 개발자 도구의 Network 탭을 활용하여 API 요청과 응답을 상세히 확인할 수 있습니다.

코드 예제

// API 요청 전 Network 탭 열기
fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
// Network 탭에서 요청 클릭 → Headers, Response 확인

설명

Network 탭에서 요청 URL, 헤더, 응답 데이터, 상태 코드, 소요 시간 등을 확인하여 API 통신 문제를 쉽게 파악할 수 있습니다.

---

11. Live Expressions로 실시간 값 모니터링

개요

변수나 표현식의 값을 실시간으로 계속 확인할 수 있어 동적으로 변하는 값을 추적하기 좋습니다.

코드 예제

// Chrome DevTools Console에서
// "Create live expression" 아이콘 클릭
// 표현식 입력: document.body.scrollTop
// 또는: new Date().toLocaleTimeString()
// 스크롤하거나 시간이 지나면 자동으로 값 갱신

설명

Live Expression은 페이지의 값이 변할 때마다 자동으로 업데이트되어 매번 콘솔에 입력하지 않아도 실시간 모니터링이 가능합니다.

---

12. Logpoints로 코드 수정 없이 로깅

개요

실제 코드를 수정하지 않고 브라우저에서만 로그를 추가하여 디버깅할 수 있는 혁신적인 기능입니다.

코드 예제

// DevTools에서 라인 번호 우클릭
// "Add logpoint" 선택
// 표현식 입력: '사용자 ID:', userId, '상태:', status
function processUser(userId, status) {
  // Logpoint가 여기서 자동으로 로그 출력
  return updateDatabase(userId, status);
}

설명

Logpoint를 사용하면 소스 코드를 직접 수정하지 않고도 원하는 위치에 로그를 추가할 수 있어 프로덕션 디버깅에 유용합니다. ``` 초급 개발자들이 바로 활용할 수 있는 최신 디버깅 기능 12가지를 정리했습니다. 각 기능은 실제 코드 예제와 함께 제공되어 즉시 실습해볼 수 있습니다.

---

마치며

이번 글에서는 Debugging 최신 기능 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #Debugging #Console #Breakpoints #DevTools