Facebook Sonarは、モバイルアプリ向けの可視化されたインタラクティブなデバッグツール

Facebook Sonarはオープンソースのツールセットである。開発者が、視覚的にインタラクティブで拡張可能な方法で、iOSとAndroidアプリの構造と動作を検査し理解することの支援を目的としている。

FacebookのエンジニアであるEmil Sjölander氏によると、SonarはStethoの経験を基に開発された。Stethoは、開発者がChrome DevToolsを使用してアプリケーションをデバッグできるAndroidデバッグブリッジである。Sonarでは、iOSプラットフォームもターゲットする拡張性の高いツールを設計することを目的としている。しかし、Stethoの機能のすべてがSonarにあるわけではない。したがって、アプリの状態をダンプするコマンドラインツールなどの機能が必要な場合、開発者は引き続きStethoを使う必要がある。

拡張性のために、SonarはプラグインAPIを提供している。プラグインAPIを使用すると、開発者はアプリからのデータを視覚化してデバッグするための独自のプラグインを作成できる。Sonarの初期リリースにはすぐに使えるプラグインが多く含まれている。例えば、アプリケーションからのシステムログを検査するためのLogs、iOSとAndroidアプリの両方のレイアウトを検査するLayout Inspector、ネットワークトラフィックを検査するNetwork Inspectorなどがある。これらはSonarでできることのベーシックな例である。Sjölander氏によると、Facebookのエンジニアは、GraphQLリクエストのストリームを監視するプラグイン、パフォーマンスマーカを追跡するプラグインなども開発した。

Sonarを使用するには、モバイルアプリはSonar SDKと統合する必要がある。Sonar SDKは、モバイルアプリとElectronベースのデスクトップアプリとの間で通信する機能をもっており、デスクトップアプリにはデバッグデータを表示する。Sonarプラグインには、デスクトップコンポーネントとモバイルコンポーネントの両方がある。デスクトッププラグインはReactを使用して書かれている。デスクトッププラグインはリモートプラグインと通信し、データのレンダリングを行う。モバイルプラグインは、Swift/Objective-CあるいはJava/Kotlinで書かれており、通信先のデスクトップからの要求を管理するためのハンドラとレスポンスを登録する。

GradleまたはCocoaPodを使用してSonarを使用するプロジェクトをセットアップしたら、以下の例に示すように、アプリケーション内で初期化するのは非常に単純である。

// 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

iOSプラットフォームでのSonarの既知の制限は、Swiftアプリ内で実行できないことである。これは、いくらかC++を使っているためである。