Currently, most websites have responsive design to support mobile devices. Sometimes the behavior of mobile and desktop browsers is different; this could be problematic. For crashes on desktop browsers, we can reproduce the issue easily. But if it crashes only on mobile browsers, we need a different way to reproduce the issue such as remote debugging that we will show in this article.
Why do we need remote debugging ?
For some devices, we cannot debug or reproduce the issue on the device. If it has problems, we can assume or guess what the problems are, but this isn't a good way, because we don't know if the solution is correct. Remote debugging can help us to reproduce the issue and find the problems and we can fix it directly.
To remotely debug the iOS Browser without a Mac machine, we need the iOS WebKit Debug Proxy. Google supports the Linux version. We will use the Windows version from Arty Gus.
Git Repositories for the iOS WebKit Debug Proxy.
| Linux | https://github.com/google/ios-webkit-debug-proxy |
| Windows | https://github.com/artygus/ios-webkit-debug-proxy-win32 |
Get the latest Windows Build.
How to remotely debug with Windows.
1. Enable the inspector on the iOS device via: "Setting > Safari > Advanced > Web Inspector = ON" and open the browser pages that we need to debug.
2. Connect the devices to your PC with a USB cable.
By default, the proxy will list all attached iOS devices on: localhost:9221 and assign each device an incremented port number.
When you select the device, it will show the opened pages on that device.
4. On your desktop, go to the DevTools online UI:
http://chrome-devtools-frontend.appspot.com/static/33.0.1722.0/devtools.html
http://chrome-devtools-frontend.appspot.com/static/33.0.1722.0/devtools.html?ws=localhost:9222/devtools/page/1
You will see the Devtools UI with the opened page on your device. You can debug just like the desktop version.
