Preserve Log: 로그를 보존하는 마법 ✨

Preserve Log: 로그를 보존하는 마법 ✨

 

Preserve Log, 이 이름만 들어도 뭔가 중요한 정보를 “보존”해줄 것 같은 느낌이 들지 않나요? 웹 개발을 하다 보면, 콘솔에 기록된 로그가 브라우저를 새로고침하거나 페이지를 이동할 때 사라지는 경우가 많습니다. 하지만 Preserve Log는 이런 상황에서도 로그를 남겨 개발자의 디버깅 과정을 더욱 원활하게 도와주는 소중한 기능이에요. 이번 글에서는 Preserve Log의 역할과 사용법, 그리고 주의사항까지 상세히 다뤄보겠습니다!

 

1. Preserve Log란?

 

Preserve Log는 브라우저 개발자 도구(DevTools)에서 제공하는 기능으로, 페이지를 새로고침하거나 이동해도 콘솔(Console)에서 기록된 로그를 유지해주는 도구입니다.

• 기본적으로, 페이지를 새로고침하거나 이동하면 콘솔에 기록된 로그가 초기화됩니다.

• Preserve Log를 활성화하면 로그가 초기화되지 않고 계속 유지됩니다.

 

왜 필요한가요?

• 리디렉션 추적: 새로고침이나 페이지 이동이 필요한 디버깅 상황에서 로그를 유지할 수 있습니다.

• 네트워크 요청 분석: 특정 API 요청이 여러 단계를 거쳐야 한다면, 요청과 응답의 흐름을 한눈에 파악할 수 있습니다.

• 복잡한 에러 디버깅: 콘솔에 기록된 에러 로그를 놓치지 않도록 도와줍니다.

 

2. Preserve Log 사용법

 

사용 위치

 

Preserve Log는 브라우저 개발자 도구(DevTools)의 Console과 Network 탭에서 활성화할 수 있습니다.

 

활성화 방법 (Chrome 기준)

1. 개발자 도구 열기: 브라우저에서 F12 또는 Ctrl+Shift+I(Mac은 Cmd+Option+I)를 눌러 개발자 도구를 엽니다.

2. Console 탭 선택: Console 탭으로 이동합니다.

3. Preserve Log 활성화:

• Console 탭: Preserve log 체크박스를 클릭합니다.

• Network 탭: Preserve log 체크박스를 활성화하면, 네트워크 요청 기록이 페이지 리로드나 이동 후에도 유지됩니다.

 

3. Preserve Log의 주요 활용 사례

 

3.1 페이지 이동 중 발생하는 문제 추적

• 예를 들어, 로그인 후 리디렉션되는 페이지에서 에러가 발생한다고 가정해 봅시다.

• Preserve Log를 활성화하면, 로그인 요청과 리디렉션 간의 네트워크 요청 및 콘솔 로그를 새로고침 후에도 유지하여 원인을 분석할 수 있습니다.

 

3.2 네트워크 요청 디버깅

• API 호출이 여러 단계로 이루어질 때, 각 요청의 상태와 응답을 파악해야 합니다.

• Preserve Log를 활성화하면 이전 요청 기록이 사라지지 않아 요청 흐름을 한눈에 볼 수 있습니다.

 

3.3 서비스 워커(Service Worker) 디버깅

• PWA(Progressive Web App)에서 서비스 워커는 여러 이벤트를 처리합니다.

• Preserve Log를 켜두면, 서비스 워커의 동작 과정에서 발생하는 로그를 안정적으로 분석할 수 있습니다.

 

4. 활용 시 주의할 점

 

4.1 로그가 많아질수록 성능 저하 가능

• Preserve Log를 활성화하면 로그가 계속 쌓이므로, 개발자 도구가 느려질 수 있습니다.

• 로그가 너무 많아지면 불필요한 로그를 지우거나, 다시 시작하는 것도 방법입니다.

 

4.2 중요한 데이터 노출 위험

• 로그에 민감한 데이터(API 키, 사용자 정보 등)가 포함될 수 있습니다.

• 개발 환경에서만 사용하고, 데이터를 외부로 공유하지 않도록 주의하세요.

 

4.3 로그가 많으면 가독성 저하

• 필터 기능을 활용해 특정 메시지 또는 네트워크 요청만 보이게 설정하세요.

• 예: console.log, console.warn, console.error만 필터링.

 

5. Preserve Log와 함께 알아두면 좋은 팁

 

5.1 네트워크 요청 필터링

 

Network 탭에서 Preserve Log를 사용할 때 특정 요청만 보고 싶다면 필터를 사용하세요.

• 필터 예시:

• status-code:200: 200 상태 코드만 보기.

• method:POST: POST 요청만 보기.

• url:api: 특정 API 요청만 보기.

 

5.2 Console 탭에서 로그 검색

• Ctrl+F를 눌러 키워드를 검색하면 방대한 로그에서도 원하는 정보를 빠르게 찾을 수 있습니다.

 

5.3 로그 클리어

• 로그가 너무 많아졌다면, Clear Console (Ctrl+L) 버튼으로 로그를 초기화하세요.

 

6. Preserve Log vs. 일반 로그

 

특징 일반 로그 Preserve Log

로그 유지 여부 페이지 새로고침 시 초기화 새로고침 후에도 유지

활용 범위 디버깅 간단한 작업 리디렉션, 복잡한 네트워크 추적

성능 로그가 초기화되므로 부담 적음 로그가 쌓이면 성능 저하 가능

 

7. 결론: Preserve Log는 디버깅의 친구!

 

Preserve Log는 리디렉션, API 호출, 복잡한 네트워크 흐름 등 디버깅이 필요한 상황에서 강력한 도구입니다. 브라우저 새로고침이나 페이지 이동 후에도 콘솔과 네트워크 요청을 유지하여 더 깊은 디버깅을 가능하게 만들어줍니다. 적절한 필터와 함께 사용하면 더 효율적이고 생산적인 디버깅이 가능하니, 적극 활용해보세요!

 

🌷전설의 개발자가 되어봅시당!🌷