DevRecorder

DevRecorder란?

DevRecorder는 개발자를 위해 화면과 디버깅 컨텍스트를 함께 기록하는 화면 녹화 도구입니다. UI에서 발생한 이벤트와 동기화된 타임라인으로 콘솔 로그, 네트워크 요청, 내비게이션 이벤트를 포함한 영상을 녹화하여 버그가 발생한 정확한 순간으로 이동할 수 있습니다.

녹화기는 요청/응답 상세 정보(헤더, 페이로드, 응답 본문 포함)도 캡처하며, 재현 과정을 설명하는 마이크 오디오를 추가할 수 있습니다. 팀이 공유 가능한 링크로 전체 컨텍스트가 포함된 버그 리포트를 공유할 수 있도록 설계되었습니다.

주요 기능

프레임 동기화 디버깅 타임라인: 로그, 네트워크, 라우트/내비게이션 변경 사항이 영상 프레임에 고정되어 녹화 중 해당 순간으로 바로 이동할 수 있습니다.
콘솔 캡처 및 상세 보존: 콘솔 로그, 경고, 오류를 전체 스택 트레이스와 인자 페이로드와 함께 “DevTools에 표시되는 그대로” 기록합니다.
DevTools 수준의 네트워크 캡처: 헤더, 페이로드, 응답 본문, 타이밍 정보를 포함한 전체 네트워크 요청을 DevTools와 유사한 수준으로 캡처합니다.
내비게이션 및 라우트 변경 추적: SPA와 일반 페이지 흐름의 내비게이션 이벤트를 기록하여 사용자가 실제로 이동한 경로를 반영합니다.
마이크 나레이션 지원: 녹화 중 마이크 오디오를 추가하여 재현 상황을 설명할 수 있습니다.
공유 가능한 링크 출력 (로그인 없이 확인 가능): 팀원이 동기화된 디버그 데이터를 포함한 영상을 볼 수 있는 URL을 생성합니다.
MCP를 통한 AI 어시스턴트 컨텍스트: MCP 연결을 통해 AI 어시스턴트가 녹화 컨텍스트(영상, 로그, 네트워크)에 접근할 수 있습니다. Cursor에 녹화를 드래그하는 워크플로도 지원합니다.

사용 방법

확장 프로그램 설치: Chrome 웹 스토어에서 DevRecorder Chrome 확장 프로그램을 추가합니다.
녹화 시작: 녹화 버튼을 클릭한 후 캡처할 문제를 재현합니다.
필요한 부분만 녹화: 창을 선택하거나 영역을 지정하여 화면의 필요한 부분만 포함할 수 있습니다.
캡처 확인: 재현하는 동안 DevRecorder가 콘솔 출력, 네트워크 활동, 내비게이션 이벤트를 자동으로 기록합니다(마이크 나레이션 활성화 시 포함).
검토를 위한 공유: 공유 옵션을 사용하여 동기화된 디버그 컨텍스트를 팀원이 확인할 수 있는 URL을 생성합니다.
(선택) AI 도구에 컨텍스트 전송: MCP를 통해 지원되는 AI 도구가 녹화 내용을 사용할 수 있도록 연결합니다.

사용 사례

클라이언트 측 오류 재현: JavaScript/TypeError 흐름을 트리거하면서 녹화한 후, 콘솔 출력에 오류가 나타난 정확한 프레임으로 이동합니다.
요청/응답 불일치 디버깅: 실패한 API 호출(상태, 페이로드, 헤더, 응답 본문 포함)을 캡처하고 UI 상태 및 타이밍과 연관지어 분석합니다.
SPA 라우트 전환 추적: 내비게이션 후 버그가 발생하는 경우(예: 제품 → 장바구니 → 결제), 내비게이션 이벤트를 사용하여 실제 사용자 경로를 확인합니다.
나레이션 포함 버그 리포트 작성: 재현 단계를 녹화하면서 설명하여, 리뷰어가 로그와 네트워크 활동을 함께 확인할 수 있도록 합니다.
AI 지원 분석 준비: MCP로 연결된 AI 어시스턴트에 녹화 컨텍스트를 제공하여 영상과 디버그 데이터를 참조할 수 있게 합니다.

FAQ

DevRecorder는 녹화 공유 시 로그인이 필요한가요?

페이지에 따르면 팀원은 로그인 없이 공유 링크를 열어 확인할 수 있습니다.

DevRecorder는 녹화 중 무엇을 캡처하나요?

동기화된 콘솔 로그(스택 트레이스 및 인자 포함), 네트워크 요청(헤더, 페이로드, 응답 본문, 타이밍 포함), 내비게이션 이벤트를 캡처하며 마이크 나레이션을 포함할 수 있습니다.

화면의 일부만 녹화할 수 있나요?

네. 창을 선택하거나 영역을 지정하여 선택한 부분만 캡처할 수 있습니다.

AI 어시스턴트는 DevRecorder에서 어떻게 컨텍스트를 가져오나요?

MCP를 통해 연결하여 AI 어시스턴트가 녹화 컨텍스트(영상, 로그, 네트워크)에 접근할 수 있습니다. Cursor에 녹화를 드래그하는 예시 워크플로도 언급되어 있습니다.

어떤 브라우저 설정이 필요한가요?

Chrome 웹 스토어에서 DevRecorder 확장 프로그램을 추가하는 설치 안내가 있습니다.

대안

DevTools Performance/Network/Console 기록 워크플로: Chrome DevTools에 내장되어 있으며 캡처된 트레이스와 네트워크 세부 정보를 중심으로 합니다. 단일 프레임 동기화 비디오 타임라인 대신 수동 내보내기와 상관관계 분석이 필요합니다.
주석 기능이 있는 범용 화면 녹화 도구: 튜토리얼이나 버그 재현용 비디오를 녹화하는 도구는 별도의 로그 내보내기와 함께 사용할 수 있지만, 콘솔 및 네트워크 데이터를 비디오에 자동으로 동기화하지 않을 수 있습니다.
세션 수집 버그 보고 도구(예: 세션 리플레이): 세션 리플레이 제품은 사용자 상호작용 타임라인과 때때로 네트워크 세부 정보를 캡처합니다. 콘솔/네트워크를 프레임과 연동하여 DevTools처럼 캡처하는 것보다는 사용자 상호작용에 중점을 둡니다.