Skip to content

Full-Stack Debugging (Standalone Mode)

Note

This debugging setup is for standalone backend and frontends (Scenario A or C), not for Full Stack in Docker (Scenario B).

VS Code Launch Configurations

The project includes a sample-launch.json file with VS Code debugging configurations for all three frontend options and the backend. Copy this file to .vscode/launch.json to use these configurations:

# From the project root
cp sample-launch.json .vscode/launch.json
# Windows
copy sample-launch.json .vscode\launch.json

Key Configurations

  1. Full Stack with React and Python — Debug both the React frontend and Python backend simultaneously
  2. Full Stack with Angular and Python — Debug both the Angular frontend and Python backend simultaneously
  3. Full Stack with Vue and Python — Debug both the Vue frontend and Python backend simultaneously

Tip

When ending debugging, you will need to stop the Python backend and the frontend separately.

Each configuration sets up the appropriate ports, source maps, and debugging tools for a seamless development experience. You may need to adjust the ports and paths in the launch.json file to match your specific setup.

Backend Debugging

The Python backend (FastAPI) runs at http://localhost:8000. To debug:

  1. Open the project in VS Code
  2. Select the "Python: FastAPI" debug configuration
  3. Set breakpoints in main.py, backend.py, hybrid_system.py, etc.
  4. Start the debugger (F5)

Log Level

Control log verbosity via the LOG_LEVEL environment variable in .env:

LOG_LEVEL=DEBUG   # verbose — all per-query logs
LOG_LEVEL=INFO    # default — startup messages only
LOG_LEVEL=WARNING # minimal

Frontend Debugging

React (Vite)

  • Dev server: http://localhost:5173 (or 5174 depending on port availability)
  • VS Code uses the "Vite" debug configuration with sourceMapPathOverrides
  • Browser DevTools → Sources tab for breakpoints in TypeScript source

Angular

  • Dev server: http://localhost:4200
  • VS Code uses the "Chrome: Angular" debug configuration
  • Angular CLI automatically generates source maps

Vue (Vite)

  • Dev server: http://localhost:3000
  • VS Code uses the "Vite" debug configuration

MCP Server Debugging

The MCP server can be run in HTTP mode for debugging with the MCP Inspector:

# Terminal 1: start the backend
flexible-graphrag

# Terminal 2: start MCP server in HTTP mode
flexible-graphrag-mcp --http --port 3001

# Terminal 3: launch MCP Inspector
npx @modelcontextprotocol/inspector

Open the URL printed in the console, set transport to Streamable HTTP, URL to http://localhost:3001/mcp, then click Connect.