JetBrains IDE(IntelliJ IDEA, PyCharm, WebStorm, CLion 등)를 위한 범용 디버깅 시각화 플러그인입니다. VSCode Debug Visualizer의 핵심 기능을 JetBrains 생태계로 포팅하여, F8 스텝마다 자동으로 업데이트되는 실시간 시각화를 제공합니다.
VSCode Debug Visualizer에서 영감을 받아, JetBrains IDE에서도 동일한 수준의 디버깅 경험을 제공하고자 합니다. 단순한 알고리즘 시각화를 넘어, 모든 데이터 구조를 실시간으로 시각화하여 개발자가 코드 실행을 직관적으로 이해할 수 있도록 돕습니다.
1. 실시간 모니터링 우선
- ✅ F8 스텝마다 즉시 UI 업데이트
- ❌ "Play" 버튼으로 애니메이션 재생 (제거됨)
2. 브레이크포인트 위치 무관
- ✅ Variables 패널에 보이는 모든 변수 시각화 가능
- ❌ 특정 알고리즘 메서드에서만 동작
3. 자료구조 중립적
- ✅ 배열, 트리, 그래프, 스택, 큐, 맵 등 모든 자료구조
- ❌ 정렬 알고리즘만 지원
4. 타입 자동 감지
- ✅ 데이터 구조를 분석하여 자동으로 최적 시각화 선택
- ❌ 사용자가 시각화 타입 수동 선택
5. 다중 언어 지원
- ✅ Java, Kotlin, Python, JavaScript, TypeScript, C++, C#, Go, Rust 등
| 타입 | 설명 | 사용 예시 |
|---|---|---|
| graph | 노드-엣지 그래프 | 그래프 알고리즘 (DFS, BFS, Dijkstra) |
| tree | 계층적 트리 | 이진 트리, AVL, Red-Black Tree |
| array | 1D 배열 막대 그래프 | 정렬 알고리즘, 투 포인터 |
| table | 2D 테이블 | DP 테이블, 행렬 |
| grid | 2D 그리드 | 체스판, 미로, 2D 게임 |
| plotly | Plotly.js 차트 | 통계, 시계열 데이터 |
| text | 포맷된 텍스트 | JSON, XML, 로그 |
| monacoText | 코드 에디터 | 소스 코드, Diff |
| image | 이미지 (PNG base64) | 이미지 처리 알고리즘 |
| svg | SVG | 벡터 그래픽 |
| graphviz-dot | Graphviz DOT | 복잡한 그래프 |
| ast | 추상 구문 트리 | 컴파일러, 파서 |
| object-graph | 객체 참조 그래프 | 메모리 구조, 포인터 관계 |
1. 디버깅 세션 시작 (중단점 설정)
↓
2. Debug Visualizer 툴 윈도우 열기
↓
3. 표현식 입력 (예: myTree, graph.adjacencyList, dpTable)
↓
4. 디버거가 중단점에서 멈춤
↓
5. 자동으로 표현식 평가 및 시각화 렌더링
↓
6. F8 (Step Over) 실행
↓
7. 즉시 표현식 재평가 → 시각화 자동 업데이트
↓
8. 변경된 부분 하이라이트 (diff)
데이터 구조를 자동으로 감지하여 최적의 시각화를 선택합니다:
1. GetVisualizationDataExtractor (priority: 600)
- .getVisualizationData() 메서드가 있는 객체
2. TreeExtractor (priority: 550)
- TreeNode 타입 감지
3. GraphExtractor (priority: 540)
- Graph 타입 감지
4. ArrayExtractor (priority: 500)
- 배열/리스트 감지
5. MapExtractor (priority: 490)
- Map, HashMap 감지
6. ListExtractor (priority: 480)
- List, ArrayList 감지
7. ObjectGraphExtractor (priority: 98)
- 일반 객체 참조 그래프
8. ToStringExtractor (priority: 50)
- Fallback: toString() 출력- Java, Kotlin: JDI (Java Debug Interface) 직접 사용
- JavaScript, TypeScript: Chrome DevTools Protocol + 런타임 코드 주입
- 지원 기능: 모든 13종 시각화, 커스텀 추출기, 실시간 모니터링
- Python: debugpy 프로토콜 + pydebugvisualizer 모듈
- 지원 기능: 주요 시각화 타입, 실시간 모니터링
- C++, C#, Go, Rust, Scala: XDebugger 변수 참조 탐색
- 지원 기능: object-graph 시각화, 제한적 실시간 모니터링
User IntelliJ IDE
│
├─ F8 (Step Over)
│ ↓
│ ┌──────────────────────────────────────────────────────────┐
│ │ DebuggerListener (XDebugSessionListener) │
│ │ - sessionPaused() # F8 스텝 감지 │
│ │ - sessionResumed() # 실행 재개 감지 │
│ │ - stackFrameChanged() # 스택 프레임 변경 감지 │
│ └──────────────────────────────────────────────────────────┘
│ ↓
│ ┌──────────────────────────────────────────────────────────┐
│ │ VisualizationWatchModel (Observable) │
│ │ - StateFlow<DataExtractionState> # 상태 관리 │
│ │ - CancellationToken # 이전 요청 취소 │
│ │ - Debouncing (330ms) # 에러 후 대기 │
│ └──────────────────────────────────────────────────────────┘
│ ↓
│ ┌──────────────────────────────────────────────────────────┐
│ │ DispatchingVisualizationBackend │
│ │ - JvmVisualizationBackend # Java, Kotlin │
│ │ - JsVisualizationBackend # JS, TS │
│ │ - PythonVisualizationBackend # Python │
│ │ - GenericVisualizationBackend # C++, C#, Go, Rust │
│ └──────────────────────────────────────────────────────────┘
│ ↓
│ ┌──────────────────────────────────────────────────────────┐
│ │ DataExtractorRegistry (Priority-based) │
│ │ [600] GetVisualizationDataExtractor │
│ │ [550] TreeExtractor │
│ │ [540] GraphExtractor │
│ │ [500] ArrayExtractor │
│ │ [490] MapExtractor │
│ │ [480] ListExtractor │
│ │ [98] ObjectGraphExtractor │
│ │ [50] ToStringExtractor │
│ └──────────────────────────────────────────────────────────┘
│ ↓
│ ┌──────────────────────────────────────────────────────────┐
│ │ JCEF WebView (Chromium) │
│ │ - window.visualizerAPI.updateVisualization(json) │
│ └──────────────────────────────────────────────────────────┘
│ ↓
│ ┌──────────────────────────────────────────────────────────┐
│ │ React UI (visualizer-ui/) │
│ │ ├─ VisualizationRouter │
│ │ ├─ ArrayVisualizer (D3.js) │
│ │ ├─ GraphVisualizer (vis.js) │
│ │ ├─ TreeVisualizer (SVG) │
│ │ ├─ TableVisualizer (Perspective.js) │
│ │ └─ ... (13 visualizers) │
│ └──────────────────────────────────────────────────────────┘
└─ Visual Output
debug-visualizer-jetbrains/
├── plugin/ # IntelliJ Platform 플러그인
│ ├── src/main/kotlin/
│ │ ├── debugger/ # DebuggerListener, ExpressionEvaluator
│ │ ├── backend/ # DispatchingBackend, DataExtractorRegistry
│ │ ├── extractors/ # 8개 기본 추출기
│ │ ├── toolwindow/ # VisualizerToolWindowPanel
│ │ └── ui/ # JCEFVisualizationPanel
│ ├── src/test/kotlin/ # 60개+ 단위 테스트
│ └── build.gradle.kts
├── visualizer-ui/ # React 시각화 UI
│ ├── src/
│ │ ├── components/ # ArrayVisualizer, GraphVisualizer, TreeVisualizer
│ │ ├── types/ # visualization.ts (13개 타입)
│ │ └── App.tsx # VisualizationRouter
│ ├── test/ # 15개+ React 테스트
│ └── package.json
└── docs/ # 프로젝트 문서
├── PRD.md # 제품 요구사항 정의서 (v2.0.0)
├── architecture.md # 시스템 아키텍처 (v2.0.0)
├── visualization-schema.md # 데이터 스키마 (v2.0.0)
├── TESTING.md # 테스트 가이드
└── CLAUDE.md # Claude Code 가이드
- 플러그인 프레임워크: IntelliJ Platform SDK
- UI 렌더링: JCEF (Java Chromium Embedded Framework)
- 시각화 라이브러리: D3.js, Plotly.js, Cytoscape.js
- 디버거 통합: IntelliJ Platform Debugger API
- 언어 지원:
- JVM: JDI (Java Debug Interface)
- Python: debugpy 프로토콜
- JavaScript: Chrome DevTools Protocol
- JetBrains IDE (IntelliJ IDEA 2023.1+, PyCharm, WebStorm 등)
- JDK 17+
- Gradle 8.0+
-
JetBrains Marketplace에서 설치 (향후 제공 예정)
- IDE의 Settings/Preferences → Plugins
- "Algorithm Debug Visualizer" 검색 및 설치
-
소스에서 빌드하여 설치
# 저장소 클론 git clone https://github.com/bulhwi/debug_visualizer_for_jetbrains_ide.git cd debug_visualizer_for_jetbrains_ide/plugin # 빌드 ./gradlew buildPlugin # 빌드된 플러그인은 plugin/build/distributions/에 생성됩니다 # IDE의 Settings/Preferences → Plugins → ⚙️ → Install Plugin from Disk... # 에서 생성된 .zip 파일을 선택하여 설치
# 프로젝트 클론
git clone https://github.com/bulhwi/debug_visualizer_for_jetbrains_ide.git
cd debug_visualizer_for_jetbrains_ide/plugin
# 의존성 다운로드 및 프로젝트 빌드
./gradlew build
# 테스트 실행
./gradlew test
# 테스트 IDE 인스턴스 실행 (플러그인이 설치된 상태로)
./gradlew runIde
# 플러그인 배포 파일 생성
./gradlew buildPlugin-
디버깅 세션 시작
- 코드에 중단점 설정
- 디버그 모드로 프로그램 실행
-
시각화 도구 윈도우 열기
- View → Tool Windows → Algorithm Visualizer
-
변수 시각화
- 표현식 입력 필드에 변수명 입력 (예:
myArray,myTree) - Enter 키 또는 "Evaluate" 버튼 클릭
- 시각화가 자동으로 표시됩니다
- 표현식 입력 필드에 변수명 입력 (예:
-
스테핑
- Step Over / Step Into 실행 시 시각화가 자동 업데이트됩니다
현재 상태: ✅ Phase 1 완료 → 🔄 Phase 2-0 (코드 정리) 진행 중
- ✅ IntelliJ Platform Plugin 초기화
- ✅ 디버거 API 통합 (XDebuggerManager)
- ✅ JDI 기반 표현식 평가 (모든 프리미티브 타입 지원)
- ✅ JCEF 웹뷰 통합
- ✅ React UI + D3.js 기본 시각화 (배열 막대 그래프)
- ✅ 데이터 브리지 (Kotlin ↔ React)
- ✅ TDD 환경 구축 (45개 테스트, 100% 통과)
기술 스택:
- Kotlin 1.9.21 + IntelliJ Platform 2023.2.5
- React 18.2 + TypeScript 5.2 + Vite 5.0
- D3.js 7.8.5
- JUnit 5 + MockK + Vitest + React Testing Library
목적: 정렬 알고리즘 전용 코드 제거 및 범용 Debug Visualizer로 전환
- [#32] AlgorithmDetector 제거 및 범용화 (2시간)
- [#33] SnapshotCollector 범용화 리팩토링 (4시간)
- [#34] React UI 리팩토링 (Play 버튼 제거, 13종 타입) (5시간)
- [#35] 통합 테스트 및 문서 업데이트 (3시간)
예상 소요: 14시간
- [#23] Phase 2-1: 디버거 이벤트 리스너 구현 (XDebugSessionListener)
- [#24] Phase 2-2: Observable 상태 관리 시스템 (VisualizationWatchModel)
- [#25] Phase 2-3: 우선순위 기반 데이터 추출기 시스템 (8개 추출기)
- [#26] Phase 2-4: React UI 다중 렌더러 구현 (Graph, Tree, Table)
- [#27] Phase 2-5: 실시간 업데이트 파이프라인 통합
핵심 목표:
- F8 스텝 → 즉시 UI 업데이트 (< 200ms)
- 브레이크포인트 위치 무관
- 타입 자동 감지 (Priority-based Extractor)
- 13종 시각화 완성
- [#28] Phase 3-1: JavaScript/TypeScript 런타임 코드 주입 시스템
- [#29] Phase 3-2: Python debugpy 프로토콜 연동
- [#30] Phase 3-3: 범용 언어 지원 (C++, C#, Go, Rust)
- [#31] 사용자 정의 추출기 API
- [#31] 실행 히스토리 (Time-Travel Debugging)
- [#31] 코드 하이라이트 연동 (JetBrains 전용)
- [#31] 리팩토링 제안 (JetBrains 전용)
참고 문서:
- ISSUES_SUMMARY.md - GitHub Issues 전체 요약
- PROJECT_STATUS.md - 프로젝트 현황 대시보드
- PRD.md - 제품 요구사항 정의서 (v2.0.0)
- architecture.md - 시스템 아키텍처 (v2.0.0)
기여를 환영합니다! 자세한 내용은 기여 가이드를 참조해주세요.
TBD
- VSCode Debug Visualizer에서 영감을 받았습니다
- IntelliJ Platform SDK로 제작되었습니다