BT

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

| by Sergio De Simone Follow 12 Followers on Jun 12, 2018. Estimated reading time: 1 minute |

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 Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT