Sonar可以帮助你在模拟器或真机上调试运行中的Android和iOS应用程序，Sonar有两部分组成：

macOS桌面应用程序

适用于Android和iOS的原生移动SDK

设置

桌面app

桌面app不需要额外的设置，只需要下载[最新版本] (https://www.facebook.com/sonar/public/mac)，桌面程序可用于macOS，并需要在系统上安装Android/iOS开发工具。

一旦你启动了Sonar并且启动了连接设备的模拟器或真机，你就能在Sonar里面看到打印的log信息，要查看应用的特定数据，你需要集成原生的sdk到你的应用中。

image.png

设置你的Android app

在你的build.gradle文件中添加做如下操作：

repositories {

jcenter()

}

dependencies {

debugImplementation 'com.facebook.sonar:sonar:0.0.1'

}

现在你可以在你的Application的onCreate方法中初始化Sonar:

public class MyApplication extends Application {

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, 0);

if (BuildConfig.DEBUG && SonarUtils.shouldEnableSonar(this)) {

final SonarClient client = AndroidSonarClient.getInstance(this);

client.addPlugin(new MySonarPlugin());

client.start();

}

}

}

设置你的iOS app

添加Sonar SDK和他的依赖到你的Podfile:

platform :ios, '8.0'

swift_version = '4.1'

target 'MyApp' do

pod 'RSocket', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/iOS/third-party-podspecs/RSocket.podspec?token=ADr9NE_I05Vu8g7oq_g6g_9FLx784NFmks5bJ5LvwA%3D%3D'

pod 'DoubleConversion', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/iOS/third-party-podspecs/DoubleConversion.podspec?token=ADr9NOxtIEmr5ODP9PWq6-sht-Ye6UYGks5bJ5MjwA%3D%3D'

pod 'glog', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/iOS/third-party-podspecs/glog.podspec?token=ADr9NBHbrlbkFR3DQTPzj0CnZdria4jvks5bJ5M3wA%3D%3D'

pod 'Folly', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/iOS/third-party-podspecs/Folly.podspec?token=ADr9NNTjwJ8xqLFwc3Qz3xB3GsCk-Esmks5bJ5NGwA%3D%3D'

pod 'PeerTalk', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/iOS/third-party-podspecs/PeerTalk.podspec?token=ADr9NB8frQTrUWytsMXtdv_P8km7jV_Mks5bJ5NbwA%3D%3D'

pod 'Yoga','~>1.8.1', :modular_headers => true

pod 'Sonar', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/xplat/Sonar/Sonar.podspec?token=ADr9NFO7byH9uAuhGAIEYuoJeBNyBxf6ks5bJ5N8wA%3D%3D'

pod 'SonarKit', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/SonarKit.podspec?token=ADr9NBuYoodM_NeysQg899hkxXw0WZ7Xks5bJ5OVwA%3D%3D'

pod 'SonarKit/SonarKitLayoutComponentKitSupport', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/SonarKit.podspec?token=ADr9NBuYoodM_NeysQg899hkxXw0WZ7Xks5bJ5OVwA%3D%3D'

pod 'SonarKit/SKIOSNetworkPlugin', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/SonarKit.podspec?token=ADr9NBuYoodM_NeysQg899hkxXw0WZ7Xks5bJ5OVwA%3D%3D'

pod 'ComponentKit', :podspec => 'https://raw.githubusercontent.com/facebook/Sonar/master/iOS/third-party-podspecs/ComponentKit.podspec?token=ADr9NNV9gqkpFTUKaHpCiYOZIG3Ev-Hyks5bJ5O-wA%3D%3D'

post_install do |installer|

installer.pods_project.targets.each do |target|

if ['YogaKit'].include? target.name

target.build_configurations.each do |config|

config.build_settings['SWIFT_VERSION'] = swift_version

end

end

end

end

end

然后通过运行pod install来安装依赖，当你打开你的Xcode工作空间的时候就可以在AppDelegate中导入和初始化Sonar。

#import

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

#if DEBUG

SonarClient *client = [SonarClient sharedClient];

[client addPlugin:[MySonarPlugin new]];

[client start];

#endif

...

}

@end

最后你需要添加plugins到你的Sonar client中。

Logs

Logs插件用来显示设备日志，不需要任何额外的设置。

过滤

搜索栏可以用来搜索日志和根据条件筛选，从表头的上下文菜单中能够显示更多信息，如时间戳，PID或TID，单击表中的标签，PID或TID以仅对具有相同值的日志进行过滤。

表达式观察器

侧边栏中的表达式观察器可用于监视某些日志的发生并计算发生的概率，表达式可以是简单的字符串，也可以是与日志匹配的正则表达式。

Layout Inspector

可以用来检查布局结构以及每个View的属性。

如果你将鼠标悬停在Sonar中的视图或组件上，我们将突出显示您应用中的相应项目，可以用来调试View边界，并确保你设置正确的padding。

Layout Inspector

设置

使用布局检查器，需要将插件添加到Sonar的客户端中。

Android

import com.facebook.sonar.plugins.inspector.DescriptorMapping;

import com.facebook.sonar.plugins.inspector.InspectorSonarPlugin;

final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();

client.addPlugin(new InspectorSonarPlugin(mApplicationContext, descriptorMapping));

iOS

#import

#import

SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];

[client addPlugin:[[SonarKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]]

快速编辑

Layout Inspector不仅允许您查看层次结构并且可以用来检查项目属性，还可以编辑布局属性，背景颜色，道具和状态等内容。使你可以快速调整paddings，margins而无需重新编译。

目标模式

点击十字线图标启用目标模式，现在，你可以触摸设备上的任何视图，Layout Inspector将跳转到布局层次结构中的正确位置。

阻止全屏视图(只适用于android)

The issue is that if you have some view that occupies big part of the screen but draws nothing and its Z-position is higher than your main content, then selecting view/component through Layout Inspector doesn't work as you intended, as it will always hit that transparent view and you need to manually navigate to the view you need which is time-consuming and should not be necessary.

Add the following tag to your view to skip it from Sonar's view picker. The view will still be shown in the layout hierarchy, but it will not be selected while using the view picker.

以上这一大段没有弄明白干嘛的。

view.setTag("sonar_skip_view_traversal", true)

Network

使用网络检查器检查我们的应用中所有的流量进出，还可以轻松浏览所有正在进行的请求以及响应，该插件还支持gzip响应。

Network Inspector

设置

添加网络插件到Sonar client实例中。

Android

import com.facebook.sonar.plugins.network.NetworkSonarPlugin;

client.addPlugin(new NetworkSonarPlugin());

iOS

#import

[client addPlugin: [SonarKitNetworkPlugin new]]

使用

从设备发送的所有请求都将在插件中列出，点击请求查看详细信息，如标题和正文，你可以通过点击列表中相应的值来过滤表的域，方法或状态。

参考文档