Crontab 파이썬 스크립트 실행 안될 때 환경변수 PATH 문제 해결 완벽 정리

날짜:
0

Chrome DevTools 100% 활용법: Network 탭과 Console 디버깅 완벽 가이드

날짜:

프론트엔드 개발 중 API 응답이 예상과 다르거나, 콘솔 에러가 어디서 발생했는지 추적이 어려운 경우가 잦습니다. Chrome DevTools는 이런 문제를 즉시 진단하고 해결할 수 있는 필수 도구이지만, 대부분의 개발자는 console.log()와 Elements 탭 정도만 사용합니다. 이 글에서는 실무에서 바로 적용 가능한 Network 탭 분석법과 Console 디버깅 테크닉을 중심으로, DevTools를 100% 활용하는 방법을 정리합니다.


크롬개발자도구Network와Console탭마스터하기




1. DevTools 기본 설정과 Dock 최적화

개발자 도구를 여는 방법은 단축키를 사용하는 것이 가장 빠릅니다.

  • Mac: Command + Option + I (또는 Command + Shift + C로 요소 선택 모드 진입)
  • Windows/Linux: F12 또는 Ctrl + Shift + I
  • 공통: 페이지에서 우클릭 후 "검사(Inspect)" 선택

Dock 위치는 작업 환경에 따라 조정해야 합니다. 우측 상단의 ⋮ 아이콘 → Dock side에서 선택 가능합니다.

  • 오른쪽 배치: 와이드 모니터 환경에서 코드와 결과를 동시에 확인할 때 유리
  • 아래 배치: 노트북처럼 수평 공간이 제한적일 때 권장
  • 별도 창: 듀얼 모니터 환경에서 DevTools를 독립적으로 배치

주의: Dock 위치를 자주 바꾸면 단축키 근육 기억이 흐트러지므로, 환경별로 한 가지 설정을 고정하는 것을 권장합니다.

2. Network 탭으로 API 호출 분석하기

Network 탭은 모든 HTTP 요청(API, 이미지, JS, CSS 등)의 세부사항을 실시간으로 추적합니다. 프론트엔드-백엔드 간 통신 문제를 진단할 때 가장 먼저 확인해야 할 탭입니다.

2.1. 주요 확인 항목

  • Status: 200(성공), 404(Not Found), 500(서버 에러) 등 HTTP 상태 코드 확인
  • Type: xhr, fetch, script, stylesheet 등 요청 타입 필터링
  • Size: 전송 데이터 크기 (압축 전/후 비교 가능)
  • Time: 요청 소요 시간 (TTFB, Content Download 구간별 분석)
  • Waterfall: 요청 순서와 병목 구간 시각화

2.2. 실무 활용 시나리오

  1. API 응답 검증: 요청 클릭 → Headers 탭에서 Request/Response Headers 확인, Payload 탭에서 전송한 Body 확인, Preview/Response 탭에서 실제 응답 데이터 검증
  2. CORS 에러 진단: Console에 CORS 에러가 뜨면 Network 탭에서 해당 요청의 Response Headers에 Access-Control-Allow-Origin이 누락되었는지 확인
  3. 캐싱 문제 해결: Disable cache 옵션 활성화 후 새로고침(Cmd+Shift+R)하여 캐시 없이 재요청
  4. 느린 API 추적: Waterfall에서 Waiting(TTFB) 시간이 긴 요청을 찾아 백엔드 최적화 대상으로 리포트

팁: Preserve log 옵션을 활성화하면 페이지 이동 후에도 이전 요청 기록이 유지되어, 리다이렉트 체인 분석 시 유용합니다.

3. Console 디버깅 테크닉과 유틸리티 커맨드

Console은 단순히 로그를 출력하는 창이 아닙니다. 자바스크립트를 즉시 실행하고, DOM을 조작하며, 복잡한 객체를 검사할 수 있는 REPL 환경입니다.

3.1. 로그 필터링과 정리

  • Filter 검색: 상단 Filter 입력창에 키워드 입력 시 해당 문자열을 포함한 로그만 표시
  • Levels 설정: Verbose, Info, Warnings, Errors 체크박스로 원하는 유형만 필터링
  • 콘솔 초기화: clear() 명령어 또는 좌측 🚫 아이콘 클릭

3.2. 실무에서 자주 쓰는 Console 커맨드

  • copy(object): 객체나 배열을 클립보드에 복사. API 응답을 JSON 파일로 저장할 때 유용
    fetch('/api/users').then(r => r.json()).then(data => copy(data))
  • $$('selector'): querySelectorAll의 단축 명령어. 결과가 배열로 반환되어 map, filter 등 메서드 체이닝 가능
    $$('img').forEach(img => console.log(img.src))
  • $0, $1, $2...: Elements 탭에서 선택한 요소를 Console에서 참조. $0은 가장 최근 선택 요소
  • monitor(function): 특정 함수가 호출될 때마다 인자를 자동으로 로그 출력
    monitor(myFunction)
  • table(array): 배열이나 객체를 테이블 형식으로 출력하여 가독성 향상
    console.table([{name: 'Alice', age: 25}, {name: 'Bob', age: 30}])

주의: 프로덕션 환경에서는 console.log를 제거하거나, 빌드 시 자동으로 제거하는 플러그인(terser, babel-plugin-transform-remove-console)을 사용해야 합니다. 로그가 남아있으면 민감 정보 노출과 성능 저하 위험이 있습니다.

4. Source 탭과 Breakpoint 디버깅

Console 에러 메시지를 클릭하면 Source 탭으로 자동 이동하여 에러가 발생한 코드 라인을 즉시 확인할 수 있습니다. 소스맵(Source Map)이 활성화되어 있으면 압축된 번들 파일이 아닌 원본 소스 코드 위치로 이동합니다.

4.1. Breakpoint 활용법

  • 라인 Breakpoint: 코드 라인 번호 클릭 시 해당 지점에서 실행 일시정지
  • Conditional Breakpoint: 라인 번호 우클릭 → "Add conditional breakpoint"로 특정 조건일 때만 중단
    userId === 123
  • Event Listener Breakpoint: 우측 패널에서 특정 이벤트(click, scroll 등) 발생 시 자동 중단
  • XHR/Fetch Breakpoint: 특정 URL 패턴의 API 호출 시 자동 중단

디버그 모드에서는 Call Stack, Scope, Watch 패널을 통해 함수 호출 스택과 변수 상태를 실시간으로 추적할 수 있습니다. Step Over(F10), Step Into(F11), Step Out(Shift+F11) 단축키로 코드 흐름을 제어하십시오.

권장: 소스맵을 활성화하려면 빌드 도구(Webpack, Vite 등) 설정에서 devtool: 'source-map' 옵션을 추가하십시오. 프로덕션에서는 보안상 소스맵 노출을 제한해야 하므로, 별도 서버에 업로드하거나 Sentry 같은 에러 트래킹 도구와 연동하는 방식을 권장합니다.

5. Device 모드로 반응형 테스트 자동화하기

Device 모드(Toggle device toolbar, Cmd+Shift+M)를 활성화하면 다양한 기기와 해상도에서의 렌더링을 에뮬레이션할 수 있습니다.

5.1. 주요 기능

  • 기기 프리셋: 상단 드롭다운에서 iPhone 14 Pro, Galaxy S23, iPad Pro 등 주요 기기 선택
  • 커스텀 해상도: Responsive 모드에서 직접 너비/높이 입력
  • User Agent 변경: ⋮ 메뉴 → Add custom device에서 특정 User Agent 문자열 저장 가능 (크롤러 테스트 시 유용)
  • 네트워크 스로틀링: Fast 3G, Slow 3G 등으로 느린 네트워크 환경 시뮬레이션
  • 터치 에뮬레이션: 마우스 클릭이 터치 이벤트로 변환되어 모바일 제스처 테스트 가능

5.2. 실무 적용 시 주의사항

Device 모드는 에뮬레이션일 뿐 실제 기기 환경과 100% 동일하지 않습니다. 다음 항목은 반드시 실기기에서 재검증해야 합니다.

  • iOS Safari의 독자적인 렌더링 엔진(WebKit) 동작
  • 삼성 인터넷, UC 브라우저 등 서드파티 브라우저의 CSS 지원 차이
  • 실제 터치 제스처의 물리적 반응 속도와 관성
  • 기기별 GPU 성능 차이에 따른 애니메이션 끊김

권장 워크플로우: 개발 초기에는 Device 모드로 빠르게 반응형 레이아웃을 검증하고, QA 단계에서는 BrowserStack이나 실물 테스트 기기로 최종 확인하십시오.

6. 생산성을 높이는 DevTools 꿀팁 5가지

  1. Command Palette 활용: Cmd+Shift+P(Mac) 또는 Ctrl+Shift+P(Win)로 모든 DevTools 기능을 검색 가능. "screenshot", "coverage", "disable javascript" 등 자주 쓰는 기능을 단축키 없이 실행
  2. Snippet 저장: Sources 탭 → Snippets에서 자주 쓰는 JS 코드를 저장하고 우클릭 → Run으로 즉시 실행. API 테스트용 fetch 코드, localStorage 초기화 스크립트 등을 저장해두면 유용
  3. Coverage 분석: Cmd+Shift+P → "Show Coverage"로 사용되지 않는 CSS/JS 코드 비율 확인. 번들 최적화 대상을 찾을 때 활용
  4. Local Overrides: Sources 탭 → Overrides에서 로컬 폴더를 지정하면, 운영 서버의 파일을 로컬에서 수정하여 테스트 가능. 빌드 없이 핫픽스를 시뮬레이션할 때 유용
  5. Performance 프로파일링: Performance 탭에서 Record → 페이지 조작 → Stop으로 렌더링 병목을 프레임 단위로 분석. Main Thread에서 Long Task(50ms 이상)를 찾아 최적화

결론

Chrome DevTools는 Network 탭으로 API 통신을 검증하고, Console에서 유틸리티 커맨드로 데이터를 조작하며, Source 탭으로 Breakpoint 디버깅을 수행하는 통합 개발 환경입니다. Device 모드는 반응형 테스트의 출발점이지만, 실기기 검증을 생략해서는 안 됩니다. 지금 당장 실행할 Action Item은 copy(), $$(), table() 세 가지 Console 커맨드를 실제 프로젝트에서 10회 이상 사용해보는 것입니다. 단축키와 커맨드가 근육 기억으로 전환되면, 디버깅 속도가 체감상 2배 이상 빨라집니다.


#함께 읽으면 좋은 글

마크다운 문법 5분 정리: 블로그 포스팅과 README 작성의 기초 : 바로보기

댓글

댓글 쓰기