Profile and debug your mobile game UI
Building a user-oriented product such as mobile games requires frequent feedback and iterations on the user experience. Giving the game to players as early as possible is vital to the success of the game. However, the earlier, the riskier it is that the players will bump into bugs. Thus, it is essential for the team to be able to easily identify and fix bugs.
We decided that the optimal solution will be to integrate Chrome Dev tools in Hummingbird. Getting started with the tools is quite simple even for someone with little development experience. Аlso, they offer a full set of debugging and profiling functionality any mobile game developer would need.
To log diagnostic information you can use methods such as console.log() or console.profile(). Other useful commands are the $() command which selects elements or profile() which starts the CPU profiler.
This feature will be available to users in the beginning of next year.
Changing elements and CSS on the fly
One of the most helpful features of the Chrome Devtools is that one can edit HTML and CSS styles on the fly and preview the changes immediately. We plan to add this feature in Hummingbird shortly after the JS debugger. It will improve the UI designers workflow and save them a lot of time.
For example, one of the major problems mobile UI designers face is how to arrange all elements to fit the small devices screens. If they need to replace or add a new element, they have to rearrange the whole screen. They need an easy way to move around the UI elements and preview how the screen will look like in different scenarios. This is exactly what the DOM panel in Chrome Dev Tools does – the designer can change element’s position, size, color etc. and see all changes immediately. To edit an element, one should just select it within the DOM panel and double click on the opening tag. Such feature will give a great flexibility to the UI designers to experiment, make fast iterations, and hence save a lot of time.
The next pillar of the Hummingbird development tools will be the profiler. Performance is a major concern on older, less powerful mobile devices. One of the major product goals of Hummingbird is to address this concern by building a UI solution that helps game developers create fast and lightweight UI. That is why adding a tool with which one can measure the execution time and the memory usage of various parts of the UI is a major part of our product. In such a way they will be able to identify potentially performance-inefficient elements and easily resolve them. The Profiler’s panel will include a CPU profiler and a Heap profiler which help identify where resources are being spent and, consequently, how the code can be optimized.
The debugger and profiler in Hummingbird will be implemented in stages. We already support the console and will bring the JS debugger to Hummingbird in the beginning of next year in Hummingbird 1.1. Stay tuned for more details. In the meantime, please do share below what tools you use to debug your game UI.