BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Facebook Sonar Is a Visual and Interactive Debugging Tool for Mobile Apps

Facebook Sonar Is a Visual and Interactive Debugging Tool for Mobile Apps

This item in japanese

Bookmarks

Facebook Sonar is an open-source toolset that aims to help developers inspect and understand the structure and behaviour of iOS and Android apps in a visually rich, interactive, and extensible way.

According to Facebook engineer Emil Sjölander, Sonar was built upon the experience gathered with Stetho, an Android debugging bridge allowing developers to debug their apps using Chrome DevTools, with the aim to design a more extensible tool that could also target the iOS platform. Not all Stetho features have equivalents in Sonar, however. Therefore, developers should continue using Stetho when they need features such as command-line tools to dump an app’s state.

For extensibility, Sonar provides a plugin API that allows developers to create their own plugins to visualize and debug data coming from apps. Sonar initial release includes a number of ready-to-use plugins, such as Logs, to inspect system logs coming from an app; Layout Inspector, to inspect the layout of both iOS and Android apps; and, Network Inspector, to inspect network traffic. Those are just basic examples of what Sonar makes possible. According to Sjölander, Facebook engineers also developed plugins to monitor streams of GraphQL requests, track performance markers, and more.

To use Sonar, a mobile app should integrate with Sonar SDK, which is in charge of communicating back and forth with a Electron-based desktop app showing the debugging data. A Sonar plugin has both a desktop and a mobile component. A desktop plugin is written using React and is in charge of communicating with the remote plugin and rendering its data. A mobile plugin is written either in Swift/Objective-C or in Java/Kotlin and registers a number of handlers and responses to manage requests coming from its desktop counterpart.

Once you have setup your project to use Sonar, either using Gradle or CocoaPods, initializing it inside of your app is pretty straightforward, as shown in the examples below:

// Android
public class MyApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();

    if (BuildConfig.DEBUG && SonarUtils.shouldEnableSonar(this)) {
      final SonarClient client = AndroidSonarClient.getInstance(this);
      client.addPlugin(new MySonarPlugin());
      client.start();
    }
  }
}
// iOS
#import <SonarKit/SonarClient.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#if DEBUG
  SonarClient *client = [SonarClient sharedClient];
  [client addPlugin:[MySonarPlugin new]];
  [client start];
#endif
  ...
}
@end

A known limitation of Sonar on the iOS platform is its inability to run within Swift apps, due to a number of C++

Rate this Article

Adoption
Style

BT