Examining Constellation using DevTools
Due to the stateless nature of Constellation applications, your web browser's DevTools play an important part in debugging Constellation applications.
In this topic, you explore some of the commands that assist you in debugging Constellation applications using your browser's DevTools.
Browser 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:
Debugging Data Pages
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 PCore and PConnect APIs are not available in the App Studio shell. To utilize methods related to PCore and PConnect, it is a best practice to launch the Portal from Dev Studio.
The result is a list of the cached Data Pages that are located in the application's datastore, as seen in the following figure:
補足： To learn more about using the PCore and PConnect Public APIs to debug Constellation applications, see Using PCore and PConnect Public APIs.
Check your knowledge with the following interaction:
このトピックは、下記のモジュールにも含まれています。
トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。