Identify issues in the Cosmos React UI more conveniently by using recommended tools and techniques. Debugging helps you adjust your application to make it issue-free and easier to maintain.
Cosmos React supports the following debugging methods.
- Virtual DOM
- Because Cosmos React uses ReactJS components, a
virtual DOM is an important structure that stores metadata
You can install the React Developer Tools plugin and use the Components tab in your browser's developer tools to check UI elements and view related metadata. You can use the <virtual element>.props.getPConnect() command to get more information about a selected component.
- Redux DevTools
- Cosmos React applications maintain data at the client server by using Redux.
- Tracer is the out-of-the-box tool for debugging Pega Platform applications.
For more information, see Application debugging by using the Tracer tool.
- The XRay module provides an intuitive way to debug screen issues, such as metadata, fields metadata, and state properties.
- You can launch the XRay tool by entering
PCore.getDebugger().toggleXRay(true)into the browser console. To disable XRay, enter