Using the Dev Panel for Debugging

When a You.i React Native app is built in debug mode, the app contains an additional panel with several controls to help test and debug various issues related to, but not limited to: magnets, focus management, Scene Tree, and profiling.

Screen capture of the Dev Panel overlayed on the top left corner of an app

Do the following to access the Dev Panel:

On mobile devices, triple-tap in any of the screen’s corners.
On a computer, do one of the following: press F3, F13, or CTRL+` (Ctrl + Backtick); or triple-click in any corner of the app’s screen.
On 10-ft devices, triple-press the remote’s play/pause button.
On a game console, click the right thumbstick on the gamepad.

The Dev Panel exists for all target build platforms. However, the functionality it provides is platform-dependent.

Dev Panel Widgets

The following table describes Dev Panel widgets you can use to display app-related information or to debug app-related issues:

Widget Name	Description
Toggle HUD	Toggles the visibility of the HUD bar.
Scene Tree Inspector	Displays information about the node the scene tree is pointing to.
Assets Viewer	Displays the app’s loaded assets and memory usage.
Scene Tree Viewer	Displays the scene tree and bounding boxes for each screen. To view the full hierarchy of a specific node in the Scene Tree, select the node and use the right arrow key to expand the node; if the node is not collapsed, a new screen displays the transformation hierarchy. Use the left arrow key to return to the Scene Tree Viewer, or press Escape to exit the view and return to your app.
Scene Tree Viewer
Network Information	Displays information useful for debugging networking-related app issues, such as network transfers and cache information. From the sub-menu, you can toggle settings such as listening to network requests, and listening to network requests on app start.
Log Console	Displays an on-screen Log Console overlay.
View Outlines	Displays bounds of scene nodes.
Focus Debugger	Displays information about focused items.
Time Dilation	Runs the app in slow motion.
FPS Graph	Displays app performance over time.
Profiling	Allows you to start and stop the profiling server, start and stop a capture, and write the capture data to file.
Device Information	Displays information about the current device.
Player Details	Displays player status, events, and metrics.
React Native Reload	Allows you to reload your app without compiling, whenever you make any change. Sub-options allow you to modify how the app reloads (for example, toggling DEV/PROD bundles or enabling Fast Refresh).
Remote JS Debugging	Allows you to debug the app in the Google Chrome browser.
File Explorer	Displays the files installed with your app and the apps present on your device.
Renderer Tools	Displays rendering debugging tools.
React Information	Displays the JS Executor, the Bundle URI, the number of Active React Components, the number of JS modules loaded dynamically with RAM bundling enabled, and the JS Queue Backlog. The JS Queue Backlog value tracks the number of tasks queued for processing between the C++ and JS layers. If this value stays non-zero for a long time, or remains at a particular value for several seconds, you need to optimize your JS code. This issue might occur if you create an overly complex scene tree, or if you perform very complex JS logic that blocks the JS thread. To investigate and optimize the performance of your app, see the EasyProfiler documentation.
Cloud Socket Recorder	Starts and stops the recording of messages to and from the Roku client into a data file; for Cloud applications. See Working With Roku Logs for details.
Event Viewer	Displays events passing through the Engine, including the last few events, event types and targets, global handlers, and whether events were handled.

Note

Certain types of events, including ActionEnter, ActionIn, ActionOut, ActionLeave, and ActionClick, are synthesized when the raw events ActionDown, ActionMove, and ActionUp are processed. As these synthesized events don’t go through the same pipeline as other types of events, they don’t show up in the Event Viewer. We intend to address this in a future release.

If necessary, you can create your own Dev Panel widget. To create your own widget do the following steps:

In the <My_RN_App>/youi/src folder, create a .cpp file for your widget. For example, if you are creating a widget to debug keyframe-related issues, you’d create a ViewKeyFrameWidget.cpp file.
Include the YiDevWidget.h and any other dependent .h files.
Add the code to the .cpp file that you created in step 1.

An example code snippet follows:
```
ViewKeyframeWidget::KeyframeWidget()
:  CYIDevWidget("View Keyframe", "Click to view Keyframes")
{//Constructor sets the text that is visible on the dev debug panel widget.
Void ViewKeyframeWidget::OnPanelItemClicked()
{
//add your logic inside the function
}
```
Use the constructor to set the text to be displayed in the Dev Panel widget. Note that the OnPanelItemClicked() function is invoked when a user presses the corresponding menu item in the Dev Panel.
Add the new widget code in the userinit() function of the App.cpp file located at <My_RN_App>/youi/src.
```
#if YI_DEBUG
ViewKeyFrameWidget *pKeyFrameWidget = new ViewKeyFrameWidget();
GetDevPanel() -> AddWidget(std::make_unique<ViewKeyFrameWidget>(pKeyFrameWidget));
#endif
```
Ensure the added code is wrapped in #if YI_DEBUG and #endif, as the Dev Panel is only available for debug builds.

Using the Dev Panel for Debugging

Dev Panel Widgets

Creating a New Dev Panel Widget