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.
• Redux DevTools is a free plugin that enables you to visualize state modifications and inspect every state and action payload in the browser DevTools.

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:

X-Ray is a tool for visualizing higher-level components of your Constellation UI such as Controllers, View Templates, Partials, and JS Templates.

Run the following code in your browser's Console:

PCore.getDebugger().toggleXRay(true);

The appearance of the application changes in your browser window. You can navigate across the different elements and examine the metadata associated with each element. In the following figure, the metadata for the HandleTicket View is displayed:

When you are finished working with X-Ray, run the following code in the Console to turn off the XRay functionality:

PCore.getDebugger().toggleXRay(false);

Check your knowledge with the following interaction: