Try it out for your Cordova apps - setup instructions
To try it out on your Cordova apps, look at these setup instructions.
Background: browser-perfBrowser-perf is a tool to measure performance for websites on browsers like Chrome and Safari. Apart from other things, it leverages the remote debugging protocol of the browsers to look at the various timeline events. It also leverages Selenium to replay typical user interactions. Combining these two, browser-perf gets performance metrics for websites during typical usage scenarios. The metrics include frames per second, time for layouts, style, paint, etc.
DemoThe demo below shows how the cordova apps are created, and how simple it is to hook them up to browser-perf to record the performance metrics.
Running on your Cordova appsYou can test your existing Cordova apps on Android and iOS using the following steps. By default, "scroll-tests" are run, but if app's webview does not have a scroll, or you would like to test other interactions like clicks, swipes, etc, you can follow this tutorial.
- Download and run Chromedriver
- Ensure that the emulator is running, or the device is connected
- Ensure that the Cordova app is already installed on the device/emulator
- Copy this config file, and change values for
- Run browser-perf --config-file=configfile.json
- Install Appium using
npm install -g appiumand follow its setup instructions.
- Note that the
appmust be change.
appmust point to an ipa or a zip file's absolute location.
appiumand start browser-perf with a config file like this.
How does it work - the detailsThe mobile environments are not vastly different, and just like the desktop browsers, we would need the two things
- A way to automate the cordova apps or mobile browsers
- A mechanism to record timeline and profiling data when the automation occurs.
AndroidChromedriver provides full support for the selenium JSON wire protocol for Chrome and Webviews based on Chrome for Android. The "performance" log type is also fully supported to get timeline events. The tricky part is to pick up the events that are similar to about:tracing on desktop chrome. This can be done using adb, and adb_trace shows how that can be done. In case of browser-perf, the relevant parts of the code were ported to work with Node. Thus, all required data for calculating metrics are now available.
iOSThere are many drivers to automate Safari and Hybrid apps on iOS. I found that appium works great, and is pretty simple to install. Appium also relies on the remote debug protocol to automate Safari or the webviews. The performance log was however not initially implemented.
I was able to hack around a little and my pull request to add this feature finally landed in firstname.lastname@example.org. Timeline metrics can now be collected just as easily on Safari and the webviews on iOS emulators and devices.