Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

product: ೔ܦిࢠ൛App 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ᶃ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

Slide 15

Slide 15 text

ᶃ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

Slide 16

Slide 16 text

ᶃ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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

1:View Hierarchy feature 19

Slide 20

Slide 20 text

1:View Hierarchy feature 20

Slide 21

Slide 21 text

1:View Hierarchy feature 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

2:Network Inspection feature 26

Slide 27

Slide 27 text

2:Network Inspection feature 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

3:Database Inspection feature 31

Slide 32

Slide 32 text

3:Database Inspection feature 32

Slide 33

Slide 33 text

3:Database Inspection feature • support SQL command !!! • quickly check DB, ContentProvider, SharedPreference • ability to edit value • support custom plugin • example: for Realm plugin 33

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

4:Console feature 40

Slide 41

Slide 41 text

4:Console feature 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

chuck feature 51

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

ᶅAndroid-Debug-Database feature 55

Slide 56

Slide 56 text

ᶅAndroid-Debug-Database feature 56

Slide 57

Slide 57 text

ᶅ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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

ᶆLayout Inspector 59

Slide 60

Slide 60 text

ᶆLayout Inspector feature 60

Slide 61

Slide 61 text

ᶆ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

Slide 62

Slide 62 text

ᶆ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

Slide 63

Slide 63 text

ᶇ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

Slide 64

Slide 64 text

ᶇTheme Editor 64

Slide 65

Slide 65 text

ᶇTheme Editor 65

Slide 66

Slide 66 text

ᶇTheme Editor feature 66

Slide 67

Slide 67 text

ᶇTheme Editor feature 67

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Thank you for your attention :)

Slide 73

Slide 73 text

Notes

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Library

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

References

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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