Remote debugging frontend with mobile devices for Magento websites

October 20, 2015 4:18:56 AM PDTBy Webinse team

In out time most clients want to see their website design equally awesome on every screen size, especially on mobile devices. This means that responsive design in web-development is a new must-have today. To create such responsiveness developers use Dev Tools (Ctrl+Shift+I or F12) that are presented mostly in every modern browsers. There you can edit HTML, CSS, use console as you wish to optimize website for mobile and tablet.

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 LiteFirebug 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):

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.

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:

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 -

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

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