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

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

934a9e49edc3174d09ab2e09daed5062?s=47 ymnder
March 09, 2017

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

how to efficiently debug Application
DroidKaigi 2017/3/9

934a9e49edc3174d09ab2e09daed5062?s=128

ymnder

March 09, 2017
Tweet

Transcript

  1. Τϥʔͱઓ͏ͨΊͷσόοά๏ how to efficiently debug Application 2017/03/09 12:40 - 13:10

    #Room 4
  2. Sample App https://github.com/ymnder/CheckLibraryApp 2

  3. whoami • Ryo Yamazaki / Nikkei Application Engineer • twitter:

    @ymnd • github: @ymnder 3
  4. product: ೔ܦిࢠ൛App 4

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

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

    knew when I freshly joined team. 6
  7. 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
  8. 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
  9. 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
  10. join team • No idea how to face the error

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

    • So today I introduce them which I usually use to identify problem. 11
  12. today's menu ᶃ Stetho ᶄ chuck ᶅ Android-Debug-Database ᶆ Layout

    Inspector ᶇ Theme Editor 12
  13. ᶃStetho • debug bridge for Android app • use Chrome

    Dev tools 13
  14. ᶃ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
  15. ᶃ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
  16. ᶃ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
  17. ᶃStetho 1:View Hierarchy 2:Network Inspection 3:Database Inspection 4:Console 5:dumpapp

  18. 1:View Hierarchy • real time preview, you can inspect view

    hierarchy • support API15+ 18
  19. 1:View Hierarchy feature 19

  20. 1:View Hierarchy feature 20

  21. 1:View Hierarchy feature 21

  22. 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
  23. ᶃStetho 1:View Hierarchy 2:Network Inspection 3:Database Inspection 4:Console 5:dumpapp

  24. 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' }
  25. 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
  26. 2:Network Inspection feature 26

  27. 2:Network Inspection feature 27

  28. 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
  29. ᶃStetho 1:View Hierarchy 2:Network Inspection 3:Database Inspection 4:Console 5:dumpapp

  30. 3:Database Inspection • prepared 2 drivers by default • SqliteDatabaseDriver

    • ContentProviderDatabaseDriver 30
  31. 3:Database Inspection feature 31

  32. 3:Database Inspection feature 32

  33. 3:Database Inspection feature • support SQL command !!! • quickly

    check DB, ContentProvider, SharedPreference • ability to edit value • support custom plugin • example: for Realm plugin 33
  34. ᶃStetho 1:View Hierarchy 2:Network Inspection 3:Database Inspection 4:Console 5:dumpapp

  35. 4:Console 35 dependencies { //for timber compile 'com.facebook.stetho:stetho-timber:1.4.2' //for rhion

    compile 'com.facebook.stetho:stetho-js-rhino:1.4.2' }
  36. 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());
  37. 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());
  38. 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());
  39. 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());
  40. 4:Console feature 40

  41. 4:Console feature 41

  42. 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
  43. ᶃStetho 1:View Hierarchy 2:Network Inspection 3:Database Inspection 4:Console 5:dumpapp

  44. 5:dumpapp • clone Stetho repository & install python3 • prepared

    4 plugin by default & support custom plugin 44
  45. 5:dumpapp feature • HprofDumperPlugin • Heap Dump • SharedPreferencesDumperPlugin •

    change SharedPreferences 45
  46. 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
  47. ᶄchuck • HTTP inspector app for OkHttp3 • required: api16+

    and OkHttp 3.x 47
  48. ᶄchuck 48 dependencies { debugCompile 'com.readystatesoftware.chuck:library:1.0.4' releaseCompile 'com.readystatesoftware.chuck:library-no-op:1.0.4' } OkHttpClient

    client = new OkHttpClient.Builder() .addInterceptor(new ChuckInterceptor(context)) .build();
  49. ᶄchuck 49 dependencies { debugCompile 'com.readystatesoftware.chuck:library:1.0.4' releaseCompile 'com.readystatesoftware.chuck:library-no-op:1.0.4' } OkHttpClient

    client = new OkHttpClient.Builder() .addInterceptor(new ChuckInterceptor(context)) .build();
  50. ᶄchuck 50 dependencies { debugCompile 'com.readystatesoftware.chuck:library:1.0.4' releaseCompile 'com.readystatesoftware.chuck:library-no-op:1.0.4' } OkHttpClient

    client = new OkHttpClient.Builder() .addInterceptor(new ChuckInterceptor(context)) .build();
  51. chuck feature 51

  52. 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
  53. ᶅAndroid-Debug-Database • specialized debugging for database • support: api 9+

    53
  54. ᶅAndroid-Debug-Database 54 dependencies { debugCompile 'com.amitshekhar.android:debug-db:1.0.0' } //input 'http://XXX.XXX.X.XXX:8080' to

    any browser //or if emulator 'adb forward tcp:8080 tcp:8080' //then 'localhost:8080'
  55. ᶅAndroid-Debug-Database feature 55

  56. ᶅAndroid-Debug-Database feature 56

  57. ᶅ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
  58. ᶆLayout Inspector • new feature: from Android Studio 2.2 58

  59. ᶆLayout Inspector 59

  60. ᶆLayout Inspector feature 60

  61. ᶆ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
  62. ᶆ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
  63. ᶇ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
  64. ᶇTheme Editor 64

  65. ᶇTheme Editor 65

  66. ᶇTheme Editor feature 66

  67. ᶇTheme Editor feature 67

  68. OK, so how do I do? Approach error with this

    combined tool!! 68
  69. 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
  70. 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
  71. 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
  72. Thank you for your attention :)

  73. Notes

  74. 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
  75. 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
  76. Library

  77. Library ▪Stetho https://github.com/facebook/stetho ▪Stetho realm plugin https://github.com/uPhyca/stetho-realm ▪chuck https://github.com/jgilfelt/chuck ▪Android

    Debug Database https://github.com/amitshekhariitbhu/Android-Debug- Database 77
  78. References

  79. Stetho • http://qiita.com/shikato/items/ 50e23e64aacbeb49c172 • https://code.facebook.com/posts/ 393927910787513/stetho-a-new-debugging- platform-for-android/ • https://www.slideshare.net/kozmats/

    androidstackoverflow 79
  80. chrome dev tools • https://developer.chrome.com/home • https://developers.google.com/web/tools/chrome- devtools/remote-debugging/ 80

  81. chrome dev tools screencast • https://blog.chromium.org/2013/12/chrome- devtools-for-mobile-emulate-and.html 81

  82. Stetho Network interceptor • http://qiita.com/wasabeef_jp/items/ 1e7bdb78766708206d3d 82

  83. OkHTTP interceptor • http://yuki312.blogspot.jp/2016/03/okhttp- interceptor.html • https://github.com/square/okhttp/wiki/Interceptors 83

  84. rhino • https://developer.mozilla.org/ja/docs/Rhino_Shell 84

  85. Layout inspector • http://tools.android.com/tech-docs/layout-inspector • https://developers-jp.googleblog.com/2016/06/ android-studio-22-ui-constraint-layout.html 85

  86. Theme Editor • http://qiita.com/katsuki/items/ 6944d26ca9e372ade1dd • http://qiita.com/takahirom/items/ 3c54cdc35b6dd5116d73 • https://developer.android.com/studio/write/theme-

    editor.html 86
  87. Hierarchy Viewer • https://developer.android.com/studio/profile/ hierarchy-viewer.html 87

  88. Android Studio tips • http://qiita.com/FumihikoSHIROYAMA/items/ e3159103ba2fba07e063 • http://qiita.com/kaelaela/items/ e6d1d317827db462df3e 88

  89. Charles • https://www.charlesproxy.com/ • http://qiita.com/kazy/items/252bfc2d88d8899a95d5 89