You just flew a few hours and are now safely ensconced onsite with your customer’s team, ready to help them troubleshoot the awesome app they built with OutSystems. Then, you realize they want you to test it on iOS phones. All you have is your beloved state-of-the-art laptop running Windows.
What to do now? First, don’t panic. Here's what you need to know to troubleshoot iOS on Windows.
What You Need
Like every good mechanic (which will be kind of your job here) knows, the best way to repair anything starts with the right set of tools. To troubleshoot iOS on Windows, your toolbox must include a few things.
Scoop is a command line installer that you will be using to install other tools. To install it make sure you have PowerShell 3 or later, installed in your machine and .NET Framework 4.5 or later. To verify your PowerShell version, go on your PowerShell console and run the following command, to get information about your PowerShell version:
After you have verified that you are in version 3 or later, install scoop by running the following command in the PowerShell console:
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
In some cases, you can get errors in the installation, due to some policy issues. If that’s the case, run the following command and then repeat the installation command:
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
Scoop Extras is an extra bucket that will allow you to install the remaining dependencies. To do it, go on the PowerShell console and run:
scoop bucket add extras
Install Git so you can access the WebKit debugger Proxy and the Adapter. In the PowerShell console, run the following command:
scoop install git
You’ll need the latest iTunes on your computer. If you are installing it, make sure that you have your PC updated, you are at least on Windows 7, and you use the Microsoft Store version of iTunes. This allows you to establish the connection to the iOS device to test and to get its Unique Device Identifier—the UDID—as well.
iOS WebKit Debug Proxy
iOS WebKit Debug Proxy allows debugging in iOS by managing the requests from the Adapter. To install it, run the following command in the PowerShell:
scoop install ios-webkit-debug-proxy
The libimobiledevice library. This is the tool that will help you communicate with any iOS device that you are using in your debug. To install it, just go on the PowerShell console and run:
npm install -g vs-libimobile
Remote Debug iOS WebKit Adapter
And finally, there’s the Remote Debug iOS WebKit Adapter. This is a tool that enables iOS/Safari debugging by using the Google Chrome Debugging Protocol.
To install it, open the PowerShell console and install the package for the WebKit Adapter by running the following command:
npm install remotedebug-ios-webkit-adapter -g
Now that you have your toolbox ready, it’s time to get the hands dirty.
Let’s Get Hands-On!
First of all, enable the remote debugging on the iOS device used for testing. Go to the device Settings, tap the Safari icon, and open the Advanced menu. Turn the Web Inspector switch on.
Troubleshooting a Mobile App
Also, your app should be generated in Development mode. To learn what you have to do to ensure this, check this article.
If you are troubleshooting a UI problem (JS or CSS related), I recommend troubleshooting them by replicating the issue on Safari. To do this, copy the app webview link to the iOS device browser. This way, we don’t need the certificates mentioned.
If you need to debug further than the UI, you must, on your computer, open iTunes and keep it running. This guarantees the connection between your PC and the iOS phone during the whole operation.
Connect the iPhone and choose to trust your computer, if prompted. Click on the phone icon that just appeared in the top-left corner of the iTunes window to show all the information about the connected device.
Then click on the Serial Number field until it changes to the UDID code of the phone connected:
Right-click the UDID string and select Copy to keep the device identifier:
Troubleshooting a Web App
And what about web apps? Well, they are way simpler. You just have to open the app link in the device’s Safari browser and start debugging as described in the next section. Easy peasy.
3, 2, 1, Debug!
Now that we have everything in place, it’s time to start the remote debugging. First, execute this line in your PowerShell console:
Note that in some cases, you might have to try a different port number instead of the default 9000 value. For example, try 9221 or 9222.
We now have open communication between our PC and our Device, is time to:
- Open the web app URL in the device’s Safari browser or open the mobile app on the device.
- Open Google Chrome, on your PC and, in the address bar, type:
- The Device menu for Chrome DevTools is displayed. In it, click on Configure... and add the port used for debugging:
In the Remote Target list, select the app/link you want to troubleshoot and click the Inspect link:
A new window will open, and in it, you should be able to see your app in the Chrome DevTools window:
You now have access to the app that you are debugging; it’s time to have fun!
In Case It Goes South
If Inspect is not working correctly and not refreshing the elements and the applied CSS, my one recommendation is the biggest IT cliché. Just try to turn it off and on again. Unplug the iPhone cable, plug it back in again, go back to Chrome, and see if you can finally inspect your app.
The Power and the Glory at Last!
You can finally dive deeply into the iOS app and start hunting for those miserable and annoying bugs. You're back on track, go get yourself some bugs, and show your customer who’s the best! May the glory be with you!