Web developers can now quickly reproduce and troubleshoot issues that only show up in a specific mobile browsing environments using Perfecto's Remote Device Access feature and standard dev tools to isolate the problem and fix it.

Prerequisites

Register a user with the Perfecto CQ Lab (with the dev relevant permissions).

Debug on a Mobile Device

1. Login to your Perfecto Lab account

2. Click the ‘Launch Mobile’ icon in the Perfecto cloud toolbar

Step 1 launch mobile web app devtunnel

3. Select an Android device and click “open”

4. From the Widgets menu click the ‘DevTunnel’ widget

step 2 devtunnel widget web app

5. If you have not done so already, download and install the DevTunnel installer. Wait for the installation to complete.

step 3 install devtunnel web app

6. Click the ‘Start Dev Tunnel Session’ step to establish a direct connection to the device

For additional information and guidance please refer to our documentation – http://developers.perfectomobile.com/display/PD/DevTunnel

step 4 start devtunnel session

7. Interactively, start the Chrome browser on the Perfecto device.

Navigate to the site to debug (here we use the Perfecto sample app) – http://www.nxc.co.il/web/1/index.html

8. On your desktop Chrome browser, open chrome://inspect/

step 5 device id connected device devtunnel

9. Your connected Perfecto Lab device appears in the list of devices and the page that the device browser is opened on.

step 6 debug info web app

10. Click on “inspect” for the page, the Chrome inspection page opens.

Now you can easily use standard tools to debug your web application on real devices all over the globe. With Perfecto, you can easily setup the same environmental conditions under which the issue occurred – The same real devices with the same OS version, set the network, location, orientation, any additional apps installed on the device. Those capabilities help you to simply reproduce the issue, investigate it and reduce time to resolution.

step 7 chrome inspect devtunnel

11. Select the Sources tab to see the list of Javascript scripts associated with the page.

12. Select the script to work with, and display it in the right panel.

step 8 script web app devtunnel

13. Set a breakpoint in the script.

step 9 script breakpoint web app devtunnel

14. Interactively, activate the elements that activate the Javascript script. The breakpoint suspends the browser, indicated in the Perfecto Lab interface.

step 10 device javascript devtunnel

15. Step through the script and check the variable values during the execution, and perform other debugging actions.

step 11 variable debug web app devtunnel

16. When finished, click the ‘Disconnect’ button from the Perfecto Widgets frame to close your DevTunnel session.

step 12 disconnect web app devtunnel

17. Click the ‘X’ on the device window to release the mobile device.

step 13 release device web app devtunnel

Congratulations! You now know how to connect a real, cloud-based mobile device from the Perfecto Lab and use Chrome-inspect to check and debug the mobile web-app. Try it out with the next feature you’re building or run some of your own tests on different devices to see if your apps pass with flying colors on other platforms.