Debugger 2.0

Introduction

The Debugger in vFlow 2.0 is a tool for analyzing and troubleshooting runtime applications. It allows users to inspect application configurations, including pages, components, and elements, and compare backend configurations with application settings. It also provides details on user data, temporary objects, entities, and event executions.

The Debugger includes an interface for navigation, task charts for visualizing processes, and structured data organization to assist in debugging and application analysis.

Key Features

  1. User Interface
    Structured layout for inspecting configurations, events, and data.
  2. Task Charts
    Visual representation of tasks using chart views.
  3. Info Panels
    Configuration panels with tabbed sections for viewing properties set in vFlow.
  4. Data Organization
    Categorization of user data, entity data, and temporary data for structured navigation.
  5. Error Handling
    Displays a red error message strip above the Task JSON viewer when a task fails.

Steps to Use Debugger 2.0

1. Enable Debugger

  1. Navigate to the application dashboard.
  2. Go to the Download in the L1 menu.

  3. Click Environment to open it’s download settings.

  4. Click to check the Enable Debugger checkbox under the Security section.

2. Access Diffferent Sections of Debugger 2.0

Debugger 2.0 is divided into three main sections:

2.1 Tracker Tab

The Tracker section allows users to track events that triggered at the page level based on user actions.

2.1.1 How to use tracker

When you access the Tracker, the first view is a table displaying key details about executed events. The table consists of the following columns:

  1. Event Type: This column shows the type of events, such as onclick, onload, onselect, et-cetera.
  2. Task Group ID: It is the unique ID of the task group that you create and configure under the event. You can also copy this ID.

  3. Task Group Name: The column contains the name of the task group that is executed for the particular event.
  4. Start Time: It indicates at what time the event was triggered.
  5. Execution Time: This column represents the total time taken by the task from the time the event was triggered.

When you click anywhere on a row in the Tracker table, additional information opens that displays list of each task under the selected Task Group.

This view allows you to switch between task groups and examine the associated tasks. The columns in this expanded view include:

  1. Task Name: It displays the name of the task within the task group.
  2. Task ID: It shows the unique identifier assigned to each task under the task group.
  3. Task Type: It indicates the type of task being executed.
  4. Business Rule: It displays the execution status of business rule associated with the task.
    • If no business rule is mapped, the debugger displays “NA”.
    • If a business rule is mapped but the user action doesn’t satisfy the condition in the business rule, the debugger displays “F”.
    • If a business rule is mapped and the user action satisfies the condition in the business rule, the debugger displays “T”.
  5. Duration: It represents the time taken (in miliseconds) for the task execution.
  1. Status: It shows the execution status of the task (e.g., Success, Failure, and Pending).

Task Execution table for duration analysis:

Duration LogicColor and BarsRepresentationDescription
0 – 200msGreen (1 Bar)
Green color signifies that the task execution duration was as expected.
500+ msRed (3 bar)Red color denotes that there was a long delay in the execution of the task.
201-500 msOrange (2 bar)Orange color shows that there was slight delay in the task execution.
This icon displays the scenario when the task execution is failed.
This icon specifies the scenario when of task execution is pending.

When you click any row in the task table, it displays detailed configurations on the task, such as its config, request data, response data, and others.

2.2 Config Tab

The Config section helps users check page, component, and element configurations.

2.2.1 How to use config

When you access config, you see three panels:

  1. Entities Panel / Left Panel: By using entity panel, you can access different entities including pages, component, and element in a drill-down manner. For instance, you can use the entity panel as follows:
    • On the pages menu, click arrow icon to the right of the page (for example: dynamic label support) to display different components.
    • In the list of components, click arrow icon to the right of the component (for example: stepper 1) to display different elements (for example: Static name, dynamic name, and stepper 3).
  1. Config Panel: This panel displays the configuration detail of a specific entity selected in JSON format.
  1. Properties Panel / Right Panel: In this panel, you can check the data related to the basic and advance properties, style and animation properties, configured events, and data source at the page, component, and element levels.

2.3 Data

The Data section provides insights into different data types.

2.3.1 How to use Data

When you access the Data tab, it displays two panels as follows:

  • The left panel: It displays the list of Data Store
  • The right panel: It displays the data stored in the data source in Key and Value format .

Steps:

  1. After you click a data store item, the right panel displays the data in key and value format.
  2. When you click a row in key and value panel, it opens a new panel, which displays the second-level data stored in the JSON object.

Additional Notes

  • Duration Logic: Execution time is categorized into green, orange, and red for performance analysis.

  • Pop-out View / Maximise Button: You can view the debugger 2.0 in a separate pop-out window by clicking the maximise button (), located on the top-right corner of the debugger 2.0 window.
    • Put your mouse pointer on the title bar, press left mouse button to drag the window.
  • Reload Debugger Button (): Reloads data in all the sections.
  • Clear Data Button (): Clears data in the Tracker section.
  • Close Button (): Exits the debugger.
Was this article helpful?
YesNo