Facebook open sources Sonar, their cross-platform debugging tool

Close view into captain's cabines, navigation equipment and captain's hand on rudder during cruising

2 min read

Facebook has announced the open-source release of Sonar, their cross-platform debugging tool. Sonar is designed to aid developers, framework experts and engineers collaborate on the app development process. Sonar is built on Facebook’s Stetho, an Android debugging bridge built on Chrome’s developer tools. Sonar further adds more extensible features to Stetho such as plugins to help engineers develop new features, investigate bugs and optimize apps.

Sonar is a cross-platform debugging tool. Hence developers can connect their mobile devices (Android and iOS or an emulator) to a desktop client for inspection. Sonar works as a guide and interpreter to a running app providing developers with stats on what an app is doing to better understand bugs and system capabilities.

Sonar is now available for the developer community at large, not just Facebook engineers, as an open-source software project via GitHub.

As Sonar was designed with extensibility in focus, it made use of a lot of external plugins. With the open sourcing of Sonar, these plugins are also being open-sourced. Some of these include:

Logs, a plugin that shows device logs without the need for additional setup.
Layout Inspector, a debugging platform that provides deep dives into user interface hierarchies and supports Litho and ComponentKit components.
Network, a plugin that enables the inspection of network packets as they pass into and out of the app in question.

Sonar architecture

Sonar’s architecture has two parts, a desktop client, and a mobile SDK. The desktop client is built on top of Electron, and Facebook’s projects such as React.js, Flow, Metro, RSocket, and Yarn.

The mobile SDK is installed within the Android or iOS application and interacts with the desktop client. The mobile SDK makes use of Facebook open source projects such as Folly and RSocket.

Plugins are available for both Desktop client and Mobile SDK. Desktop client plugins render the UI and a mobile SDK plugin exposes the data. A React component extends the desktop plugin class. This React component is in charge of communicating with the mobile SDK plugin and rendering any data it delivers.

The mobile SDK plugin is developed in the language native to the platform on which it will run (Swift/Objective-C on iOS or Java/Kotlin on Android). It registers a set of handlers and defines responses for them.

Source: Facebook Blog

Emil Sjölander, Facebook software engineer hopes that “open-sourcing Sonar and the accompanying plugins will provide a useful tool for other engineers working on mobile applications.” He says that “As we’ve already seen Sonar prove useful internally at Facebook, we think Sonar’s APIs will help other engineers build great new experiences to improve their workflows.”

You can read about the full release coverage on Facebook code blog.