Free

콘솔 로거

Console Logger는 모든 콘솔 출력(console.log, console.warn, console.error, console.info)을 캡처하여 페이지 위에 직접 표시되는 플로팅 패널에 보여줍니다. 브라우저 DevTools를 열지 않고도 JavaScript 오류, 디버그 메시지, 경고를 실시간으로 확인할 수 있습니다. 메시지는 유형별로 색상 구분되며, 오류에는 타임스탬프와 스택 트레이스가 포함됩니다.

Chrome에 추가 Edge에 추가 Firefox에 추가

콘솔 출력을 확인하기 위해 브라우저 DevTools를 여는 것은 화면 공간을 많이 차지합니다. 특히 작은 화면이나 페이지 전체를 보면서 로그를 모니터링해야 할 때 불편합니다. Console Logger는 가벼운 대안을 제공합니다. 페이지 위에 오버레이된 플로팅 패널에서 모든 콘솔 출력을 실시간으로 보여줍니다. 도구는 console.log, console.warn, console.error, console.info, 그리고 잡히지 않은 예외까지 전체 스택 트레이스와 함께 캡처합니다. 메시지는 색상으로 구분됩니다(오류는 빨강, 경고는 노랑, 정보는 파랑, 로그는 흰색/회색)이며, 이벤트 발생 시점을 추적할 수 있도록 타임스탬프가 포함됩니다. 필터 버튼으로 특정 메시지 유형만 표시할 수 있습니다. 크래시를 디버깅할 때는 오류만, 폐기 예정 메시지를 찾을 때는 경고만 볼 수 있습니다. 패널은 드래그 가능하고 크기 조절이 가능하며 반투명하여 페이지 콘텐츠를 너무 많이 가리지 않습니다.

라이브 미리보기

example.com/app

All Errors (2) Warn (1) Info (1) Log (3) Clear

LOG App initialized 10:24:01
INFO User session restored — ID: u_8f3k2 10:24:01
LOG Fetching /api/dashboard... 10:24:02
WARN Deprecated API endpoint used: /api/v1/stats 10:24:02
LOG Dashboard loaded (238ms) 10:24:02
ERR TypeError: Cannot read property 'map' of undefined 10:24:03
at Dashboard.render (app.js:142:18)
at processChild (react-dom.js:1284:14)
ERR Failed to load resource: 404 /api/avatar.png 10:24:03

주요 기능

실시간 콘솔 피드

콘솔 메시지가 로그되는 즉시 실시간으로 패널에 나타납니다. 페이지 초기화 로그, API 응답 처리, 사용자 상호작용 이벤트, 오류 메시지 등을 모두 스트리밍 형태로 볼 수 있습니다.

색상 구분 메시지 유형

오류는 빨강, 경고는 호박색/노랑, 정보는 파랑, 일반 로그는 흰색/회색으로 표시됩니다. 치명적인 오류와 일상적인 로그 메시지를 색상만으로 즉시 구분할 수 있습니다.

오류 스택 트레이스

JavaScript 오류에는 파일 이름, 함수 이름, 줄 번호가 포함된 전체 스택 트레이스가 표시됩니다. 파일 참조를 클릭하면 DevTools를 열지 않고도 오류가 발생한 정확한 위치를 확인할 수 있습니다.

유형 필터

상단 필터 버튼으로 All, Errors only, Warnings only, Info only, Logs only를 선택할 수 있습니다. 각 필터에 배지가 붙어 해당 유형의 메시지 개수를 보여줍니다.

타임스탬프

모든 메시지에 로그된 시간(HH:MM:SS 형식)이 표시됩니다. 이벤트 순서를 추적하고, 성능 문제(API 호출과 응답 사이 시간)를 파악하며, 사용자 행동과 메시지를 연관지을 수 있습니다.

지우기 및 내보내기

모든 메시지를 지워 새롭게 시작하거나, 페이지와 상호작용하면서 계속 누적할 수 있습니다. 패널에 총 메시지 수가 표시되며 필요 없을 때는 최소화할 수 있습니다.

주요 활용 사례

DevTools 없이 빠른 디버그

페이지 전체를 보면서 콘솔 출력을 확인해야 할 때? Console Logger를 사용하면 DevTools 패널이 화면 공간을 차지하지 않고 로그를 모니터링할 수 있습니다. 작은 화면이나 프레젠테이션 중에 특히 유용합니다.

API 호출 결과 모니터링

JavaScript가 API 응답을 로그한다면 Console Logger가 실시간으로 보여줍니다. 페이지와 DevTools를 오가며 확인할 필요 없이 요청/응답 데이터를 볼 수 있습니다.

조용한 JavaScript 오류 포착

일부 JavaScript 오류는 UI 변화 없이 조용히 발생합니다. Console Logger가 페이지 위에 표시되어 일반 브라우징 중에도 오류를 바로 알아차릴 수 있습니다.

데모 중 클라이언트 측 디버깅

라이브 데모 중에 Console Logger 패널을 구석에 표시해 두세요. 문제가 발생하면 DevTools를 열어 데모를 중단하지 않고도 즉시 오류 메시지를 확인할 수 있습니다.

서드파티 스크립트 문제 모니터링

분석, 채팅 위젯, 광고 네트워크 같은 서드파티 스크립트가 오류나 경고를 발생시킬 수 있습니다. Console Logger가 이를 캡처하여 외부 의존성의 건강 상태를 모니터링할 수 있습니다.

사용법

Console Logger 활성화

DevSuite Pro 플로팅 독을 열고 Console Logger 아이콘을 클릭하세요. 플로팅 패널이 나타나고 즉시 콘솔 출력을 캡처하기 시작합니다.

페이지와 상호작용

페이지를 정상적으로 사용하세요. 버튼 클릭, 내비게이션, 폼 제출 등을 하면 페이지의 JavaScript가 로그하는 콘솔 메시지가 패널에 나타납니다.

메시지 유형으로 필터

필터 버튼을 사용하여 오류, 경고, 로그만 표시하세요. 각 유형의 카운트 배지가 해당 메시지 수를 보여줍니다.

스택 트레이스 읽기

오류 메시지의 경우 스택 트레이스를 펼쳐 오류가 발생한 파일과 줄 번호를 확인하세요. 버그의 원인을 파악하는 데 사용하세요.

완료 후 지우기

"Clear"를 클릭하여 패널을 초기화하거나 도구를 비활성화하여 닫으세요. 페이지에 흔적이 남지 않습니다.