Upgrading Mobile Tester's Weapons with Advanced Debugging

#ATAGTR201716th 17th March

Upgrading Mobile Tester’s Weapons with Advanced DebuggingAbhijeet Vaikar

Agile Testing Alliance Global Testing Retreat 2017

Abhijeet Vaikar

@AbhijeetVaikarhttps://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?

Agile Testing Alliance Global Testing Retreat 2017https://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

collaborationDebugging 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 DOMRequest and Response information to find network issuesPage Resources (Html, CSS, JS, Images)Runtime performance of different events that take place on loading web pageMemory profiling to find memory leak problems.JavaScript errors and warnings.Non-binary data sent over WebSockets (Non-HTTP Real-time communication)Cached contentCookie informationData 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 CacheEdit/Delete cookiesEdit/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

AndroidYou 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);}

iOSYou 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

https://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

https://www.vanamco.com/ghostlab/


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

InternetMobile

Device


Debug information exposed by Network Proxy Tools

Monitor network request and response information at a granular levelCommunication protocolRequest end-pointRequest headersRequest payloadResponse headersResponse body


Additional testability features

Dynamic Rewrite Request / ResponseBlacklist Request / ResponseSimulate Networking SpeedsMock 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.

https://portswigger.net/burp/



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 messagesWarningsErrors


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



Hybrid

Android WebView

iOS UIWebView



Network Proxy Tools


Native

Pure Native SDK

Components

Network Proxy ToolsDevice 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/

http://stackoverflow.com/questions/3712883/logcat-standalone-client

http://stackoverflow.com/questions/3712883/logcat-standalone-client

https://play.google.com/store/apps/details?id=org.jtb.alogcat&hl=en

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

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://docs.telerik.com/fiddler/Configure-Fiddler/Tasks/ConfigureForAndroid

http://www-01.ibm.com/support/docview.wss?uid=swg21968525

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://www.gallop.net/blog/rise-of-the-software-development-engineer-in-test-sdet/

http://qablog.practitest.com/stop-being-a-non-technical-tester/

http://qablog.practitest.com/stop-being-a-non-technical-tester/


Thank You. Questions?

Upgrading Mobile Tester's Weapons with Advanced Debugging

Software

Transcript of Upgrading Mobile Tester's Weapons with Advanced Debugging