Developer tools for examining applications

Contemporary web browsers contain a suite of utilities known as developer tools, which facilitate the debugging process for applications running on the page. Through these tools, users can scrutinize the assets requested by the page and monitor their loading times accurately. The availability and features of developer tools vary depending on the browser of the application.

Modern web browsers include integrated tools tailored for inspecting and debugging front-end applications. In Chrome, Firefox, and Edge, you can access these developer tools by pressing the F12 key on your keyboard.

Within the developer tools, several key areas warrant attention:

• Console tab: Reveals the active scripts that are running on the web page.
• Network tab: Displays DX API calls with the option to filter by Fetch/XHR. Both request and response payloads are visible here.
• Application tab: Enables inspection of cached items in Local and Session storage

The following figure shows the location of these tabs in the Chrome browser DevTool menu:

React DevTools, a complimentary plugin, empowers you to examine React component hierarchies in the browser's developer tools. You can use the React DevTools browser extension to view application metadata at run time. When enabled, this extension adds a Components tab to the console. You can select any element to highlight the screen and then enter the  $r.props.getPConnect() command to view the component metadata.

The following figure shows an example of the Components output in Google Chrome:

Redux DevTools is a free browser plugin that helps you visualize and track state changes in your application. After you enable it, the extension adds a Redux tab in the developer tools, which logs every action dispatched in the application. This log shows the type and payload of each action, helping you understand how the state evolves. You can inspect each state and action payload directly in the browser's developer tools. You can also inspect the state tree at any point, which makes debugging easier when the state does not update as expected. With the tool's time-traveling feature, you can step through state changes and pinpoint issues related to incorrect updates.

The following figure shows an example of Redux logs with event type along with payload:

The XRay tool provides an intuitive way to debug screen issues, such as metadata, field metadata, and state properties overlayed in the UI. You activate the XRay tool, by entering PCore.getDebugger().toggleXRay(true) in your browser's console. Entering PCore.getDebugger().toggleXRay(false) deactivates the XRay tool.

As you interact with the application in your browser window, you might notice changes in its appearance. You can explore different elements and inspect the metadata associated with each one. In the following figure, the metadata for the HandleTicket View is displayed:

Setting the DebugPegaAPI dynamic system setting Rule equal to to true, as shown in the following figure, helps you perform a more verbose debugging of API calls:

This option logs additional fields in the Pega API Rest Service Info statements so that you can debug page instructions and field-level security.

When the DebugPegaAPI Rule is active, the following information is saved into the Pega log files:

• Input values used in the request body of the DX API calls.
• Actions performed by the DX API.
• Fields in the View where your DX API encounters errors and exceptions.
• Descriptions of the cause for errors and exceptions.
• Error codes and exception numbers.

Data Pages cached on the client side are not stored within Redux but rather in the application's datastore. To log information about client-side cached Data Pages, you can run the following code in your browser's console: PCore.getDataPageUtils();.

The result is a list of the cached Data Pages that are located in the datastore of the application, as shown in the following figure:

Explore the structure of your application's UI by using the UI Inspector. The UI Inspector is a built-in Pega Platform tool that enables you to select UI components on your screen to gain insight about their place in the UI hierarchy.

The UI Inspector lets you visualize information about the Constellation UI components, including metadata, field properties, and View properties.

In the  following image the UI Inspector shows the Metadata associated with a pyAddressForm:
 

Check your knowledge with the following interaction: