icon안동민 개발노트

고급 디버깅 기법

 효과적인 디버깅은 웹 개발에서 핵심적인 기술입니다.

 이 절에서는 고급 디버깅 기법과 도구들을 상세히 살펴보겠습니다.

브라우저 개발자 도구의 고급 기능

  1. 조건부 중단점 : 특정 조건이 충족될 때만 실행을 중지합니다.
// 브라우저 콘솔에서
sources 탭 > 라인 넘버 우클릭 > Add conditional breakpoint
// 예: i === 5
  1. 로그 포인트 : 코드 실행을 중단하지 않고 로그를 출력합니다.
// 브라우저 콘솔에서
sources 탭 > 라인 넘버 우클릭 > Add logpoint
// 예: "Current value:", value
  1. 블랙박스 스크립팅 : 특정 스크립트를 디버깅에서 제외합니다.
// 브라우저 콘솔에서
sources 탭 > 파일 우클릭 > Blackbox script

소스맵 (Source Map)

 소스맵은 압축되거나 변환된 코드를 원본 소스 코드와 매핑합니다.

 1. 생성 방법

  • webpack, Rollup 등의 번들러에서 설정
// webpack.config.js
module.exports = {
   devtool: 'source-map'
};

 2. 디버깅에서의 활용

  • 브라우저에서 원본 소스 코드로 디버깅 가능
  • 스택 트레이스에서 정확한 라인 번호 확인

비동기 코드 디버깅

  1. async/await 디버깅
async function fetchData() {
   debugger;
   const response = await fetch('https://api.example.com/data');
   const data = await response.json();
   return data;
}
  1. Promise 체인 추적

 Chrome DevTools의 Async 스택 트레이스 활성화하기

  • Settings > Preferences > Enable async stack traces

메모리 누수 탐지 및 해결

  1. 힙 스냅샷 분석 : Memory 탭에서 힙 스냅샷을 생성하고 비교합니다.
// 메모리 누수 예시
let leaked = [];
function leakMemory() {
   leaked.push(new Array(1000000).fill('x'));
}
setInterval(leakMemory, 1000);
  1. 해결 방법
  • 불필요한 참조 제거
  • 이벤트 리스너 정리
  • 순환 참조 주의

성능 프로파일링

 Chrome DevTools의 Performance 탭 사용

  1. 녹화 시작
  2. 작업 수행
  3. 녹화 중지
  4. 결과 분석 (CPU 사용량, 호출 스택 등)

 최적화 예

// 최적화 전
for (let i = 0; i < 1000000; i++) {
  document.body.style.backgroundColor = 'red';
}
 
// 최적화 후
document.body.style.backgroundColor = 'red';

네트워크 요청 디버깅

 1. Network 탭 활용

  • 요청/응답 헤더, 본문 검사
  • 타임라인 분석

 2. 보안 이슈 트러블슈팅

  • CORS 오류 : 서버 측 Access-Control-Allow-Origin 헤더 확인
  • CSP 위반 : Console 탭에서 CSP 오류 메시지 확인

효과적인 로깅 전략

 1. 로그 레벨 사용

const log = {
   error: console.error.bind(console),
   warn: console.warn.bind(console),
   info: console.info.bind(console),
   debug: console.debug.bind(console)
};
 
log.error('심각한 오류');
log.info('일반 정보');

 2. 로그 분석 도구

  • ELK 스택 (Elasticsearch, Logstash, Kibana)
  • Splunk
  • Sentry

원격 디버깅

 1. 모바일 디버깅

  • iOS : Safari Web Inspector
  • Android : Chrome Remote Debugging

 2. 원격 디버깅 설정

# Android
adb devices
adb forward tcp:9222 localabstract:chrome_devtools_remote

 Chrome에서 chrome://inspect 접속

프로덕션 환경 디버깅 전략

 1. 에러 모니터링 서비스 사용

  • Sentry, Rollbar 등

 2. 로그 집중화

  • 중앙 로그 서버 구축

 3. 사용자 피드백 채널 확보

  • 인앱 피드백 기능 구현

 4. 단계별 접근

  • 로그 분석
  • 에러 재현
  • 테스트 환경에서 디버깅
  • 필요시 프로덕션 디버깅

 고급 디버깅 기법은 복잡한 웹 애플리케이션 개발에서 필수적인 역할을 합니다. 브라우저 개발자 도구의 고급 기능들은 디버깅 과정을 크게 향상시킵니다. 조건부 중단점을 사용하면 특정 조건에서만 코드 실행을 중단할 수 있어, 복잡한 로직을 효과적으로 디버깅할 수 있습니다. 로그 포인트는 코드 실행을 중단하지 않고도 중요 정보를 로깅할 수 있게 해주며, 블랙박스 스크립팅은 라이브러리 코드 등을 디버깅에서 제외하여 집중도를 높일 수 있습니다.

 소스맵은 압축되거나 변환된 코드를 원본 소스와 연결해주는 중요한 도구입니다. 이를 통해 개발자는 실제 운영 환경에서도 원본 코드를 기반으로 디버깅을 수행할 수 있습니다. webpack이나 Rollup과 같은 번들러에서 소스맵 생성을 설정하면, 브라우저에서 자동으로 이를 인식하여 사용합니다.

 비동기 코드 디버깅은 현대 웹 개발에서 중요한 부분입니다. async/await 구문을 사용할 때는 일반 동기 코드처럼 디버거를 사용할 수 있습니다. Promise 체인의 경우, Chrome DevTools의 Async 스택 트레이스 기능을 활용하면 비동기 호출의 전체 흐름을 추적할 수 있습니다.

 메모리 누수는 성능 저하의 주요 원인 중 하나입니다. 힙 스냅샷 분석을 통해 메모리 사용 패턴을 파악하고, 불필요하게 증가하는 객체를 식별할 수 있습니다. 이벤트 리스너 정리, 순환 참조 제거 등의 방법으로 메모리 누수를 해결할 수 있습니다.

 성능 프로파일링은 애플리케이션의 병목 현상을 찾아내는 데 중요합니다. Chrome DevTools의 Performance 탭을 사용하면 CPU 사용량, 호출 스택 등을 상세히 분석할 수 있습니다. 이를 통해 불필요한 연산이나 비효율적인 DOM 조작 등을 식별하고 최적화할 수 있습니다.

 네트워크 요청 디버깅은 Network 탭을 통해 효과적으로 수행할 수 있습니다. 요청/응답 헤더와 본문을 검사하고, 타임라인을 분석하여 성능 이슈를 파악할 수 있습니다. CORS나 CSP와 같은 보안 관련 이슈도 이 과정에서 식별하고 해결할 수 있습니다.

 효과적인 로깅은 문제 해결의 핵심입니다. 로그 레벨을 적절히 사용하여 중요도에 따라 로그를 구분하고, ELK 스택이나 Splunk 같은 로그 분석 도구를 활용하면 대규모 로그에서도 필요한 정보를 신속하게 찾을 수 있습니다.

 원격 디버깅 기술은 모바일 환경에서의 문제 해결에 필수적입니다. iOS와 Android 각각의 도구를 활용하여 실제 기기에서 발생하는 문제를 직접 디버깅할 수 있습니다.

 마지막으로, 프로덕션 환경에서의 디버깅은 신중하게 접근해야 합니다. 에러 모니터링 서비스, 중앙화된 로깅 시스템, 사용자 피드백 채널 등을 활용하여 문제를 감지하고 분석해야 합니다. 단계별 접근 방식을 통해 최소한의 위험으로 문제를 해결할 수 있습니다.

 이러한 고급 디버깅 기법들을 숙지하고 적절히 활용함으로써, 개발자는 복잡한 웹 애플리케이션의 문제를 효과적으로 진단하고 해결할 수 있습니다. 지속적인 학습과 실전 경험을 통해 이러한 기술을 발전시키는 것이 중요합니다.

이전으로다음으로