Debugger

The Debugger in Q-Remix allows users to inspect and troubleshoot the execution of smart contracts by stepping through transactions, reviewing their state, and understanding how the contract behaves at each step. This tool is designed to provide developers with an intuitive way to debug their code and observe the live state of contracts during transaction execution.

How to Use the Debugger

You can start a debugging session by following either of these two methods:

1. From the Terminal Panel:

   • After a successful or failed transaction is logged, click the debug button to activate the debugger.

   • The Debugger will be opened in the Side Panel with the corresponding transaction focused.

2. From the Plugin Manager:

   • Activate the Debugger from the Plugin Manager and then click the bug icon in the side panel.

   • Enter the transaction address and ensure the source code is available in the editor.

   • Click Start Debugging to begin the session.

Once activated, the Debugger will highlight the relevant code in the Editor, and you can navigate through the transaction’s execution step by step. If you wish to stop debugging, simply click the Stop Debugging button.

Debugger UI Panels and Features

The following panels and features are available during a debugging session:

1. Navigation Controls

• Slider: Navigate through each opcode in the transaction to observe state changes.

• Step Back: Move to the previous opcode without entering functions.

• Step Over: Advance to the next opcode without entering a function.

• Step Into: Step into a function call to debug inside.

• Jump to Breakpoint: Move to the previous or next breakpoint in the code.

• Jump Out: Exit the current function call and move to the calling function.

2. Debugger Panels

• Function Stack: Lists the functions being executed in the current transaction.

• Solidity Locals: Displays the local variables within the current function.

• Solidity State: Shows the state variables of the contract.

• Opcodes: Displays the opcode currently being executed.

• Step Details: Gives additional information about the opcode step.

• Stack: Visualizes the Ethereum Virtual Machine (EVM) stack.

• Memory: Displays memory usage and the values in memory.

• Storage: Displays persistent storage changes.

• Call Stack: Shows the call stack used during computations.

• Call Data: Contains the function parameters passed during execution.

• Return Value: Displays the returned value from the function.

• Full Storage Changes: Reflects all persistent storage changes after a transaction.

• Breakpoints: Allows users to place breakpoints in the code to pause execution at specific points.

3. Granular Debugging Information

The Debugger provides granular information, making it an excellent teaching tool. Users can view detailed transaction execution steps, including opcode execution, memory reads, and writes, as well as the changes to storage and the EVM stack.

Boilerplate UI for Debugger (Non-Functional)

The following is the boilerplate UI for the Debugger, which needs integration with other components for full functionality:

Features Pending Integration:

• Transaction Data: Actual transaction hashes and contract execution data need to be hooked into the UI to show step-wise execution.

• Debugger Panels: Panels like Call Stack, Solidity Locals, Memory, and others need to be populated with actual data from the debugger.

• Navigation and State Updates: Step buttons need to reflect the current state of the debugger as it steps through the transaction.

• Breakpoints and Debugger Controls: Breakpoint functionality needs to be integrated for pausing and continuing the transaction at specific points in the code.

This UI provides the basic structure, but further integration with the backend components and real-time data flow will be necessary for full functionality.