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.

With Hummingbird, we want to make it very easy for game developers to inspect their code and identify heavy UI elements that affect the performance of the game. Our tool allows UI developers to use HTML, CSS, and JavaScript to build their game UI so when designing our debugger and profiler we researched the most commonly used tools for debugging web content. We took a look at Chrome, Edge, and FireFox DevTools -all of which offer powerful debugging features.

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.

Console

Adding a console to Hummingbird was the first step in the debugger and profiler implementation. The JS console is a handy tool which allows the developers to log diagnostic information in the development process, to create JavaScript profiles, and to start a debugging session. It is also a shell prompt which can be used to interact with the document and DevTools.

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.

Debugging the JavaScript

Currently, we are working on the second step of the debugger implementation – adding a JS debugger. One of the best things about Hummingbird is that you can use standard JavaScript to create UI logic. Consequently, it is essential that the developers have a powerful tool to analyze JS code and thus easily identify and resolve issues. With the Hummingbird JS debugger, developers can add breakpoints which pause the code and allow them to analyze the values of the variables and the call stack at a particular moment. It is quite handy, for example, if one wants to analyze a certain function to set a breakpoint before it. The code will pause there until the breakpoint is removed.

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.

Profiler

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.