Sonar使用指南

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

  1. macOS桌面应用程序
  2. 适用于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 <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

最后你需要添加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 <SonarKitLayoutPlugin/SonarKitLayoutPlugin.h>
#import <SonarKitLayoutPlugin/SKDescriptorMapper.h>

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 <SonarKitNetworkPlugin/SonarKitNetworkPlugin.h>

[client addPlugin: [SonarKitNetworkPlugin new]]

使用

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

参考文档

https://fbsonar.com/docs/getting-started.html
https://github.com/facebook/Sonar/issues/24

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容