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 information.

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

Tracer is the out-of-the-box tool for debugging Pega Platform applications.

For more information, see Application debugging by using the Tracer tool.

XRay

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 PCore.getDebugger().toggleXRay(false).