Profiling allows you to see which parts of your application are taking processing time, helping understand how to improve it’s performance.
Umajin offers a simple way for app developers to export profiling data for their apps. This data can then be imported and inspected by the Perfetto Trace Viewer.
Profiling Your App
Profiling can only be done in Play mode. The simplest way to start profiling is to use the Tools > Begin Profiling menu item while in play mode.
Umajin Editor will begin writing to a TraceEvent JSON file, that you can find in your app’s temp directory. A new timestamped JSON file is created each time you call the begin profiling function. For example, “umajin_profiling_2021-12-15_13-53-35.json”.
When you think you have collected enough data, use the Tools > End Profiling menu item.
Javascript Profiling API
Alternatively, to start profiling your app, you can call the metricsBeginProfiling JavaScript function.
You can easily hook up actions to begin and end profiling, so you can trigger them when needed.
registerAction('beginProfiling', '', 'Begin Profiling', '')
function beginProfiling() {
console.log('Profiling has started!');
metricsBeginProfiling();
}
registerAction('endProfiling', '', 'End Profiling', '')
function endProfiling() {
console.log('Profiling has finished! Check the temp directory for the JSON file.');
metricsEndProfiling();
}Recording your own Blocks and Tags
By default, the profiling data contains low level events related to Umajin engine and rendering. This can be really helpful to working out where resources are spent in your app, but sometimes you need a little more detail. When working with JavaScript it is easy to add our own “Blocks” or “Tags” into the data.
If you want to record how long something is taking, call the startProfileBlock("my_block_name") function passing in an easily identifiable name. Then when you reach the end you can call endProfileBlock("my_block_name"). In Perfetto this will show as a block, labeled with the given name.
If you need to track a single point in time, then it is best to you a Tag. Call the profileTag("my_tag_name") function passing in a name for the tag. This will show up in Perfetto as a small arrow. Clicking on the arrow will give you more details including the tag name you gave it.
Analysing your profiling data in Perfetto
Perfetto is a web-based open-source tool that takes your JSON trace file and displays it in a timeline. Zoom in and get more information about each event, and figure out all the places in your app that need improvement.
You can find Perfetto Trace Viewer at ui.perfetto.dev. It is available for free, and no account is needed.
To get started, load your profiling JSON file from the “Open trace file” option in the left side panel. This can take a while, but when complete, you should see what looks like a timeline. Most of the information is hidden by default, so the first thing you should do, is expand the “Process 1” area in the main timeline view.
Use CTRL + Mouse Wheel zoom in and out, and use SHIFT + LEFT CLICK and drag to pan forward and back through time. Using these shortcuts you should be able to navigate around your profiling data and inspect different areas of your app’s performance. You can click on a colored Slice at any time to get more details below.
Profiling memory usage
There is also the option to get a snapshot of your app’s memory usage by using the Tools > RAM profiling menu. This is also available as JS function metricsWriteRamStats. Umajin Eidtor will write a new memory profiling JSON file into your project’s temp directory. Here is an example Action, that you could attach to a button:
new Action('RAM Profiling', ramProfiling).register();
function ramProfiling() {
console.log('Memory profiling data saved! Check the temp directory for the JSON file.');
metricsWriteRamStats();
}This memory profiling data works a little differently when viewed in Perfetto Viewer. You are not looking at data over time, but instead, the time axis shows memory usage with a scale of one second to one MB.
Finding out more
More information about the Perfetto Trace Viewer can be found at perfetto.dev/docs/#trace-visualization
Documentation for the new Umajin API metrics functions can be found at developer.umajin.com/jsmain