Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Overview
  • Using the debugger
Lesson 10.4. Debugging a project
This lesson will teach you the following concepts
  • Overview
  • Using the debugger

Estimated time: 15 mn
Previous LessonTable of contentsNext Lesson
Let's take a look at the debugger that is supplied with WEBDEV.
What is the debugger?
The debugger is a powerful tool used to follow the code or application progress, step by step. Enhancing a process or even an application becomes child's play.
We are going to use the debugger on the long process found in the PAGE_PerformanceProfiler page.
Using the debugger
  • To debug the PAGE_PerformanceProfiler page:
    1. Open the "PAGE_PerformanceProfiler" page in the page editor (double-click its name in the project explorer).
    2. In the WEBDEV editor, position a breakpoint in the code of "Process to analyze" button: click in front of the first code line of server click process or press Ctrl B, a red dot appears. The debugger will be automatically started when the line preceded by the breakpoint is run.
    3. Run the test of "PAGE_PerformanceProfiler" page ( among the quick access buttons).


      See Start modes of debugger for more details.
    4. Click the "Process to analyze" button. The debugger starts: the code editor is displayed in "Debugger" mode. The current line is preceded by a little arrow.
      The "Debugger" pane appears in the lower section of the screen. This pane displays two distinct areas:
      • the call stack: this area is used to find out the hierarchy of processes displayed in the debugger. In our example, we are currently debugging the click process on the BTN_LongProcess button.
      • the list of expressions to evaluate. By default, the main variables used in the code are displayed in this section. You have the ability to add variables in order to follow their evolution (this feature will be presented later).
We are going to perform some operations in the debugger to discover its capabilities.
  • First of all, we are going to run the different statements step by step and see the content of variables:
    1. Press the F7 key (or click the "Step by step" button). The current line is automatically run by going into the sub-procedures if necessary.
      Note: To avoid going into the sub-procedures, press the F8 key or click the "Step by Step" button.
      The values of variables are modified (if necessary) in the "Debugger" pane (displayed at the bottom of the screen).
    2. Keep pressing the F7 key until you reach the line "Product.Stock = InterrogateSupplierDatabase ...", hover "Product.Stock" with the mouse cursor. A tooltip is displayed with the expression value:
    3. The value of "Product.Stock" is displayed in a tooltip. This value corresponds to 20 because the code line was not run.
    4. Press F8 to run the line.
    5. Hover "Product.Stock" again. The value of "Product.Stock" displayed in the tooltip corresponds to the result of InterrogateSupplierDatabase procedure.
  • We are now going to add an expression to monitor the evolution of its value in the "Debugger" pane. This expression can have any type: variable, function, operation on variables, ... The result of the expression is calculated and displayed.
    This expression is used to perform a custom debugging. For example, you can find out the content of a variable while it is being used in the application.
    1. Select "Product.Stock" in the code and display the popup menu (right mouse click). Select "Add the expression to the debugger".
    2. The expression is automatically added into the debugger pane at the bottom of the screen.
  • The debugger can also be used to run a set of code lines:
    1. Position the cursor on the following line:
      IF HExecuteQuery(QRY_QuantityOrdered) THEN
    2. Press the F6 key (or click the "Run until cursor" button found in the ribbon).
    3. The arrow indicating the line currently run moves until it reaches the code line where the cursor is positioned. The code lines found before the cursor are automatically run.
  • We are now going to add a breakpoint and to run the code until it reaches the breakpoint:
    1. Click in the hatched area with the mouse, in front of HModify. A breakpoint (red bullet) appears.
    2. Press the F5 key (or click the "Continue" button found in the ribbon). The code is run until it reaches the breakpoint. The arrow used to identify the current line moves until it reaches the breakpoint.
    3. Click the breakpoint to remove it.
  • To end this test, we will be using an "Auto-stop" expression. An "Auto-stop" expression is used to start the debugger as soon as a condition is checked or when the value of a variable is modified. In our example, the debugger will be started as soon as the stock value is equal to 50:
    1. In the "Debugger" pane, select the "Product.Stock" expression that was added beforehand.
    2. Click the green circle.
    3. Press F5 to continue the test.
    4. A message is displayed, indicating that the value of "Product.Stock" expression changed.
    5. Validate.
    6. In the "Debugger" pane, select the "Product.Stock" expression. Click the expression again: the "Expression" column becomes editable. In the "Expression" area, add "=50". You will get "Product.Stock = 50".
    7. Press the F5 key. The program continues to run. The debugger is started again when the value of Product.Stock variable is equal to 50.
  • That's it, the main features of debugger have been presented here. To stop the test in the debugger, click "End the test" found in the ribbon.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 23
Click [Add] to post a comment