Experitest Blog

How to Carry Out Mobile App Development and Debugging From Anywhere in the World

When you develop a mobile app debugging it is just as important. Mobile app development and debugging are even more efficient when you can debug your code on a remote machine rather than on your local system. Debugging on a machine other than your local system is beneficial when you have to check your app in different networks, perform carrier testing or solve device and operating system fragmentation issues.

 

It is useful in a number of additional situations such as:

  • The routine you are debugging runs on another system and might behave differently on another system.
  • The code you are debugging is compiled on a platform where the debugging user interface will not run.
  • When you want to take advantage of the debugging UI on your local machine while the code runs on a remote machine.

 

To clarify, this article is all about how remote debugging is achieved, how you can do debug using Chrome and, Safari debugging and SeeTest, challenges in testing, and its solutions.

 

How is Remote Debugging Achieved?

 

Debugging is achieved by using a debugger that supports remote debugging and a server, which allows it to interact with remote code.

 

With mobile debugging, you can run the code on one system and control it from your local system.

 

The local system runs the debugger user interface, and the remote machine runs the debug engine and code. To perform mobile debugging; you need to access a remote machine where the database and code resides.

 

So, if you work in mobile app development or testing and have a hard time iterating your app through various builds, here are some options that you can consider for remote debugging.

 

Chrome Remote Debugging

 

Chrome remote debugging is for both Android devices and the Chrome browser. This option will help you remotely debug code on an Android device from Mac, Windows, or Linux systems.

 

The main benefit of using Chrome remote debugging is that it lets you use the Chrome Inspector to debug the app performance. Furthermore, it also allows you to debug WebViews for native Android Apps.

 

Step 1: Discover your Android Device

1. To discover, open the Developer Options screen on your Android. Select Enable USB Debugging.

2. On your development machine, open Chrome and then Developer Tools.

3. Now, in developer tools, click on Main Menu, select More Tools > Remote Devices.

developer tools - mobile app development
Image Source

4. Open the Settings Tab, and make sure the Discover USB Devices checkbox is enabled. Now, connect your Android device to the development machine via USB cable.

developer tools - mobile app development

Image Source

 

Step 2 Start Debugging on your Android Device

 

To start remote debugging, install the ADB extension for Chrome.

 

1. The extension will add a new icon in the upper right-hand corner of your Chrome browser.

2. Click on the icon, and it will show you options including View Inspection Targets (gives the list of all remote devices), Start and Stop ADB (debugging service).

inspection targets - mobile app development
Image Source

3. On your Android device, open Chrome, go to Settings> Advanced> Developer Tools>Enable USB Debugging.

4. Now, view Inspection Targets, check remote devices and click the tab that matches your Android device model name.

devices - mobile app development
Image Source

5. Click on Inspect, and it will open a new window with Chrome Dev Tools.

6. The Console is already connected to a device. Running a command on the desktop will execute it on the mobile device.

developer tools - mobile app development
Image Source

 

Before you perform Chrome remote debugging, remember that there is a difference between Chrome for Android and Android Browser. With SeeTest, you can work on remote machines for remote mobile app development and debugging.

 

Challenges of Chrome Remote Debugging

 

Although Chrome Debugger is one of the best mediums for remote debugging, it does come with some challenges:

  • Chrome Debugger is extremely slow for realm objects and that sometimes makes it unusable for development purposes.
  • The Remote Procedure Call roundtrip times are in order of 40ms per operation.

 

Safari Remote Debugging

 

In iOS6, Apple introduced a new feature known as Safari remote debugging.

 

Developing web pages for mobile devices and debugging a hybrid app is often difficult. But Apple’s Web Inspector tool lets the developers use the Safari developer tools to debug web apps that run on iOS devices, including PhoneGap applications.

 

To use this feature, connect your iOS device to the laptop with Mac OS X.

 

Open the Settings app > Safari> Advanced Menu

advanced - mobile app development

Image Source

 

1. Enable Web Inspector, and your device is ready for Remote Debugging.

2. Open Safari and visit any web page.

3. Again, open Safari. If you don’t see the Develop menu, go to Safari Preference > Advanced Tab, and check the develop menu.

advanced - mobile app development

4. In the Develop menu, you will see a menu option that has the same name as your iOS device.

develop - mobile app development

Image Source

5. Hover the mouse, and you’ll see the name of the web page visible in Safari, or a list of open URLs. Select the URL and Safari will open a new set of Dev tools.

inspector - mobile app development

Image Source

With this, now you have the ability to interact with mobile Safari from your desktop. The menu options include Resources, Storage, Instrument, Search, Issue, Debug, Breakpoint, and the Console.

 

Although you need to be familiar with all the tabs, here are the important ones that will help you debug.

 

• CONSOLE

inspector - mobile app development

Image Source

 

It is the tab where you can run your code and find errors. This tab is mainly useful for checking variables and firing functions. For example, the image above shows how the console reports a JavaScript error.

 

• RESOURCES

inspector - mobile app development

Image Source

 

This tab gives you access to DocumentObject Model (DOM). As you select the code in the panel, you will see it on the device in real time. You can edit the HTML on the device, and by double-clicking the text of H1, it lets you modify it.

 

You can also access the tag node, style properties, and modify the design.

 

• INSTRUMENT

 

When you build complex AJAX-based applications, Instrument lets you trace and monitor network requests.

inspector - mobile app development

Image Source

 

For example (check image above): If you run a simple AJAX request, check how it shows in the network panel along with other requests.

inspector - mobile app development

Image Source

 

Click on the selected row, and you will get the raw result of the request.

 

• DEBUGGER

 

Open debugger and select a JavaScipt file from your application. Add a breakpoint and then execute it on the device.

inspector - mobile app development

Image Source

 

This process will stop execution for a while and let you go through the functions one step at a time.

 

Challenges of Safari Remote Debugging

 

Safari remote debugging is an easy and practical way to debug and modify the hybrid apps in iOS. But this form of debugging comes with certain challenges:

  • There are instances, where app project works on Mac, but not an iOS device. Hype Reflect’s console can be used, but reporting is limited.
  • The simulator launches the app, but it never gets deployed.

 

Challenges in Working with Different Networks

 

According to a 2015 Mobile App Development User Survey, 61% of the users expect their apps to start in 4 seconds or less and 49% expect them to respond in 2 seconds or less. The apps also stop loading or do strange things as the network fluctuates.

 

So, whether you are deploying your mobile app or trying to debug it, it is important to check them in different scenarios.

 

Usually, most of the apps are tested on ready and accessible networks like at your workplace. This testing approach does not represent its functionality and performance across different networks and geographies.

 

Moreover, apps are based on the real-time exchange of data between servers and users across different regions of the world.

 

As networks vary worldwide, so does the mobile app performance. For instance, there are countries who are offering 4G networks, while others are still stuck in a varied range of network speeds. When you are out using your mobile app, the bandwidth is not enough, latency gets high, and network distorts.

 

Due to the global network problem, it is essential to perform carrier testing and check them by manipulating the network conditions and in different regions.

 

Other challenges in mobile app testing include:

  • Operating System fragmentation that arises due to the different version of Oses.
  • Device fragmentation, which occurs due to the availability of different mobile models.

 

Solution: Mobile App Development and Debugging Via SeeTest Global Data Centers

 

So, if you want to check that your app works properly on a range of networks, test them under simulated network conditions (manipulate the flow of network data) or do remote debugging via SeeTest data centers.

 

For example, you are located in India, and you need to debug an app on a USA network. With SeeTest data center, you can test the app on a device located in the USA data center.

 

The cloud allows you to have one server on multiple regions, and you can also request specific locations from it as well. Eight global data centers with ISO certifications give you the ability to build an app from anywhere in the world making you more resilient.

 

With SeeTest solution, you can also carry out remote dev and debugging without the need for separate tools for Android and iOS. The debugging process is fast and furthermore runs seamlessly on all platforms, be it Android, Mac or iOS.

 

Moreover, testing is done on real browser and devices using the open source tools including Selenium and Appium in an agile environment. The fleet of devices also includes the latest Android and iOS devices including iPhone X and Samsung Galaxy S9.

 

No setup or investment is required as developers can debug and test their apps directly from their browsers using SeeTest continuous testing platform.

 

You can also run CI/CD across the world, according to your preferences.

 

The Final Words

 

Now when you know, how important it is to test across various data centers and networks, do keep an eye on the common problem areas including network speed, packet loss, and jitters.

 

In conclusion, SeeTest is one of the best and recommended tools for mobile app development and debugging from anywhere in the world. With eight global data centers, it will allow you to test with ease and deliver the best mobile apps to clients.

 

 

codeless automation

 

Jonny SteinerContent Manager

 

Comments are closed.