You.i Engine One: An Overview of the React Native Dev Panel Used for Debugging
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.
Dev Panel Overview
Remote JS debugging
React Native Reload
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.
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.
View Outlines shows the boundary of the scene nodes and is perhaps my favorite tool in the dev panel.
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 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, as the name suggests, is all information available on the target device.
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.