Show HN: Ariana – VSCode에서 바로 사용하는 Python/JS용 타임 트래블 디버거
요약
Ariana는 코드 변경이나 중단점 설정 없이도 관측 가능성을 자동으로 추가해 주는 CLI 및 VSCode 확장 프로그램입니다. JS/TS와 Python을 지원하며, 실행 이력을 통해 코드의 값과 실행 시간을 즉시 확인하고 코딩 에이전트에게 문맥 인식 디버깅 정보를 제공합니다.
핵심 포인트
- 중단점(Breakpoints) 설정 없이 코드의 실행 이력과 마지막 기록된 값을 즉시 확인 가능
- 코드 세그먼트의 실행 성공 여부를 색상(초록/빨강/회색)으로 시각화하여 제공
- 코딩 에이전트에게 런타임 이력을 전달하여 문맥 인식 디버깅(Context-aware debugging) 지원
- npm 또는 pip를 통해 CLI 설치가 가능하며, 기존 실행 명령어 앞에 'ariana' 접두사를 붙여 사용
Ariana는 코드에 관측 가능성 (Observability)을 자동으로 추가하는 CLI이자, 이를 활용하여 코딩 에이전트 (Coding agents)에게 문맥 인식 디버깅 (Context-aware debugging) 기능을 제공하는 IDE 확장 프로그램입니다. 코드베이스의 코드를 변경하거나 중단점 (Breakpoints)을 지정할 필요가 없습니다. 현재 JS/TS 및 Python을 지원합니다.
Ariana VSCode 확장 프로그램을 사용하여 다음을 수행할 수 있습니다:
- 🕵️ 모든 표현식 (Expression) 위에 마우스를 올려 마지막으로 기록된 값 확인
- ⏱️ 코드 내 모든 표현식이 실행되는 데 얼마나 걸렸는지 확인
- 🧵 코딩 에이전트에게 런타임 이력 (Runtime history)을 제공하여 문맥 인식 디버깅 지원 (WIP)
| IDE | 명령어 |
|---|---|
| VSCode | [여기를 클릭하여 설치하거나 마켓플레이스에서 가져오기] |
| Cursor / Windsurf (VSCode Forks) | open-vsix에서 다운로드한 후 .vsix 파일을 Cursor/Windsurf의 확장 프로그램 패널로 드래그하세요... |
가장 최신의 안내를 받으려면 Ariana 확장 프로그램 패널의 시작하기 (Getting started) 지침을 따르십시오. 아래는 요약 내용입니다:
Ariana VS Code 확장 프로그램은 시스템에 ariana CLI가 설치되어 있지 않은 경우 설치 과정을 안내합니다. 사용 가능한 패키지 관리자 (npm 또는 pip 등)를 감지하고 확장 프로그램에서 직접 실행할 수 있는 명령어를 제공합니다.
수동 설치를 선호하는 경우, 다음은 일반적인 명령어입니다:
| 패키지 관리자 (Package Manager) | 명령어 |
|---|---|
| npm | npm install -g ariana |
| pip | pip install ariana <br> python -m pip install ariana <br> python3 -m pip install ariana |
런타임 정보 (Runtime information)를 수집하려면, 평소 사용하는 빌드/실행 명령어 앞에 ariana를 접두사로 붙여 실행하십시오. 이는 CLI가 코드의 복사본을 (로컬 .ariana 디렉토리에) 계측 (Instrument)하고 실행을 관찰하도록 지시합니다.
ariana <평소 사용하는 빌드 및 실행 명령어>
예시:
| 코드베이스 유형 | 명령어 |
|---|---|
| JS/TS | ariana npm run dev |
| Python | ariana python myscript.py --some-options |
관찰하고자 하는 애플리케이션의 일부를 실행하는 각 터미널에서 이 명령어를 실행하십시오.
액티비티 바 (Activity Bar)에서 아이콘을 클릭하여 Ariana 패널을 엽니다.
- 만약
ariana를 실행했다면
여러 프로젝트를 진행 중인 경우, 집중하고자 하는 실행(run)을 선택하라는 메시지가 표시될 수 있습니다. 코드 실행에서 생성된 트레이스 (Traces)는 Traces 탭에 나타납니다.
트레이스가 로드되면, Ariana는 에디터 내에서 직접적인 통찰(insights)을 제공합니다:
🗺️
실행 하이라이트 (Execution Highlighting): 코드의 어느 부분이 실행되었는지 확인하십시오. 하이라이트 색상의 의미:
🟢 초록색 (Green): 코드 세그먼트가 성공적으로 실행되었습니다.
🔴 빨간색 (Red): 코드 실행이 여기서 충돌(crash)했습니다.
⚫ 회색/없음 (Grey/None): 코드 세그먼트가 실행되지 않았거나 기록될 수 없었습니다.
🕵️
값 호버 (Value Hovers): 코드의 임의의 표현식(expression) 위에 마우스를 올리면 마지막으로 기록된 값과 실행 시간을 확인할 수 있습니다.
Ariana 패널에서 수집된 트레이스를 복사할 수 있습니다. 그런 다음 다음과 같은 프롬프트와 함께 AI 코딩 어시스턴트에 붙여넣을 수 있습니다:
<트레이스 붙여넣기>
위의 디버깅 트레이스와 코드베이스에 대한 지식을 사용하여 <xyz>를 수행해 주세요.
팁: 트레이스는 상세할 수 있으므로, 컨텍스트 윈도우 (context window)가 큰 에이전트 (agent)를 사용하십시오.
출시 예정: 더 압축된 트레이스 및 런타임 분석과 수정을 위한 통합 AI 에이전트.
본인의 코드에 사용하기 전에 Ariana를 테스트하려면:
git clone https://github.com/dedale-dev/node-hello.git
cd node-hello
npm i
...
😵💫 문제에 직면하셨나요? 도움이 필요하신가요? GitHub에 이슈 (issue)를 등록하거나 Discord 커뮤니티에 참여하여 도움을 받으세요!
-
package.json이 포함된 JS/TS node.js/브라우저 코드베이스 -
npm install -g ariana로 설치된ariana명령 (또는 기타 설치 방법) -
일부 Python
>= 3.9코드 파일 (노트북은 아직 지원되지 않음) -
가상 환경 외부에서
pip install ariana로 설치된ariana명령 (또는 기타 설치 방법)
| 언어 | 플랫폼/프레임워크 | 상태 |
|---|---|---|
| JavaScript/TypeScript | Node.js | ✅ 지원됨 |
| ... | 브라우저 프레임워크 | |
| JavaScript/TypeScript | React & .jsx / .tsx | ✅ 지원됨 |
| JQuery/Vanilla JS | ✅ 지원됨 | |
| Vue/Svelte/Angular | ❌ .js / .ts만 지원 | |
| 기타 언어 | ||
| Python | 스크립트 / 코드베이스 | ✅ 지원됨 |
| Jupyter Notebooks | ❌ 지원되지 않음 (아직) |
저희는 코드에 계측 (instrumentation)을 수행하고 이후 디버깅을 도울 수 있도록, 귀하의 코드 파일을 EU에 위치한 저희 서버에서 처리하고 48시간 동안 임시로 저장합니다. 이 데이터는 어떠한 LLM (Large Language Model) 제공업체를 포함하여 제3자에게 전송되지 않습니다. 기업용 보안 및 컴플라이언스 (compliance) 수준을 갖춘 엔터프라이즈 플랜 (enterprise plan)이 추후 출시될 예정입니다. 이것이 귀하에게 중요한 사항이라면 저희에게 알려주세요.
Ariana에 의해 생성되거나 변환된 코드는 귀하의 소유이며, 다음의 라이선스 및 약관의 적용을 받지 않습니다.
Ariana는 AGPLv3 라이선스 하에 배포됩니다. 자세한 내용은 LICENCE.txt를 참조하십시오.
AI 자동 생성 콘텐츠
본 콘텐츠는 HN Show HN (AI)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기