Debugging

Debug frontend and backend code during local development using VS Code's integrated debugging capabilities.

Overview

All Framework App Templates provide pre-configured debugging setups through VS Code's launch.json and tasks.json files. These configurations enable you to:

• Set breakpoints in your code
• Step through execution
• Inspect variables and call stacks
• Debug frontend and backend simultaneously

Available Debug Configurations

Frontend Debugging

Frontend debugging configurations are available for multiple browsers (Chrome, Firefox). These configurations automatically start the development server via pre-launch tasks before opening the browser, allowing you to debug your frontend code directly in the browser's developer tools integrated with VS Code.

Backend Debugging

Backend debugging configurations are provided for each supported backend framework. These configurations:

• Use the appropriate debugger for the language/runtime (e.g., debugpy for Python, Node.js debugger for JavaScript)
• Set up the correct working directory and environment variables
• May include template debugging support where applicable
• Display output in VS Code's integrated terminal or debug console

Debugging Multiple Components

You can debug frontend and backend simultaneously:

1. Start the backend debugger first
2. Start the frontend debugger second
3. Both will run concurrently, allowing you to debug full-stack interactions

The debug configurations are organized into groups (frontends and backends) for easy identification in the debug dropdown.

Pre-Launch Tasks

Frontend debugging relies on pre-launch tasks that start the development servers. These tasks run in the background and use problem matchers to detect when the server is ready before launching the browser.