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

how to efficiently debug Application
DroidKaigi 2017/3/9

Transcript

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

   View Slide

2. Sample App
   https://github.com/ymnder/CheckLibraryApp
   2
   

   View Slide

3. whoami
   • Ryo Yamazaki / Nikkei Application Engineer
   • twitter: @ymnd
   • github: @ymnder
   3
   

   View Slide

4. product: ೔ܦిࢠ൛App
   4
   

   View Slide

5. this topic’s target
   • android development beginner
   • joining to android team fortunately
   • want to do fixing bug and improvement
   5
   

   View Slide

6. What makes me choose this topic?
   What I wish I knew when I freshly joined team.
   6
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. join team
    • No idea how to face the error and solve it efficiently
    • I need strong power….
    ʊਓਓਓਓʊ
    ʼɹpowerɹʻ
    ʉY^Y^Yʉ
    10
    

    View Slide

11. join team
    • There are powerful debugging tools, aren’t there?
    • So today I introduce them which I usually use to
    identify problem.
    11
    

    View Slide

12. today's menu
    ᶃ Stetho
    ᶄ chuck
    ᶅ Android-Debug-Database
    ᶆ Layout Inspector
    ᶇ Theme Editor
    12
    

    View Slide

13. ᶃStetho
    • debug bridge for Android app
    • use Chrome Dev tools
    13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. ᶃStetho
    1:View Hierarchy
    2:Network Inspection
    3:Database Inspection
    4:Console
    5:dumpapp
    

    View Slide

18. 1:View Hierarchy
    • real time preview, you can inspect view hierarchy
    • support API15+
    18
    

    View Slide

19. 1:View Hierarchy feature
    19
    

    View Slide

20. 1:View Hierarchy feature
    20
    

    View Slide

21. 1:View Hierarchy feature
    21
    

    View Slide

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
    

    View Slide

23. ᶃStetho
    1:View Hierarchy
    2:Network Inspection
    3:Database Inspection
    4:Console
    5:dumpapp
    

    View Slide

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'
    }
    

    View Slide

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
    

    View Slide

26. 2:Network Inspection feature
    26
    

    View Slide

27. 2:Network Inspection feature
    27
    

    View Slide

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
    

    View Slide

29. ᶃStetho
    1:View Hierarchy
    2:Network Inspection
    3:Database Inspection
    4:Console
    5:dumpapp
    

    View Slide

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

    View Slide

31. 3:Database Inspection feature
    31
    

    View Slide

32. 3:Database Inspection feature
    32
    

    View Slide

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
    

    View Slide

34. ᶃStetho
    1:View Hierarchy
    2:Network Inspection
    3:Database Inspection
    4:Console
    5:dumpapp
    

    View Slide

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'
    }
    

    View Slide

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 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());
    

    View Slide

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 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());
    

    View Slide

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 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());
    

    View Slide

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 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());
    

    View Slide

40. 4:Console feature
    40
    

    View Slide

41. 4:Console feature
    41
    

    View Slide

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
    

    View Slide

43. ᶃStetho
    1:View Hierarchy
    2:Network Inspection
    3:Database Inspection
    4:Console
    5:dumpapp
    

    View Slide

44. 5:dumpapp
    • clone Stetho repository & install python3
    • prepared 4 plugin by default & support custom plugin
    44
    

    View Slide

45. 5:dumpapp feature
    • HprofDumperPlugin
    • Heap Dump
    • SharedPreferencesDumperPlugin
    • change SharedPreferences
    45
    

    View Slide

46. 5:dumpapp feature
    • CrashDumperPlugin
    • happened crash, check recovery behavior and crash
    report
    • FilesDumperPlugin
    • output /data/data//files
    • command: ls, tree, download
    • example: dumpapp files ls
    46
    

    View Slide

47. ᶄchuck
    • HTTP inspector app for OkHttp3
    • required: api16+ and OkHttp 3.x
    47
    

    View Slide

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();
    

    View Slide

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();
    

    View Slide

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();
    

    View Slide

51. chuck feature
    51
    

    View Slide

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
    

    View Slide

53. ᶅAndroid-Debug-Database
    • specialized debugging for database
    • support: api 9+
    53
    

    View Slide

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'
    

    View Slide

55. ᶅAndroid-Debug-Database feature
    55
    

    View Slide

56. ᶅAndroid-Debug-Database feature
    56
    

    View Slide

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
    

    View Slide

58. ᶆLayout Inspector
    • new feature: from Android Studio 2.2
    58
    

    View Slide

59. ᶆLayout Inspector
    59
    

    View Slide

60. ᶆLayout Inspector feature
    60
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

64. ᶇTheme Editor
    64
    

    View Slide

65. ᶇTheme Editor
    65
    

    View Slide

66. ᶇTheme Editor feature
    66
    

    View Slide

67. ᶇTheme Editor feature
    67
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

72. Thank you for your attention :)
    

    View Slide

73. Notes
    

    View Slide

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
    

    View Slide

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
    

    View Slide

76. Library
    

    View Slide

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
    

    View Slide

78. References
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide