You.i Engine One: An Overview of the React Native Dev Panel Used for Debugging

Hao Chen
Hao Chen
React Native Dev Panel

A powerful feature of You.i Engine One is its dev panel. The dev panel is only available for React Native builds as You.i Engine One supports both RN and C++. When a You.i Engine React Native app is built in debug mode, the app contains an additional dev panel with several controls to help test and debug various issues related to, but not limited to: magnets, focus management, Scene Tree, and profiling.

In the following video, I go through the basics of our dev panel and highlight how it can be used to expedite development time when building streaming apps across multiple devices. A follow-up video with advanced options and platform-specific uses (i.e. Roku) is on its way.

Read More: How We Took React Native to Roku by Playing in the Clouds

Dev Panel Overview

Remote JS debugging
Often used by React Native developers. Remote JavaScript Debugging launches a Chrome browser with an RN debugger. You can also use this option to connect to your favorite debugging environment such as Visual Studio Code.

React Native Reload
This is the option where you can force the application to reload JavaScript code from Metro Bundler.

React Information
This is where you’ll find React Native specific information about the currently running application.

Scene Tree Inspector
This is a powerful tool that can be used for different scenarios. The Scene Tree Inspector opens up a window with information on the class, the template used, the parents, position, scale, and size of various UI elements. It can be used to identify whether the view is correctly rendered according to the specifications.

Assets Viewer
The Assets Viewer lets developers inspect assets currently display on-screen and in-memory: buffers, frame buffers, text atlas, shaders, etc.

Scene Tree Viewer
Scene Tree Viewer is another powerful tool. It displays the entire scene tree representing the current scene presented to the user. This is useful when you’re trying to determine if a view has been inserted correctly.

Log Console
Log Console is an on-screen log console overlay. It presents logs from your native application, including JavaScript console log as well. This feature exists because on some platforms there’s no convenient way to get a live log from a target device. Therefore this tool helps to display low-level logs for inspection.

View Outlines
View Outlines shows the boundary of the scene nodes and is perhaps my favorite tool in the dev panel.

Focus Debugger
Focus Debugger shows the debug information for a focused node, focus root, and the next focus in the four directions: up, down, left, right.

Time Dilation
Time Dilation is a tool that manipulates animation speed. The purpose of this tool is to simply inspect animations at different speeds to determine or debug animation glitches.

Device Information
Device information, as the name suggests, is all information available on the target device.

Event Viewer
Event Viewer captures and displays events during navigation (key press event, focus event, etc.).

A TESTING SUITE BUILT FOR OTT

The dev panel is a formidable tool when tackling the monumental task that is multiscreen development. It gives developers/testers the ability to monitor the wellbeing of their app at a glance, across mobile, desktop, streaming devices, and game consoles. It’s one of the many ways You.i Engine One is built to handle the demands of the streaming industry. To learn more about our Engine, watch our Fundamentals series. To learn more about our testing capabilities, check out my colleague, Simon’s presentation at AppiumConf.

Here’s something similar we think you’ll enjoy.