[Study] 크롬 브라우저 vs. 사파리 브라우저의 개발자 도구 기능

크롬 개발자 도구 (Chrome DevTools)

크롬 개발자 도구는 F12 또는 Ctrl + Shift + I (Cmd + Option + I) 로 실행할 수 있으며, 다양한 패널을 제공합니다.
1) 콘솔(Console) - 에러 확인 및 디버깅의 중점

• console.log(), console.error(), console.warn() 등을 출력하여 문제를 진단 가능
• 스택 트레이스(stack trace) 확인 → 에러 발생 위치 및 호출 스택 추적
• 필터 기능 제공 → 특정 유형의 로그만 확인 가능
• Elements 패널에서 선택한 요소를 빠르게 참조

// 활용 예시
console.log('디버깅 시작'); // 일반 로그
console.warn('경고 메시지'); // 경고 표시
console.error('에러 발생!'); // 에러 로그
console.trace(); // 호출 스택 출력

2) 네트워크(Network) - API 요청 디버깅

• AJAX 요청이나 REST API 호출을 확인 가능
• 응답 상태 코드 (200, 400, 500) 및 응답 데이터 확인
• 느린 네트워크 환경을 시뮬레이션하여 테스트 가능
• 특정 요청을 재전송(Replay)하여 API 디버깅 가능

// 활용 예시
* API 요청이 실패하면 Preview, Response 탭을 확인하여 에러 메시지 분석
* 캐시 없이 새로고침 (Ctrl + Shift + R)하여 네트워크 캐시 문제 해결
* 필터를 사용하여 특정 파일 유형 (XHR, JS, CSS, Img) 만 확인

3) 소스(Sources) - 브레이크포인트 디버깅

• Sources 패널에서 직접 브레이크포인트 설정하여 디버깅 가능
• 코드 실행 흐름을 한 줄씩 확인 (Step Over, Step Into, Step Out 기능 활용)
• Watch 패널을 사용하여 특정 변수의 값 실시간 모니터링 가능

// 활용 예시
* 특정 함수가 실행될 때 브레이크포인트 설정하여 흐름 추적
* console.log 대신 개발자 도구의 Watch 변수를 활용하여 디버깅

4) Elements - DOM 및 CSS 디버깅

• HTML, CSS 구조 실시간 수정 가능
• 특정 요소의 box model 확인하여 레이아웃 문제 해결
• Event Listeners 패널에서 특정 요소의 이벤트 핸들러 확인

// 활용 예시
* 버튼 클릭 이벤트가 실행되지 않을 경우 Event Listeners 패널에서 핸들러 등록 여부 확인
* Ctrl + Shift + C 로 요소 선택 후 CSS 속성 실시간 조정

5) 애플리케이션(Application) - 로컬 데이터 디버깅

• Local Storage, Session Storage, Cookies 값 확인 및 변경 가능
• IndexedDB? 활용 여부 확인
• Service Workers? 확인 및 캐시 삭제

// 활용 예시
* 로그인 상태 유지 문제 발생 시 Local Storage 및 Cookies 값 확인 후 조정

6) 성능(Performance) 및 메모리(Memory) - 최적화

• Performance 패널에서 웹페이지의 로딩 속도 및 스크립트 실행 시간 분석
• Memory 패널을 사용하여 메모리 누수(leak) 감지
• Lighthouse? 활용하여 페이지 성능 및 SEO 평가..를 어떻게하지...?

// 활용 예시
* FPS(Frame Per Second) 확인하여 애니메이션 성능 최적화
* 특정 함수가 실행될 때 CPU 사용량 분석

사파리 개발자 도구 (Safari Web Inspector)

사파리 개발자 도구는 기본적으로 비활성화되어 있어, 다음 경로에서 활성화해야 합니다.
설정 → Safari → 고급 → "개발자용 메뉴 표시" 활성화
이후 Cmd + Option + I 를 눌러 개발자 도구를 실행.

1) 콘솔(Console)

• 크롬과 유사하게 console.log(), console.error(), console.warn() 활용 가능
• 스택 트레이스를 통해 오류의 발생 위치 및 함수 호출 과정 추적

// 활용 예시
console.table([{name: 'test', value: 1}, {name: 'example', value: 2}]); 

2) 네트워크(Network)

• API 요청 및 응답을 확인할 수 있으며, Preview 및 Response 데이터를 확인 가능
• Throttling 기능을 통해 느린 네트워크 환경 테스트 가능

// 활용 예시
* API 응답이 실패할 경우 Response 탭을 확인하여 에러 메시지 분석

3) 소스(Resources)

• 크롬의 Sources 패널과 유사하며, 브레이크포인트 설정 가능
• Step Over, Step Into, Step Out 기능 활용하여 코드 실행 흐름 확인
• 특정 변수의 값을 Watch 패널에서 실시간 추적 가능

// 활용 예시
* Event Breakpoints 활용하여 특정 이벤트(click, focus, submit) 발생 시 디버깅

4) 요소(Elements)

• 실시간 HTML/CSS 조작 가능
• Styles 패널에서 CSS 속성 변경 및 Computed 탭에서 적용된 스타일 확인

// 활용 예시
* 특정 요소의 box-shadow 또는 padding 값 조정하여 레이아웃 문제 해결

5) 애플리케이션(Storage)

• Local Storage, Session Storage, Cookies 값 확인 및 수정 가능
• Service Workers 및 캐시 정책 관리 가능

// 활용 예시
* 로그인 정보가 유지되지 않는 문제 발생 시 Cookies 값 확인 및 삭제 후 재로그인

6) 성능(Timelines?)

• Timelines 패널에서 스크립트 실행 시간, 레이아웃 리렌더링 비용 분석 가능
• Memory 패널을 활용하여 메모리 사용량 추적 및 누수 감지 가능

// 활용 예시
* 특정 함수 실행 후 메모리 점유율이 급격히 증가하는 경우 메모리 누수 의심

---

크롬 vs 사파리 개발자 도구 비교

기능	크롬 개발자 도구	사파리 개발자 도구
콘솔(Debugging)	강력한 콘솔 기능?	기본적인 콘솔 기능 제공
네트워크	요청 필터링, Replay 지원	API 요청 모니터링 가능
소스	브레이크포인트, Call Stack? 지원	브레이크포인트 지원
요소 검사	실시간 HTML/CSS 수정	HTML/CSS 수정 가능
애플리케이션	LocalStorage, Cookies 확인	LocalStorage, Cookies 관리
성능 분석	Lighthouse?, CPU 분석	Timelines? 활용

크롬 개발자 도구는 기능이 풍부하고 디버깅이 직관적이지만, 사파리는 애플 기기에서의 성능 최적화 및 디버깅이 강점.
크로스 브라우징 이슈? 해결 시 두 브라우저의 개발자 도구를 병행하여 활용 추천.

크롬 vs 사파리 개발자 도구 차이점은...?

추후 작성 예정