The presentation on Upgrading a mobile tester's weapons with advanced debugging was done during #ATAGTR2017, one of the largest global testing conference. All copyright belongs to the author.
Author and presenter : Abhijeet Vaikar
4. Agile Testing Alliance Global Testing Retreat 2017
An open mindset
towards technical
testing
An approach to Debug
Mobile Web/ Mobile
Native/ Mobile Hybrid
Apps
5. Agile Testing Alliance Global Testing Retreat 2017
Mobile testers in the world are
evolving. Are you too?
9. Agile Testing Alliance Global Testing Retreat 2017
Rise of the Technical Tester
Testing
+
10. Agile Testing Alliance Global Testing Retreat 2017
Current Testing Trends
29%
Testers use real devices to
test websites/native apps
46%
Confirmed of more issues
with mobile environments
than desktop
92%
Testing teams perform
mobile cross-browser
testing.
Mobile Testing will
remain on top.
Agile demands
high
collaboration
Debugging skills are
in demand
11. Agile Testing Alliance Global Testing Retreat 2017
State of Sherlock, The Mobile Tester
Conventional
Black-Box Tester
Poor Coverage
of Tests
Stuck with
producing
orthodox defect
artefacts
Ends up with
Technical
Testing Debt
14. Agile Testing Alliance Global Testing Retreat 2017
Applications on the mobile
Web Hybrid Native
Android
WebView
iOS
UIWebView
Pure Native
SDK
Components
15. Agile Testing Alliance Global Testing Retreat 2017
Upgrading Sherlock with Advanced
Debugging Tools
Network Proxy ToolsBrowser Developer Tools Device Log Monitoring Tools
16. Agile Testing Alliance Global Testing Retreat 2017
Browser Developer Tools
Debug mobile websites on your device by connecting to Desktop browser developer tools
17. Agile Testing Alliance Global Testing Retreat 2017
Debug information exposed by Browser Dev Tools
Complete DOM structure of the web page.
CSS styles applied to the DOM
Request and Response information to find network issues
Page Resources (Html, CSS, JS, Images)
Runtime performance of different events that take place on loading web page
Memory profiling to find memory leak problems.
JavaScript errors and warnings.
Non-binary data sent over WebSockets (Non-HTTP Real-time communication)
Cached content
Cookie information
Data stored in Local Storage, Session Storage, IndexedDB, Web SQL
18. Agile Testing Alliance Global Testing Retreat 2017
Additional testability features
Live-edit HTML elements (add, update, delete elements and their attributes), CSS
values.
Switch context to debug iframes embedded inside pages.
Edit and Re-send request from Network Panel (Supported by Firefox Dev Tools)
Enable/Disable Cache
Edit/Delete cookies
Edit/Delete local and session storage data
Manipulate JavaScript data
19. Agile Testing Alliance Global Testing Retreat 2017
Browser Developer Tools – Simulated
Debugging
Open desktop browser
and start developer
tools
Install user agent
spoofer on browser
Open mobile web site
on the browser
Activate User Agent
Spoofer
Mobile website runs
entirely on the desktop
and can be debugged
in a simulated
environment using
Developer tools
20. Agile Testing Alliance Global Testing Retreat 2017
Browser Developer Tools – Real Device
Debugging
Open desktop browser
and start developer
tools Open web site on the
browser on device
Mobile website runs
entirely on device and
can be debugged using
desktop browser dev
tools!
Enable device for USB Debugging and
connect device to desktop
Select device in dev
tools to debug
21. Agile Testing Alliance Global Testing Retreat 2017
Google Chrome Mozilla Firefox Apple Safari (iOS)
Requirements Chrome on any desktop
OS
Android/iOS phone with
Chrome installed
USB Cable
Firefox on any desktop
OS
Android/iOS phone
with Firefox installed
(Also need to enable
remote debugging
inside the app)
USB Cable
Safari installed on
MacOSx
Apple iPhone with
Safari installed on it
USB Cable
Additional
Features
Debugging over Wi-Fi
possible (Complicated to
setup)
You can screencast your
website from device to
Dev Tools
Can also debug
WebViews embedded in
native Android apps
Can also debug Safari
and iOS Webviews using
iOS-webkit-debug-proxy
Debugging over Wi-Fi
(Easier to setup)
Multi-browser
debugging support
using Valence
Can also debug
WebViews embedded
in native iOS apps.
• Can also debug
WebViews embedded in
native iOS apps.
22. Agile Testing Alliance Global Testing Retreat 2017
Valence A cross browser debugging tool
Valence
Add-On
Firefox WebIDE
23. Agile Testing Alliance Global Testing Retreat 2017
Debugging Webviews in Hybrid Apps
Android
WebView
iOS
UIWebView
Android
You need to configure the web views in your native Android
app so that they can be debugged within developer tools.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
iOS
You need to have development provisioning profile installed
on your target device and you can debug only if you build
and run the app from Xcode.
24. Agile Testing Alliance Global Testing Retreat 2017
Other options?
Weinre (WEb INspector REmote)
Ghostlab – Licensed tool to test and inspect any
website on various browsers and mobile devices
simultaneously
25. Agile Testing Alliance Global Testing Retreat 2017
Network Proxy Tools
Debug network calls made from your app by introducing a proxy between app and the internet
26. Agile Testing Alliance Global Testing Retreat 2017
GET all posts by Dave GET all posts by Dave
Here are all posts by
Dave
Here are all posts by
Dave
Log of all network traffic that
can be inspected, and acted
upon.
Proxy
Internet
Mobile
Device
27. Agile Testing Alliance Global Testing Retreat 2017
Debug information exposed by Network Proxy Tools
Monitor network request and response information at a granular level
Communication protocol
Request end-point
Request headers
Request payload
Response headers
Response body
29. Agile Testing Alliance Global Testing Retreat 2017
Charles Web
Debugging Tool
Fiddler Web
Debugging Proxy
30. Agile Testing Alliance Global Testing Retreat 2017
Other options?
Burp – Security vulnerability scanner which can
also be used as a network proxy.
31. Agile Testing Alliance Global Testing Retreat 2017
Device Log Monitoring Tools
Debug native apps by monitoring device console logs.
32. Agile Testing Alliance Global Testing Retreat 2017
Debug information exposed by Device Log Monitoring
Tools
Device log (which includes app logs) messages:
Explicit debug messages
Warnings
Errors
33. Agile Testing Alliance Global Testing Retreat 2017
Monitoring device logs from
command line using Android
Debug Bridge (adb) utility
View device logs by connecting
iOS device to XCode
Use Apple Configurator2 to
view iOS device logs
Use an app like iOSConsole
(Requires OS X 10.9.2 or higher)
34. Agile Testing Alliance Global Testing Retreat 2017
Gray Box Tester Can cover more
tests
Produces better
defect artefacts
Technical Testing
Debt is no more
Upgraded Sherlock!
40. Agile Testing Alliance Global Testing Retreat 2017
Understand the application architecture. Ask your developers
questions!
Understand the technology behind the app.
Raise bugs with all the information gathered from
debugging tools. This will save your dev’s time to fix the
bug.
Use multiple tools in tandem. One tool is not a solution for
everything.
Document the debugging approaches you use for others
to benefit from.