Skip to main content
Version: 0.2.34

VSCode Extension

설치 가이드​

VSCode Extension에서 tracivo를 검색하여 설치합니다.

Extension 설치

사용 가이드​

1. 로그인​

Extension을 설치하면 로그인 화면이 나타납니다.

계정 발급

Tracivo 계정이 없을 경우 올리브랩스 팀에 발급을 요청해주세요.

Tracivo 대시보드 로그인 정보를 입력합니다.

로그인 화면

2. 프로젝트 선택​

Tracivo 대시보드에서 생성한 Team과 Project를 선택할 수 있습니다.

현재 윈도우에서 디버깅할 프로젝트를 선택합니다.

프로젝트 선택

3. 프로젝트 경로 설정​

프로젝트의 경로를 지정할 수 있습니다. 기본 경로는 현재 IDE 윈도우에서 열려있는 디렉토리입니다.

프로젝트가 현재 디렉토리보다 하위 경로에 위치한 경우 상대경로를 입력합니다.

경로 설정

4. Request 리스트 확인​

서버에 들어온 모든 request 리스트를 확인할 수 있습니다.

  • Filter를 통해 원하는 시간대의 로그를 확인할 수 있습니다. (default: 1시간)
  • 해당 로그를 클릭하면 코드 Tracing을 시작합니다.
  • Requests 섹션의 ↻ 버튼을 누르면 API Key를 리셋할 수 있습니다.

Request 리스트

Filter 설정

HTTP Request 목록

5. HTTP Request 상세​

왼쪽 패널의 HTTP Request에서는 해당 API의 request & response를 확인할 수 있습니다.

HTTP Request 상세

6. Log Player​

왼쪽 패널의 Log Player에서는 해당 로그를 Tracing 할 수 있습니다.

  • <, > 아이콘을 클릭하면 순차적으로 넘어갑니다.
  • 해당 라인위에 Show History라는 텍스트가 나오는 경우 해당 라인을 거쳐간 모든 로그를 확인할 수 있습니다.

Log Player

7. Show History​

Show History를 클릭하면 해당 라인의 히스토리를 확인할 수 있는 창으로 이동합니다.

  • Filter를 통해 history의 시간대를 선택할 수 있습니다. (Default 6시간)
  • 리스트에서 확인하고자 하는 로그를 클릭하면 해당 로그가 담겨있는 trace에 기반해 Log Player를 다시 확인할 수 있습니다.

Show History

History 상세

8. Call Stack​

왼쪽 패널의 Call Stack은 함수가 호출된 경로를 보여줍니다.

Call Stack

9. Variables​

왼쪽 패널의 Variables에서는 해당 함수에 들어가는 인자, 그리고 return 값을 확인할 수 있습니다.

코드 라인 왼쪽에 노출되는 화살표가 함수를 실행하는 것인지, 아니면 해당 함수의 결과를 확인하는 것인지 확인할 수 있습니다:

화살표의미Variables 필드
>함수를 실행합니다args 필드에서 값 확인
<함수의 결과값이 나타납니다result 필드에서 값 확인

Variables - args

Variables - result