Web developers can now quickly reproduce and troubleshoot issues that only show up in a specific mobile browsing environments using Perfecto DevTunnel 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


     

  3. Select an Android device and click “open”

     

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

     

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

     

  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

     

  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 the chrome://inspect/.

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

  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.

  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.

     

  13. Set a breakpoint in the script

     

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

     

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

     

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


     

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

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.