How To Check The Source Code Of Your Website’s Mobile Theme From A Desktop Browser

mobile-themeSome days back we showed you how to create a mobile theme for your WordPress blog.

As a quick recap, the mobile theme of your blog is specially optimized for Android, iPhone, Blackberry and other mobile or tablet devices. When your site’s traffic and readership grows, it becomes necessary to install a theme optimized specially for mobile devices because readers and visitors coming from a mobile browser like Opera Mobile or Opera Mini can navigate your site quickly and easily in the mobile optimized design.

Some webmasters may want to check their site’s source code in the mobile browser but unfortunately, none of the mobile browsers has support for viewing the source code. In fact, the keyboard shortcut for viewing the source code of a webpage is Control + U but this shortcut key cannot be used to check the source code of your site’s mobile theme from a mobile browser.

However, the following workaround method will help you check your site’s mobile theme from the desktop computer and you can also use this method to view the source code and debug the design, css and other elements of your website’s mobile theme.

1. Open up Firefox and Install the user agent switcher add-on from Firefox add-ons repository

2. Restart Firefox, choose Tools > Default User agent > iPhone 3.0



This will transform Firefox into a mobile browser by switching it’s internal user agent string. You can download specific user agents for Firefox by clicking “Edit User Agents” and then download and install specific user agents for Android, Blackberry, iPad and other mobile or tablet devices.

3. All done, now open your site’s URL from Firefox and it should render the mobile optimized design instead of loading the generic theme of your WordPress blog. An example is shown below:

Preview mbile website in desktop browser

To see the source code or debug the design of your site’s mobile theme, either press Control + U or install the Firebug add-on for Firefox. [ See example ]

After debugging through the mobile design and previewing it in a desktop browser, it becomes a lot easy to customize the different elements, CSS and the code of your site’s mobile optimized design from the browser. Alternatively, you may also want to use opera Dragonfly remote debugging for previewing the theme on a desktop computer and to check the source code from Windows, Linux or MAC computers ( read documentation here).

Thanks @indyan for the tip

Don't miss the Free Book

101 websites for getting things done - an informative book which will make you more productive and efficient. Subscribe to get it for free.