14. 02. 2018 Valentina Da Rold EriZone & OTRS, NetEye

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 (WEINspector 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

      1. Installation:  Weinre is based on node.js.  It can be installed as an npm package as follows:
        sudo npm -g install weinre
      2. Start weinre server:  Once you’ve installed it, you should start the weinre server with:
        $ weinre --boundHost 192.0.2.0 --httpPort 8888
        The -–boundhost allows you to connect to a remote server that is not the default localhost.
        The -–httpPort defaults 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.
      3. 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 #user is 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.
      4. 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.

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.

Share this post
Share on LinkedInTweet about this on TwitterShare on FacebookShare on Google+Email this to someoneShare on Tumblr
Valentina Da Rold

Valentina Da Rold

Hi, I'm Valentina and I'm a Frontend Developer at Wuerth Phoenix. I started out my career applying my Cryptography skills to coding, but really quickly fell in love with the web. I have been making websites and applications since 2012 and I still can't get enough of it. Along the way I found a passion for front-end development, and I use this passion to create interfaces that solve problems. When I'm not creating beautiful solutions, I enjoy cooking or doing sport, while listening to beautiful music.

Author

Valentina Da Rold

Hi, I’m Valentina and I’m a Frontend Developer at Wuerth Phoenix. I started out my career applying my Cryptography skills to coding, but really quickly fell in love with the web. I have been making websites and applications since 2012 and I still can’t get enough of it. Along the way I found a passion for front-end development, and I use this passion to create interfaces that solve problems. When I’m not creating beautiful solutions, I enjoy cooking or doing sport, while listening to beautiful music.

Leave a Reply

Your email address will not be published. Required fields are marked *

Archive