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.

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 enables you to visualize state modifications 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 as part of Redux, but instead 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: