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

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