Examining Constellation using DevTools

As we move towards employing more modern web technologies, Pega developers can make more use of typical developer tools for debugging.

Browsers come with built-in tools for inspecting and debugging front-end applications. In Chrome, Firefox, and Edge, you can open these developer tools by pressing F12 on your keyboard.

Once in the developer tools, there are a few areas of interest:

• Console tab - Displays the working scripts on the web page. 
• Network tab - Shows DX API calls (select filtering by Fetch/XHR). The payload of both requests and responses can be seen here.
• Application tab - Allows inspection of items cached in Local and Session storage.

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

There are also web browser extensions that you can download and use to debug React applications.

Constellation applications use Redux, a JavaScript state management library, to maintain and synchronize application state in the browser. Redux stores information about the current user session, user interactions, and application data that the user is actively working with. Understanding how the state is stored and updated can help you troubleshoot unexpected UI behavior, data refresh issues, and client-side processing. Because Redux is a key part of how Constellation manages client-side state, the Redux DevTools extension is a valuable resource when debugging Constellation applications.

React DevTools is a free plugin that enables you to inspect the React component hierarchies in the browser DevTools. When enabled, this extension adds a Components tab to the developer tools, as shown in the following figure:

Redux DevTools is a free plugin that lets you visualize state changes and inspect every state and action payload in the browser DevTools. When enabled, this extension adds a Redux tab to the developer tools, as shown in the following figure:

Data Pages that are cached on the client side are not stored in Redux; instead, they are stored in the application's datastore.

Run the following code in your browser's Console to log information about client-side cached Data Pages:

PCore.getDataPageUtils();

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

Check your knowledge with the following interaction: