Skip to main content
Version: 0.2.29

VSCode Extension

설치 가이드​

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

Extension 설치

사용 가이드​

1. 초기 설정​

Extension을 설치하면 API Key와 폴더 경로를 선택할 수 있는 화면이 나타납니다.

  • API Key: 대시보드에서 발급받은 API Key
  • Base Folder: 로그를 파악하기 위한 폴더 경로. 실행한 서버 코드의 package.json이 있는 폴더를 선택하면 됩니다.

초기 설정

2. Request 리스트 확인​

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

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

Request 리스트

Filter 설정

HTTP Request 목록

3. HTTP Request 상세​

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

HTTP Request 상세

4. Log Player​

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

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

Log Player

5. Show History​

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

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

Show History

History 상세

6. Call Stack​

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

Call Stack

7. Variables​

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

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

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

Variables - args

Variables - result