Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エラーと戦うためのデバッグ法

ymnder
March 09, 2017

 エラーと戦うためのデバッグ法

how to efficiently debug Application
DroidKaigi 2017/3/9

ymnder

March 09, 2017
Tweet

More Decks by ymnder

Other Decks in Programming

Transcript

  1. this topic’s target • android development beginner • joining to

    android team fortunately • want to do fixing bug and improvement 5
  2. What makes me choose this topic? What I wish I

    knew when I freshly joined team. 6
  3. start tutorial: last April • check status on runtime ->

    AndroidStudio • Log.v() is boring -> Timber • fix view -> Hierarchy Viewer I'm not afraid of anything anymore 7
  4. join team • report 'not included necessary tag on HTTP

    request' • report 'nothing to change view after pull to refresh' • report 'text color is turning to black from API 24+’ 8
  5. join team • report 'not included necessary tag on HTTP

    request' • report 'nothing to change view after pull to refresh' • report 'text color is turning to black from API 24+’ 9
  6. join team • No idea how to face the error

    and solve it efficiently • I need strong power…. ʊਓਓਓਓʊ ʼɹpowerɹʻ ʉY^Y^Yʉ 10
  7. join team • There are powerful debugging tools, aren’t there?

    • So today I introduce them which I usually use to identify problem. 11
  8. ᶃStetho 14 dependencies { compile 'com.facebook.stetho:stetho:1.4.2' } public class MyApplication

    extends Application { public void onCreate() { super.onCreate(); Stetho.initializeWithDefaults(this); } } //enter `chrome://inspect/#devices` on chrome
  9. ᶃStetho 15 dependencies { compile 'com.facebook.stetho:stetho:1.4.2' } public class MyApplication

    extends Application { public void onCreate() { super.onCreate(); Stetho.initializeWithDefaults(this); } } //enter `chrome://inspect/#devices` on chrome dependencies { compile 'com.facebook.stetho:stetho:1.4.2' } public class MyApplication extends Application { public void onCreate() { super.onCreate(); Stetho.initializeWithDefaults(this); } } //enter `chrome://inspect/#devices` on chrome
  10. ᶃStetho 16 dependencies { compile 'com.facebook.stetho:stetho:1.4.2' } public class MyApplication

    extends Application { public void onCreate() { super.onCreate(); Stetho.initializeWithDefaults(this); } } //enter `chrome://inspect/#devices` on chrome
  11. 1:View Hierarchy feature • tap on view to jump to

    xml • hover xml, highlight on device screen • check style and property like css • property is translated like css for chrome • no support changing style from dev tools (but ability to change text) • screencast • no touch support 22
  12. 2:Network Inspection 24 dependencies { //for okhttp3 compile 'com.facebook.stetho:stetho-okhttp3:1.4.2' //for

    okhttp2 compile 'com.facebook.stetho:stetho-okhttp:1.4.2' //for use UrlConnection compile 'com.facebook.stetho:stetho-urlconnection:1.4.2' }
  13. 2:Network Inspection 25 //okhttp2 OkHttpClient client = new OkHttpClient(); client.networkInterceptors().add(new

    StethoInterceptor()); //okhttp3 new OkHttpClient.Builder() .addNetworkInterceptor(new StethoInterceptor()) .build(); //if use URLConnection, you can use StethoURLConnectionManager //but must explicitly add Accept-Encoding: gzip on request header
  14. 2:Network Inspection feature • get request / response information •

    path, method, status, type, size, time, timeline • tap to show headers, preview, original response • support custom plugin 28
  15. 3:Database Inspection feature • support SQL command !!! • quickly

    check DB, ContentProvider, SharedPreference • ability to edit value • support custom plugin • example: for Realm plugin 33
  16. 4:Console 36 //for Timber Timber.plant(new StethoTree()); //for rhino //change initialize

    method from initializeWithDefaults Stetho.initialize(Stetho.newInitializerBuilder(context) .enableWebKitInspector(new InspectorModulesProvider() { @Override public Iterable<ChromeDevtoolsDomain> get() { return new DefaultInspectorModulesBuilder(context).runtimeRepl( new JsRuntimeReplFactoryBuilder(context) //import package .importPackage("android.content") //import class .importClass(R.class) //set variable .addVariable("foo", "bar") .build() ).finish(); } }) .build());
  17. 4:Console 37 //for Timber Timber.plant(new StethoTree()); //for rhino //change initialize

    method from initializeWithDefaults Stetho.initialize(Stetho.newInitializerBuilder(context) .enableWebKitInspector(new InspectorModulesProvider() { @Override public Iterable<ChromeDevtoolsDomain> get() { return new DefaultInspectorModulesBuilder(context).runtimeRepl( new JsRuntimeReplFactoryBuilder(context) //import package .importPackage("android.content") //import class .importClass(R.class) //set variable .addVariable("foo", "bar") .build() ).finish(); } }) .build());
  18. 4:Console 38 //for Timber Timber.plant(new StethoTree()); //for rhino //change initialize

    method from initializeWithDefaults Stetho.initialize(Stetho.newInitializerBuilder(context) .enableWebKitInspector(new InspectorModulesProvider() { @Override public Iterable<ChromeDevtoolsDomain> get() { return new DefaultInspectorModulesBuilder(context).runtimeRepl( new JsRuntimeReplFactoryBuilder(context) //import package .importPackage("android.content") //import class .importClass(R.class) //set variable .addVariable("foo", "bar") .build() ).finish(); } }) .build());
  19. 4:Console 39 //for Timber Timber.plant(new StethoTree()); //for rhino //change initialize

    method from initializeWithDefaults Stetho.initialize(Stetho.newInitializerBuilder(context) .enableWebKitInspector(new InspectorModulesProvider() { @Override public Iterable<ChromeDevtoolsDomain> get() { return new DefaultInspectorModulesBuilder(context).runtimeRepl( new JsRuntimeReplFactoryBuilder(context) //import package .importPackage("android.content") //import class .importClass(R.class) //set variable .addVariable("foo", "bar") .build() ).finish(); } }) .build());
  20. 4:Console feature • check log on console (timber plugin) •

    use REPL (rhino plugin) • input “context”, check insight “context” • example: context.getString(R.string.app_name) • example: context.mActivity • but change variable from console, must add operating codes for it 42
  21. 5:dumpapp • clone Stetho repository & install python3 • prepared

    4 plugin by default & support custom plugin 44
  22. 5:dumpapp feature • CrashDumperPlugin • happened crash, check recovery behavior

    and crash report • FilesDumperPlugin • output /data/data/<package>/files • command: ls, tree, download • example: dumpapp files ls 46
  23. chuck feature • quickly check network log on device •

    app is existed on notification area by default • simple UI, easily reach to request / response • keep old log and search it later • Stetho & android monitor auto-delete logs 52
  24. ᶅAndroid-Debug-Database feature • check all database and shared preferences •

    ability to sort / search / run any SQL • easy to edit value on browser • download database 57
  25. ᶆLayout Inspector feature • capture view hierarchy and screenshot together

    • revise and compare layout at later • inspect each view property • get information which theme is applied on view • hover elements and check it • if overlay the elements, right-click it and unchecked 'Show in preview’ • easy to understand nested hierarchy, because focus on only captured activity • can't get whole screenshot but keep layout structure 61
  26. ᶆLayout Inspector appendix • this is capture, not real time

    preview • dropdown is arranged in background Activity order • the rear most dropdown is the top Activity • if you operate device while capturing, screenshot and layout are misaligned 62
  27. ᶇTheme Editor • edit and inspect theme specified on res/styles

    • preview components • change any theme and switch api version • click color icon, start color tool 63
  28. Conclusion • Network status • timber and chuck • if

    can't insert log tool, use HTTP monitor i.e. Charles • DB status • Stetho or Android-Debug-Database • if Realm, use Stetho-realm-plugin • View status • where is view? -> Layout Inspector • optimize nest -> Layout Inspector • applied theme -> Layout Inspector • margin/padding -> Stetho 69
  29. Conclusion • Network status • timber and chuck • if

    can't insert log tool, use HTTP monitor i.e. Charles • DB status • Stetho or Android-Debug-Database • in case of Realm, use Stetho-realm-plugin • View status • where is view? -> Layout Inspector • optimize nest -> Layout Inspector • applied theme -> Layout Inspector • margin/padding -> Stetho 70
  30. Conclusion • Network status • timber and chuck • if

    can't insert log tool, use HTTP monitor i.e. Charles • DB status • Stetho or Android-Debug-Database • if Realm, use Stetho-realm-plugin • View status • where is view? -> Layout Inspector • optimize nest -> Layout Inspector • applied theme -> Layout Inspector • margin/padding -> Stetho 71
  31. notes ▪Stetho chrome dev tools, also use webview debug without

    adding code for it ▪1:View Hierarchy feature convert property to css for understanding by chrome https://github.com/facebook/stetho/blob/master/stetho/src/main/java/com/ facebook/stetho/inspector/elements/android/ViewDescriptor.java#L336 support style PR https://github.com/facebook/stetho/pull/261 screencast https://github.com/facebook/stetho/pull/190 74
  32. notes ▪3: Database Inspection default support plugins https://github.com/facebook/stetho/blob/master/stetho/src/main/java/com/ facebook/stetho/Stetho.java#L302 ▪4:

    Console package name is not starting with special domain, happend package error https://github.com/facebook/stetho/pull/406 ▪5: dumpapp File Dumper plugin base dir https://github.com/facebook/stetho/blob/master/stetho/src/main/java/com/ facebook/stetho/dumpapp/plugins/FilesDumperPlugin.java#L79 75