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