One challenge that comes from having many engineers working collaboratively on larger apps is that typically no single person knows how every module works. This segmentation of knowledge and expertise can make it difficult to develop new features, investigate bugs, or optimize performance. To help engineers at Facebook manage this complexity, we built Sonar, an extensible cross-platform debugging tool. Sonar gives us a surface where framework experts and developers can convey important information to framework users. Now we are adding functionality and sharing Sonar as an open source project to help others accelerate the app development process. With Sonar, engineers have a highly flexible, intuitive way to inspect and understand the structure and behavior of their iOS and Android applications. We believe Sonar improves on current tools by providing a more visual and interactive experience that is extensible to fit engineers’ specific needs.


This initiative started more than three years ago with the release of Stetho, an Android debugging bridge built on Chrome’s developer tools. With Sonar, we wanted to build upon what we’ve learned with Stetho to design a tool that was more extensible to new features, had a richer user experience, and worked across both iOS and Android. With today’s release of Sonar, we are sharing that work with the open source community. For most use cases going forward, we recommend using Sonar in place of Stetho. When engineers need a specific feature that has not been implemented in Sonar (for example, command-line tools based on dumpers), they can continue to use Stetho.

Extensions in Sonar

  • Providing our engineers with access to a view hierarchy that more accurately resembles the features and functionality they are working with, by showing Litho and ComponentKit components.
  • Surfacing a stream of GraphQL requests, as opposed to raw network events.
  • Tracking performance markers in real time, allowing developers to more easily investigate performance problems.

By working closely with framework and product developers inside Facebook from the start, we were able to ensure that our plugin APIs were powerful enough to build a wide range of tools. In fact, all the tools included in Sonar are themselves plugins; the core of Sonar only provides a set of UI components and manages the connection between devices. This means anyone can build equally powerful tools as custom plugins.

An open source architecture

To extend Sonar with a plugin, an engineer writes a desktop client plugin to render the UI and a mobile SDK plugin to expose the data. For the desktop client plugin, the engineer just needs to create a React component extending the client’s base plugin class. This React component is in charge of communicating with the mobile SDK plugin and rendering any data it delivers. The desktop client plugin is also able to send commands back to the mobile SDK plugin. A mobile SDK plugin is developed in the language native to the platform on which it will run, whether Swift/Objective-C on iOS or Java/Kotlin on Android. The mobile SDK plugin registers a set of handlers and defines responses for them, similar to how engineers typically build a server application handling client requests.


With this bidirectional socket connection and React-based UI, we have been able to create a wide variety of tools to empower Facebook’s engineers. The image below shows the layout inspector in action. The property inspector appears on the right-hand side, where View properties can be edited on the fly to test different designs and configurations quickly and without needing to recompile. The layout inspector is itself extensible, and the Litho team has used it to bring the same live-update capabilities to Litho components inspected with Sonar.


A tool for the open source community

just a few lines of code

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. We look forward to seeing what the community will create, and over the coming months, we will continue working to improve the core of Sonar and expand the range of APIs available to plugin developers.