How to debug web app on iOS devices using a Windows PC
Both EriZone and NetEye 4 are capable to work on Android or iOS mobile devices. As many of you already known, mobile browsers work differently from their desktop version and could happen that your application works flawlessly on desktop, but something is broken on mobile. What can you do in this case to understand the problem and debug the software? The answer is remote debugging.
Debugging EriZone or NetEye 4 on Android devices could be relatively easy using Chrome tools. But have you ever needed to debug a web application in Safari on an iOS device but you didn’t have a Mac handy?
If you are debugging Safari on iOS, this will require Safari version 6 or greater. Windows & Linux developers will be disappointed to hear that the latest version of Safari available for Windows is version 5, and it’s not available at all on Linux. In this case can be very hard also understand the problem, but following this short guide you will discover a great tool that can save you life and next time you will need to debug an EriZone or NetEye 4 web page you will do it using the same tools as you would on the desktop, but connected to your mobile device.
You can remedy this problem using weinre (WEb INspector Remote). This is a debugger for web pages, similar to FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you to debug web pages on a mobile device such as a phone.
The weinre interface is similar to the major web inspector tools in your browser. It allows you to navigate your web page’s code and debug it.
Setting Up Weinre
-
-
- Installation: Weinre is based on node.js. It can be installed as an npm package as follows:
sudo npm -g install weinre - Start weinre server: Once you’ve installed it, you should start the weinre server with:
$ weinre --boundHost 192.0.2.0 --httpPort 8888
The-–boundhostallows you to connect to a remote server that is not the default localhost.
The-–httpPortdefaults to 8080 which is commonly used by many applications, so save yourself some problems down the line and change it to something else. You will then need an HTTP server, since you cannot load HTML files on a mobile device. - Add the weinre script: In the <head> tag of your code add the following weinre script tag:
<script src="http:// 192.0.2.0:8888/target/target-script-min.js#user"></script>
where#useris used for security reasons. There is no password, just an ID, so there is no real security here. The ID is a secret shared between your debug target and client, but it is sent as cleartext when your target and client connect to the server. If someone else knows your ID, they can connect to clients or targets you are running with that ID. - Connect to the client: You can reload or launch your app for your remote test by opening your browser to
http:// 192.0.2.0:8888/client/#user, which will allow you to remotely debug your app.
- Installation: Weinre is based on node.js. It can be installed as an npm package as follows:
-
In your web browser you should now see a panel that shows you all connected devices:
and the console where you can inspect elements and debug javascript on your website.
Valentina Da Rold
Author
