This Visual Studio Code extension is designed to simplify debugging for TypeScript, JavaScript, and Python code. When you're facing unexpected behavior or bugs that make it difficult to trace the flow of execution, Flow DebugTrace can help.
It operates by automatically inserting log statements into your code, allowing you to monitor the execution flow in your terminal.
Features
Flow Logs: Injects console.log() (for JS/TS) or print() (for Python) at the start of every code block to trace the execution path.
Statement Logs: Injects logs after every statement to provide a line-by-line execution trace.
Enhanced Visibility: Logs include file name and block depth for better context.
Easy Cleanup: Quickly remove all added logs with the "Remove Flow Logs" or "Remove Statement Logs" commands.
Automatic Python Formatting: For Python files, the extension automatically runs the default formatter before adding statement logs to ensure correct indentation.
Language Support: Works with JavaScript, TypeScript, and Python.
How to Use
Simply right-click within the text editor and select one of the available commands from the context menu:
Add Flow Logs: To add block-level logs.
Remove Flow Logs: To remove block-level logs.
Add Statement Logs: To add statement-level logs.
Remove Statement Logs: To remove statement-level logs.
Important Note for Python Users
When using "Add Statement Logs" on Python files, the extension will first run VS Code's default document formatting command. This is to ensure the inserted print() statements have the correct indentation. For this to work, please make sure you have a Python formatter (like autopep8 or black) installed in your environment and configured as the default formatter in your VS Code settings.
Known Issues
Console logs may be inserted at unexpected locations within React (JSX/TSX) components.
Feedback
JOIN OUR DISCORD CHANNEL: https://discord.gg/ej2P33Nf
Please help us improve on our extension by providing valuable feedback.
