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

Creating a New Dev Panel Widget

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

  1. 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.
  2. Include the YiDevWidget.h and any other dependent .h files.
  3. Add the code to the .cpp file that you created in step 1.

    An example code snippet follows:

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

  4. 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));

    Ensure the added code is wrapped in #if YI_DEBUG and #endif, as the Dev Panel is only available for debug builds.