Debugger 2.0

Introduction

The Debugger is a powerful tool designed to assist users in identifying and resolving issues in runtime applications built with vFlow 2.0. It enables users to inspect application configurations, including pages, components, and elements, and to compare backend configurations with those made in the application. Additionally, it provides detailed insights into user data, temporary objects, entities, and event executions.

Debugger 2.0 introduces an enhanced user interface, advanced task charts, and better organization of data, making it an essential tool for effective application debugging and optimization.

Key Features

1. Improved UI

• Intuitive and organized layout for inspecting configurations, events, and data.

2. Task Charts

• Visual representation of tasks through chart views to enhance understanding.

3. Info Panels

• Configuration info panels with tabs for properties configured in vFlow for better accessibility.

4. Edit Access

• Redirection to the vFlow configurator for task groups and pages, enabling quick edits.

5. Organized Data

• Categorization of data into user, entity, and temporary data for ease of navigation.

6. Layout View

• Displays row-column format layout configurations, showing proper widths defined by the user.

Steps to Use Debugger 2.0

1. Enable Debugger

1. Navigate to the application dashboard.
2. Go to the Download Settings in the L1 menu.
   
   
3. Click the Environment to open it’s download settings.
   
   
4. Check the Enable Debugger checkbox under the Security section, which is located on the left.
   
   

2. Access Main Sections

Debugger 2.0 is divided into three main sections:

2.1 Tracker

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

• Event Info Panel: Displays all executed events with filters for event type, task group name, and ID.
• Task Group Info Panel: Provides detailed properties of the selected task group, such as execution sequence, task name, and status.
• Tasks Info Panel: Displays detailed task configurations, including JSON, API details, and mapped business rules.

2.2 Config

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

• Left Panel: Displays a list of browsed pages with search and edit functionality.
• Body Section: Shows the configuration of selected pages in JSON format.
• Right Info Panel: Displays detailed information about pages, components, and elements, with tabs for properties, style, animations, events, data, and layout.

2.3 Data

The Data section provides insights into different data types:

• User: Displays user data after login.
• Temp: Shows temporary data used for intermediate calculations.
• Entity: Provides data related to pages, components, or elements.
• List of Values: Enumerations defined by the user.

3. Header Settings

• Reload Debugger: Reloads data in the Data section.
• Clear Data: Clears data in the Tracker section.
• Pop Out: Opens the debugger in a separate window.
• Close: Exits the debugger.

Functional Details

1. Tracker Section

Event Info Panel

• Parameters:
  • Event Type
  • Task Group Name
  • Task Group ID
  • Start Time
  • Execution Time
• Features:
  • Search and filter events by type, name, or ID.
  • View task group details by clicking an event.
  • Edit task group configuration via an Edit button.

Task Group Info Panel

• Parameters:
  • Sequence
  • Task Name
  • Task ID
  • Task Type
  • Business Rule
  • Duration
  • Status
• Features:
  • Toggle between table and chart views.
  • Edit configurations in vFlow.
  • Status Indicators:
    • Green: Fast response (0-200ms).
    • Orange: Moderate response (201-500ms).
    • Red: Slow response (501ms+).

Tasks Info Panel

• Sections:
  • Config Section: Displays task configurations in JSON format.
  • API Task Section: Shows header and body configurations for API tasks.
  • Business Rule Section: Lists BR data in table format with ID, statement, result, and resolved rules.
• Features:
  • Copy data functionality.
  • Search functionality within JSON data.

2. Config Section

Left Panel

• Displays a list of pages, components, and elements.
• Edit button to modify configurations in vFlow.

Body Section

• Shows page configurations in JSON format.
• Copy functionality with snackbar confirmation.

Right Info Panel

• Tabs for properties, styles, animations, events, data, and layout.
• Displays hierarchical structure: Page -> Component -> Element.

3. Data Section

Left Panel

• Lists available data types: User, Temp, Entity, and List of Values.

Body Section

• Displays data in key-value format with JSON representation on click.
• Copy functionality for JSON data.

4. Filters and Search

Filters and search functionality are integrated into the following panels:

• Event Info Panel: Filter by Event Type, Task Group Name, and ID.
• Task Group Info Panel: Search for tasks by ID, name, type, and status.
• Config Section: Filter pages, components, and elements.

Additional Notes

• Error Handling: In case of task failure, a red error message strip will display the cause above the Task JSON viewer.
• Duration Logic: Execution time is categorized into green, orange, and red for performance analysis.
• Hierarchy View: Simplifies navigation through pages, components, and elements.

Debugger 2.0 enhances debugging capabilities in vFlow, providing a comprehensive and user-friendly tool for resolving application issues efficiently.