ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WEBDEV Tutorial / Tutorial - WLanguage basics
  • Lesson 7 - Debugger
  • Overview
  • Using the debugger
  • Starting the debugger
  • Step-by-step execution
  • Execute a series of lines
  • Define the next instruction to execute
  • Add an expression to track changes in its value
  • To sum up

Tutorial - WLanguage basics

Lesson 7 - Debugger
We will cover the following topics:
  • Overview.
  • Using the debugger.
Durée de la leçon 30 min
Overview
Let's take a look at the debugger that comes standard with WINDEV, WEBDEV and WINDEV Mobile.
What is the debugger?
The debugger is a powerful tool used to track the execution of a code or application, step by step. A wide range of functions are available:
  • Breakpoints,
  • Execution of lines of code step by step,
  • Visualization of variables,
  • Visualization of process hierarchy,
  • Evaluation of expressions and use of auto-stop expressions,
  • Visualization of the content of data file items, etc.
It is very easy to optimize a process or an entire application.
In this lesson, we will use the debugger on the code of the procedures we created in the previous lesson. This will allow us to discover the main functionalities of the debugger.
Using the debugger
We will use the debugger on the "WLanguage" project:
  1. If necessary, open the "WLanguage" project you created in the first lesson of this tutorial (see A project to discover WLanguage in lesson 1).
  2. If necessary, open the WLanguage events of the project:
    • Right-click the "P" button next to the open element tabs. The context menu appears.
    • Select "Element code".
    • The code editor displays the different events associated with the project.

Starting the debugger

To start the debugger, we will set a breakpoint and run the project test. Breakpoints are used to set the line of code the debugger starts from. In the code editor, breakpoints appear as a red dot in the left margin of the desired line of code.
Set a breakpoint in the project initialization code:
  1. Click to the left of the first line of code ("AmountInclTax is currency"), or press Ctrl + B.
  2. A red dot appears, representing the breakpoint.
    Debugger

    The debugger will be automatically started when the line preceded by the breakpoint is run.
    Several methods can be used to start the debugger.
    For more details, see Start modes of the debugger.
We will now run the project test:
  1. Click "GO" in the quick access icons.
  2. Once the line of code that has the breakpoint is executed, the debugger starts.
  3. The code editor appears in "Debug" mode: an orange banner is displayed at the bottom of the editor and the "Debugger" ribbon pane is selected. The line of code being executed has a little arrow (). A tooltip shows the content of the variables manipulated in the line of code.
    Debugger
    The "Debugger" pane appears in the lower section of the screen. This pane displays two distinct areas:
    • the call stack: This area shows the hierarchy of events and processes displayed in the debugger. In our example, we are debugging the "Initialization of WLanguage" event.
    • the list of expressions to evaluate. By default, the main variables used in the WLanguage code are displayed in this area. You can add variables to track their evolution (this feature will be presented later). For now, only the AmountInclTax variable is displayed in this area.
We are going to perform some operations in the debugger to discover its capabilities.

Step-by-step execution

First of all, we will run the different statements step by step and see the content of the variables:
  1. Press F8 (or click "Step by step" in the ribbon). The execution moves to the next line of code. The values of variables are modified (if necessary) in the "Debugger" pane (displayed at the bottom of the screen).
  2. To execute the CalculateInclTax procedure via the debugger, press F7 (or click "Detailed step by step" in the ribbon).
    Difference between F7 and F8:
    • F8 executes the lines of code "step by step", but without going into the code of the functions/procedures.
    • The F7 key is used to perform a "detailed step-by-step": this mode allows you to enter procedure/function code and execute the corresponding code step by step.
  3. The code of the CalculateInclTax procedure is displayed.
  4. Use the F8 key: the procedure is executed step by step (line by line).
  5. Press Alt + End ("Exit" option in the ribbon) to exit the procedure.
Close the debugger: click on the "End test" option in the debugger ribbon.

Execute a series of lines

For the following actions in the debugger, we will use a section of WLanguage code that we worked on in the previous lesson.
  1. If necessary, clear the "Initialization" event of the project and copy the following code:
    ArrayOfNumbers is array of int
    
    FOR Index = 1 TO 100
    	Trace("Loop turn | Index value: [%Index%]")
    	IF Index = 50 THEN
    		Trace("Break condition")
    		BREAK
    	END
    	IF IsOdd(Index) = False THEN
    		Trace("Index is even: go to next iteration")
    		CONTINUE
    	END
    	ArrayOfNumbers.Add(Index)
    	Trace("[%Index%] was added to the array")
    END
    
    FOR Index = 1 _TO_ ArrayOfNumbers.Count
    	// Display the index and the corresponding value in the array
    	Trace("Index: " + Index + " | Value: " + TableauNombres[Index])
    END
    Reminder: This code fills an array via a loop, adding only the odd numbers from 1 to 100.
  2. Set a breakpoint on the first line of code and start the project test.
  3. The debugger starts. We will do some operations to discover the capabilities of the debugger.
First, let's see how to execute a set of lines of code directly. You don't have to execute every line of code in the process to be debugged.
  1. Move the cursor to the following line of code:
    IF IsOdd(Index) = False THEN
  2. Press F6 (or click "Run until cursor" in the ribbon). All the lines of code between the current line and the line where the cursor is positioned will be executed. The trace window is displayed with the following content:
    Loop turn | Index value: 1

    Please note: The trace window can be displayed "behind" the editor.
  3. Press F8 (to execute the lines of code step by step). Since the condition is false, the code of the IF statement is not executed.

Define the next instruction to execute

The debugger also allows you to determine which statement must be executed next. For example, this allows you to "skip" certain lines of code: these lines of code will not be executed.
  1. Move the arrow that marks the current line () to the line of code that contains the "Trace" function in the IF statement:
    Trace("Index is even: go to next iteration")
    This action defines the next statement. In our example, we "skip" the lines used to add to the array: the array will therefore not be added to.
  2. Set a breakpoint on the following line:
    ArrayOfNumbers.Add(Index)
    To do so, simply click to the left of the line of code. A red dot appears.
  3. Press F5 to execute the code up to the breakpoint. The trace window now shows:
    Loop turn | Index value: 1
    Index is even: go to next iteration
    Loop turn | Index value: 2
    Index is even: go to next iteration
    Loop turn | Index value: 3
    The tooltip of the variables in the debugger tells us that we are at index 3.
  4. Remove the breakpoint.

Add an expression to track changes in its value

Now, we will add an expression and track the changes in its value in the "Debugger" pane. This expression can be of any type: variable, function, operation on variables, etc. The result of the expression is calculated and displayed. This expression is used to perform a custom debugging. For example, you can watch the content of a variable while it is being used in the application.
  1. Set a breakpoint on the following line:
    FOR Index = 1 _TO_ ArrayOfNumbers.Count
    To do so, simply click to the left of the line of code. A red dot appears.
  2. Press F5 to execute the code up to the new breakpoint.
  3. Select "Index" in the code editor and right-click to open the context menu. Select "Add expression to debugger".
  4. The expression is automatically added in the debugger pane at the bottom of the screen. For now, the expression cannot be evaluated because the line of code has not been executed.
  5. Press F8 to execute the code step by step.
  6. The value of Index changes to 1.
We will use an "Auto-stop" expression. An "Auto-stop" expression starts the debug mode when a condition evaluates to true or when the value of a variable changes. In our example, we will start the debugger when the value of Index is 10:
  1. In the "Debugger" pane, select the "Index" expression that we added earlier.
  2. Click on the green circle: it turns red. This means that the expression becomes "Auto-stop". The debugger will be displayed when the value of the variable changes.
  3. We're now going to continue testing the application: press the F5 key.
  4. A message is displayed, indicating that the value of the "Index" variable has changed.
  5. Validate.
  6. We're now going to add a condition for the debugger to display: the value of Index must correspond to 10. In the "Debugger" pane, select the "Index" expression. Click the expression again: the "Expression" column becomes editable. In the "Expression" area, add "=10". You will get "Index = 10". Press Enter to validate.
  7. Press F5. The program continues to run. The debugger is started again when the value of the Index variable is 10.
We will now see the contents of the Array variable. These contents can be viewed in a specific window ("Watch Window").
  1. In the "Debugger" pane, select the "ArrayOfNumbers" expression.
  2. Select "Edit" in the context menu. A specific window shows the contents of the variable, i.e., the different values in the array. This window can remain open while the application is debugged.
    The watch window allows you to view the contents of any type of variables. The information can be shown in text or hexadecimal format.
That's it! We have covered the main features of the debugger. To stop the test in the debugger, click "End test" in the ribbon.
To sum up
In this lesson, you have discovered the main options of the debugger:
  • How to start the debugger,
  • How to execute a project step by step,
  • How to define the following statement,
  • How to create an auto-stop expression.
In the next lesson, we will see how to use Object-Oriented Programming (OOP).
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 06/14/2024

Send a report | Local help