img-01

  You can change browser window size to test front-end responsiveness, but behavior on real mobile device can vary greatly from desktop browser. How to make mobile friendly web design in this case? We answer this question here.

1. Use JavaScript and Bookmarklets

Firebug Lite Firebug was the first extension for desktop browsers to debug. Firebug Lite is similar to Firebug but is developed totally in JavaScript. In most cases it works good on iPad and Android tablets. To use it on Magento site and on every front-end page you need to add this code in your layout file (for example, it can be local.xml in the folder with your theme - app/frontend/default/your-theme-layout):

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <block type="core/text" name="firebug.lite">
                <action method="setText">
                    <text><![CDATA[<script type="text/javascript" src="http://getfirebug.com/firebug-lite-debug.js"></script>]]></text>
                </action>
            </block>
        </reference>
    </default>
</layout>

This code will work only if you have internet connection otherwise you need to download Firebug Lite and put it into your site (for example, in the folder with your theme (skin/frontend/default-your-theme/js)) and attach to layout file as mentioned above.

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/firebug-lite-debug.js</name>
            </action>
        </reference>
    </default>
</layout>

Alternatively, you can use Bookmarklets - bookmarks with JavaScript that run on site opened in browser. This is easy to drag on the bookmarks bar on desktop browsers, but this method doesn’t work on mobile devices. The solution is to add it on desktop browser and synchronize with a mobile or  tablet device or just add directly from mobile device. Bookmark code:

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite-debug.js','releases/lite/debug/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

Now when you are on your website, click on the added bookmark. The result for the first and the second cases will be the same and looks like this: As you see, the console is available now and we can edit HTML and CSS here.

2. Use HTTP Remote-Debugging

To avoid restrictions of touchscreen devices you can use HTTP remote debugging.

weinre

The most popular instrument to do it is weinre. Weinre is a Apache Foundation project and serves as remote web inspector (WEb INspector REmote). It is almost as Firebug and WebInspector, but gives opportunity to load and debug web-pages remotely. So if you are already acquainted with Developers Tools in Firefox or Chrome Dev Tools, you’ll have a grip of weinre easily. Weinre is based on Node.js and firstly you have to install Node.js. Node.js is delivered with NPM (Node Package Manager)  in one package. For weinre installation from terminal - run the next command (if you use Linux or MacOS):

npm -g install weinre

After the process of installation is over, Weinre is ready for debugging.  Write this command in terminal to run weinre server:

weinre --boundHost 192.168.1.28 --httpPort 9090

or

nodejs /usr/local/bin/weinre --boundHost 192.168.1.28 --httpPort 9090

Two sent params are the host (in our case - 192.168.1.28) and the server port that is needed to be listened to (for us - 9090). After server run terminal has to display the string like -

2015-10-15T12:09:49.405Z weinre: starting server at http://192.168.1.28:9090

Next step is to go to the page  http://192.168.1.28:9090 and you will see weinre interface. Find Target Script section, there is a path to javascript file (for us  http://192.168.1.28:9090/target/target-script-min.js#anonymous) that has to be added in the head of your Magento website. Let’s do it as in Firebug Lite:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <block type="core/text" name="weinre.script">
                <action method="setText">
                    <text><![CDATA[<script type="text/javascript" src="http://192.168.1.28:9090/target/target-script-min.js#anonymous"></script>]]></text>
                </action>
            </block>
        </reference>
    </default>
</layout>

Or  we can use Bookmarklet the way as in Firebug Lite. To do this - open the page  (http://192.168.1.28:9090) and find Target Bookmarklet section where you come into necessary url for which you need to add a bookmark, in our case:

javascript:(function(e){e.setAttribute("src","http://192.168.1.28:9090/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

Then open your desktop browser (better if it is based on webkit) and go to the page http://192.168.1.28:9090/client/#anonymous. There your mobile device should appear in Target section as soon as you download your site.
Weinre has similar functionality as Firebug but it is more user-friendly because you don’t need to correct smth on touchscreen or even have Network and Timeline tabs.

3. Use  Remote-Debugging

This type of debugging resembles HTTP debugging but browser connection is carried out through USB. There is no JavaScript  in contrast to previous method.

Android

To start remote debugging you require:

  • Chrome 32 or later version installed on desktop
  • USB cable for connection between your device and desktop
  • Android 4.0+ and Chrome for Android.

Version of desktop Chrome should not be lower than those installed on mobile device. Next check your device that USB debugging is on, choose Settings > Developer options and turn on USB debugging. Plug your device into desktop and on the desktop Chrome go to chrome://inspect page. You will see notification on the device that asks you to permit USB debugging. Press OK.   On desktop page chrome://inspect shows all plugged devices and also all opened tabs on them.   Click inspect under tab you need and Chrome DevTools appear. From there you can interact with tab on the mobile device.  img-20 iOS If you want to use remote debugging with Safari on iOS then:

  • open Safari on your iOS device
  • connect it to your desktop via USB
  • open Safari on the desktop
  • go into Develop and find your device name in Safari menu
  • choose necessary tab and can start debugging

Hope this methods help you to debug frontend of your Magento store and optimize perfect responsiveness of your website!