Home | Sign in | English UK
New WEBDEV 25 feature!
  • 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.
Lesson duration

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 "PAGE_PerformanceProfiler" in the page editor (double-click its name in the "Project explorer" pane).
    2. In the WEBDEV editor, set a breakpoint in the code of the Button control "PROCESS TO ANALYZE": click next to the first line of code in the "Click (server)" event or press Ctrl + B. A red dot will appear. The debugger will be automatically started when the line preceded by the breakpoint is run.
    3. Run the test of "PAGE_PerformanceProfiler" page ( Run the test of a page among the quick access buttons).


      See Start modes of debugger for more details.
    4. Click "PROCESS TO ANALYZE". The debugger starts: the code editor is displayed in "Debugger" mode. The current line is preceded by a little arrow.
      Code editor in debugger mode
      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 debugging the "Click" event of BTN_LongProcess.
      • the list of expressions to evaluate. By default, the main variables used in the code are displayed in this section. You can 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 F7 (or click “Step by step”). The current line is automatically run by going into the sub-procedures if necessary.
      Remark: 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 F7 until you reach "Product.Stock = InterrogateSupplierDatabase ...", hover "Product.Stock" with the cursor. A tooltip is displayed with the expression value:
      Debugger tooltip
    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.
      Debugger tooltip
  • 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 expression to debugger".
    2. The expression is automatically added into the debugger pane at the bottom of the screen.
      Debugger pane
  • 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 F5 (or click "Continue" 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.
      Changing the breakpoint value
    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".
      Debugger pane
    7. Press F5. 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 25
Click [Add] to post a comment