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.
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>
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.
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
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
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:
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
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. 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!