Debug Client TypeScript

A modern TypeScript-based React Flow visualization tool for debugging JavaScript execution traces. This is an improved version of the original DebugClient project with better code organization, type safety, and maintainability.

Features

• Interactive Node Graph: Visualize function calls, variables, data access, loops, and more as connected nodes
• Expandable Nodes: Double-click nodes to explore their children and trace execution flow
• Argument Expansion: Expand function arguments to see their detailed trace data
• Smart Filtering: Filter different trace types (functions, variables, data access, etc.)
• Undo/Redo: Full history management with keyboard shortcuts (Ctrl+Z, Ctrl+Y)
• Real-time Search: Search and select functions to start debugging from
• Error Highlighting: Visual indicators for nodes with errors
• TypeScript: Full type safety and better developer experience

Getting Started

Prerequisites

• Node.js (v16 or higher)
• A running debug backend server (typically on http://localhost:3000)

Installation

npm install

Development

npm run dev

Build

npm run build

Linting

npm run lint

Architecture

Key Components

• App.tsx: Main application component with React Flow integration
• TraceProcessor: Handles backend API calls and trace data processing
• Node Components: Individual node types (Function, Variable, Data, etc.)
• Layout Utils: ELK.js-based automatic graph layout
• Type Definitions: Comprehensive TypeScript types for all trace data

Improvements over Original

1. TypeScript: Full type safety throughout the application
2. Better Code Organization: Clear separation of concerns with dedicated folders
3. Improved Error Handling: Better error boundaries and user feedback
4. Enhanced Performance: Optimized rendering and state management
5. Cleaner UI: More polished components and interactions
6. Better Documentation: Comprehensive inline documentation

API Integration

The application expects a backend server running on http://localhost:3000 with the following endpoints:

• GET /trace/functions/all - Returns list of all available functions
• GET /trace/children?rawId={id} - Returns children traces for a given trace ID

Usage

1. Start the application with npm run dev
2. Click the search button or use the initial search overlay
3. Select a function to start debugging from
4. Double-click nodes to expand and explore the execution flow
5. Use the filter panel to show/hide different trace types
6. Use Ctrl+Z/Ctrl+Y for undo/redo operations

Contributing

This project follows standard TypeScript and React best practices. Please ensure all code is properly typed and follows the existing patterns.