Upgrading Mobile Tester's Weapons with Advanced Debugging

#ATAGTR2017
16th 17th March
Upgrading Mobile Tester’s
Weapons with Advanced
Debugging
Abhijeet Vaikar

Agile Testing Alliance Global Testing Retreat 2017
Abhijeet Vaikar
@AbhijeetVaikar
https://in.linkedin.com/in/abhijeetvaikar

What are we here for?

An open mindset
towards technical
testing
An approach to Debug
Mobile Web/ Mobile
Native/ Mobile Hybrid
Apps

Mobile testers in the world are
evolving. Are you too?

Why should you evolve?

https://scroll.in/latest/829780/65-of-it-employees-not-trainable-in-new-technologies-likely-to-lose-jobs-says-capgemini-ceo

Rise of the Technical Tester
Testing
+

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

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

Is this enough?

Applications on the mobile
Web Hybrid Native
Android
WebView
iOS
UIWebView
Pure Native
SDK
Components

Upgrading Sherlock with Advanced
Debugging Tools
Network Proxy ToolsBrowser Developer Tools Device Log Monitoring Tools

Browser Developer Tools
Debug mobile websites on your device by connecting to Desktop browser developer tools

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

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

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

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

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.

Valence A cross browser debugging tool
Valence
Add-On
Firefox WebIDE

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.

Other options?
Weinre (WEb INspector REmote)
Ghostlab – Licensed tool to test and inspect any
website on various browsers and mobile devices
simultaneously

Network Proxy Tools
Debug network calls made from your app by introducing a proxy between app and the internet

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

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

Additional testability features
Dynamic Rewrite Request / Response
Blacklist Request / Response
Simulate Networking Speeds
Mock Request / Response

Charles Web
Debugging Tool
Fiddler Web
Debugging Proxy

Other options?
Burp – Security vulnerability scanner which can
also be used as a network proxy.

Device Log Monitoring Tools
Debug native apps by monitoring device console logs.

Debug information exposed by Device Log Monitoring
Tools
Device log (which includes app logs) messages:
Explicit debug messages
Warnings
Errors

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)

Gray Box Tester Can cover more
tests
Produces better
defect artefacts
Technical Testing
Debt is no more
Upgraded Sherlock!

Which tools can you use when?

Web
Browser Developer Tools

Hybrid
Android
WebView
iOS
UIWebView
Browser Developer
Tools
Device Log
Monitoring Tools
Network Proxy
Tools

Native
Pure Native
SDK
Components
Network Proxy Tools
Device Log
Monitoring Tools

How can you get started?

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.

Resources
• https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
• https://developer.mozilla.org/en-
US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE
• https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--
webdesign-8787
• http://stackoverflow.com/questions/3712883/logcat-standalone-client
• https://play.google.com/store/apps/details?id=org.jtb.alogcat&hl=en
• http://apple.stackexchange.com/questions/155552/is-there-any-way-to-access-the-console-logs-on-an-
ios-8-device-without-installin
• https://www.utest.com/articles/how-to-get-console-and-crash-logs-from-ios-on-a-mac-using-xcode
• http://codewithchris.com/tutorial-using-charles-proxy-with-your-ios-development-and-http-debugging/
• https://www.moncefbelyamani.com/how-to-capture-iphone-and-ipad-network-traffic-with-charles/
• https://jaanus.com/debugging-http-on-an-android-phone-or-tablet-with-charles-proxy-for-fun-and-
profit/
• http://docs.telerik.com/fiddler/Configure-Fiddler/Tasks/ConfigureForAndroid
• http://www-01.ibm.com/support/docview.wss?uid=swg21968525
• http://www.gallop.net/blog/rise-of-the-software-development-engineer-in-test-sdet/
• http://qablog.practitest.com/stop-being-a-non-technical-tester/

Thank You. Questions?

Upgrading Mobile Tester's Weapons with Advanced Debugging

More Related Content

What's hot

Viewers also liked

Similar to Upgrading Mobile Tester's Weapons with Advanced Debugging

Recently uploaded

Upgrading Mobile Tester's Weapons with Advanced Debugging